Transcludes HTML content from an external HTML resource.
Fetch the HTML document and replace itself with the HTML body contents.
<sajax-content src="path/to/external.html" auto></sajax-content><sajax-content> is available on NPM and may be installed as a dependency.
> npm install @cogizmo/sajax-content
-
Place the files on your server.
-
Install the appropriate cogizmo/Cogizmo.
- From npm
> npm install @cogizmo/cogizmo- From github
-
Add Cogizmo to your document
<head>.<script src="path/to/Cogizmo.js"></script>
-
Add
<sajax-content>element to your document.<script src="path/to/sajax-content.js"></script>
-
Use element whereever you want to transclude html.
<sajax-content src="path/to/external.html"></sajax-content>
Boolean
When true, will fetch the external HTML when a valid src attribute. When false, will wait until auto attribute is true or transclude is called.
True:
<sajax-content auto></sajax-content>False:
<sajax-content></sajax-content>String<CSSSelector> = "*"
Determines which elements are transcluded from the external HTML document's <body>. Valid values are any selector that can be used as an argument for HTMLElement.querySelectorAll(). The following gets all <p>s that are children of elements with class="container".
<sajax-content select=".container > p"></sajax-content>String - Required
URL pointing to the desired external HTML document. URLs are calculated in relation to the current document.
<sajax-content src="path/to/external.html"></sajax-content>Returns Boolean - ReadOnly
When true, will fetch the external HTML when a valid src attribute. When false, will wait until auto attribute is true or transclude is called.
Returns String<CSSSelector> = "*"
Determines which elements are transcluded from the external HTML document's <body>. Valid values are any selector that can be used as an argument for HTMLElement.querySelectorAll(). The following gets all <p>s that are children of elements with class="container".
Returns String - ReadOnly
URL pointing to the desired external HTML document. URLs are calculated in relation to the current document.
Gets an external HTML document from src attribute, queries the document for the elements using the select attribute, and imports them into the current HTML document.
<sajax-content> events try to behave as close to native DOM as possible. This means that you may cancel <sajax-content>s default behavior without having to worry about order of listeners or hierarchy. There is a single limitation to maintain defaultable and cancelable behavior. do not add an event listener to <sajax-content> events on the window/global object.
Fires when transclude() has retrieved a URL successfully.
Detail: The response object containing the data retrieved by the URL.
Fires when the transclusion process has successfully retrieved elements from an HTML document.
Detail: The NodeList query results from the external HTML document. The nodes are not yet imported.
Fires when the transclusion process has imported the NodeList results.
Detail: An Array containing the imported nodes.
Fires when the transclusion process has attached the imported nodes from the external HTML document.
Detail: An Array containing the attached nodes.