Friday, February 1, 2013

Using jQuery to include a supporting file

There are times when you'll want to include a file from your server in a page, but don't have access to server-side code like ASP's include directive.  For instance, you may be working in pure HTML, and want to include a navigation menu on every page without duplicating it each time.  You may be tempted to use an iframe for that, or render it with a javascript function full of document.write statements.  Both are options, and have their uses, but jQuery offers another solution: the .load() method.  It is very similar to the .get() function, except that it assumes a few defaults, and has an extra option for only inserting a certain part of the returned content.

If you used an iframe to accomplish this, you would probably need to either know the exact dimensions of the content, or dynamically adjust the size of the iframe after it loaded (which can be tricky!).  Otherwise, your iframe will have scrollbars or blank areas, like this:



Keep in mind that if the page I were including has its own navigation, that navigation is also in the resulting iframe... everything gets loaded as it is.  Obviously you would want to structure the file being included, so that it didn't have extra content.  That still leaves the issue of sizing, though.

Using jQuery's .load() method, you can not only reach out and grab another file from the same server, but also limit what section of that file gets loaded into your current page.  The most common way to use this is to create a <DIV> on your page, and use jQuery to load the supporting file - all or part of it - into that DIV.

<div id="result"></div>

would then be populated by

$('#result').load('http://fiddle.jshell.net/webdevem/JfcJp/show/');

And would look like this:

If you only wanted to load a particular element (whether a DIV, SPAN, P or whatever) into your results, you can do that by specifying the ID of that element in the parameters, like so:

$('#result').load('http://fiddle.jshell.net/webdevem/JfcJp/show/   #specialContent');

Be aware though, that it will take the entire element - not just the contents of it.  For instance, if you reference a <span id="#specialContent">SPECIAL Content</span> in your load request, the result would be <div id="result"><span id="#specialContent">SPECIAL Content</span> </div>

Restrictions: This technique is subject to the "Same origin policy", meaning that any file loaded must be referenced using the same scheme, hostname and port number.  This technique is also not reliable when working with local HTML files, since not all browsers (Chrome, for instance) will allow javascript access to local files without extra configuration, even if your HTML file is local as well.

See it in action!

Experiment with this at http://jsfiddle.net/webdevem/vxdHs/

1 comment:

  1. Great publish, very useful information. I really appreciate this post. You must continue your writing. I'm confident, you've a huge readers' base already!..
    Engineering Colleges in Chennai, ECE Engineering Colleges in Chennai

    ReplyDelete