31 January, 2014
0 Comments
1 category
When I want to load a html fragment I prefer the contents of the container div in the page and the HTML fragment to have the same ID, like:
Master page
<!DOCTYPE html> <html> <head> <title>Master page</title> </head> <body> <!--Placeholder container. --> <div id="page"></div> </body> </html>
Page (html fragment)
<!DOCTYPE html> <html> <head> <title>Page (html fragment)</title> </head> <body> <!-- Page (html fragment to load). --> <div id="page"></div> </body> </html>
Then the following code can be used to replace the contents of the "placeholder" div, by the contents of the ”html fragment" div:
Code
// Loads a html fragment. // It replaces the content of the given DOM element, with the html fragment contents. // It expects both the current page and the html fragment to contain the same "id" as the given id. // // Parameters: // [id] example ["#page"]. // [url] example ["Features/Login/LoginView.html"]. function loadHtmlFragment (id, url) { // Use jQuery "ajax" instead of jQuery "load", because "load" will get the whole div, // when used with selector "#page" and not the contents. // You can get only the contents with "load", by using "url #page > *", // but that will only get the child elements of the div, // stripping out any direct child text. $.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); } }); };
Tags: Javascript
Category: Uncategorized