Loading content into a div

Question

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?

$("#button1").click(function(){
    $('#div1').load('page1.php');
});


$("#button2").click(function(){
    $('#div1').load('page2.php');
});

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

Answer 1

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.