# Load element with load="embed"

Showcase for a XForms load element with load embed

## Example

Load a Subform containing CSS and JavaScript.
JavaScript and CSS-Rules from the Subform will be included in the Masterform.

Load Subform including CSS and Javascript

Load a Subform with a wrong "targetid".
An error Message will be included in Page.
You may have to scroll down to the bottom of the Page to see the Error.

Load Subform "wrong targetid".

Load Subform containing CSS and Javascript.
JavaScript and CSS will not be Included.

Load Subform without including CSS and Javascript.
Unload Subform.

## XForms Markup

    <xf:group>
        <xf:label>
            <p>
                Load a Subform containing CSS and JavaScript.<br></br>
                JavaScript and CSS-Rules from the Subform will be included in the Masterform.
            </p>
        </xf:label>

        <xf:trigger>
            <xf:label>Load Subform including CSS and Javascript</xf:label>
            <xf:action>
                <xf:load show="embed" targetid="embedInline">
                    <xf:resource value="'resources/Load-Embed-CSS-JavaScript-Subform.xhtml#xforms'"></xf:resource>
                    <xf:extension includeCSS="true" includeScript="true"></xf:extension>
                </xf:load>
            </xf:action>
        </xf:trigger>

    </xf:group>

    <xf:group>
        <xf:label>
            <p>
                Load a Subform with a wrong "targetid".<br></br>
                An error Message will be included in Page.<br></br>
                You may have to scroll down to the bottom of the Page to see the Error.
            </p>
        </xf:label>

        <xf:trigger>
            <xf:label>Load Subform "wrong targetid".</xf:label>
            <xf:action>
                <xf:load show="embed" targetid="embedSomewhere">
                        <xf:resource value="'resources/Load-Embed-CSS-JavaScript-Subform.xhtml#xforms'"></xf:resource>
                        <xf:extension includeCSS="true" includeScript="true"></xf:extension>
                </xf:load>
            </xf:action>
        </xf:trigger>
    </xf:group>

    <xf:group>
        <xf:label>
            <p>
                Load Subform containing CSS and Javascript.<br></br>
                JavaScript and CSS will not be Included.
            </p>
        </xf:label>

        <xf:trigger>
            <xf:label>Load Subform without including CSS and Javascript.</xf:label>
            <xf:action>
                <xf:load show="embed" targetid="embedInline">
                        <xf:resource value="'resources/Load-Embed-CSS-JavaScript-Subform.xhtml#xforms'"></xf:resource>
                        <xf:extension includeCSS="false" includeScript="false"></xf:extension>
                </xf:load>
            </xf:action>
        </xf:trigger>
        <div id="embedInline"></div>
    </xf:group>

    <xf:group>
        <xf:trigger>
            <xf:label>Unload Subform.</xf:label>
            <xf:action>
                <xf:load show="none" targetid="embedInline"></xf:load>
            </xf:action>
        </xf:trigger>
    </xf:group>

## Notes

Unloading of JavaScript doesn´t work as expected right now.
It is removed from the DOM, but still accessible within JavaScript.