Loading content into a div

Posted on


A while ago I used this code to load content into a div using jQuery load. I repeated the code for all the clicks to load different pages in the same div.

Is there any other way to do this?



<div id="div1">      </div>


Option 1:

If your buttons and pages are actually numbered like that, you can simply extract the number from the ID:

var $container = $('#div1');

$('[id^=button]').click(function() {
    $container.load('page' + this.id.match(/d+$/)[0] + '.php');

Option 2:

If that was just an example, but in reality your naming scheme is not so predictable, you can keep an object map with all the appropriate URLs:

var $container = $('#div1'),
    map = {
        button1: 'page1',
        button2: 'page2'
        // and so on...

$('[id^=button]').click(function() {
    $container.load( map[ this.id ] );

Option 3:

You could store the page URL in the HTML:

<div id="button1" data-page="page1"></div>
<div id="button2" data-page="page2"></div>

and then use that in your JavaScript:

var $container = $('#div1');

$('[id^=button]').click(function() {
    $container.load( $(this).attr('data-page') );

I personally dislike this method, since it puts behavioral stuff in your HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *