Support page fragments in Ajax modaal

The Ajax variation of Modaal loads the entirety of the target page into the modal. This is problematic when the target page is an entire page, as a second head should not be injected within the body of the modal host page.

One solution is to remove the page-level markup from the modal target page. However this is problematic during development, as automated a11y linters like Tenon.io will flag the resulting markup for missing basic markup features such as the page title.

It would be easier if Modaal supported loading page fragments. This would allow the modal target page to be well-formed, but the modal itself to load only the 'contents' of the target page.

As an example, jQuery's $.ajax shortcut function $.load() supports a second parameter, which is the selector of the fragment to load.

$( "#result" ).load( "ajax/test.html #container" );
When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

Source: http://api.jquery.com/load/

Another jQuery example is an adaption of the $.ajax function, to strip out everything except the fragment after the data has been returned from the request:

$.ajax({
url: url,
type: 'GET',
dataType: "html",
success: function (data)
{
// Strip out any javascript by using "parseHtml".
// Only use the contents of the html fragment by using "html()".
var dom = $("<div>").append($.parseHTML(data)).find(id).html();
// Adjust UI.
$(id).html(dom);
}
});
};

Source: https://www.roelvanlisdonk.nl/2014/01/31/loading-html-fragments-with-jquery/

humaan / Modaal

Support page fragments in Ajax modaal #110