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>


### Option 1:

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

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

$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.

• I like the 3rd method best, since it allows you to give your PHP files better names than numbering them, it places the all the relevant data into the HTML (where is belongs) and if you ever change any links you don't need to touch the JavaScript. – RoToRa Jul 26 '12 at 13:26
• NB: I just saw an error in your case 3: You are using classes in the HTML, but are selecting by ID in the script. – RoToRa Jul 26 '12 at 13:27
• @RoToRa - Thanks for spotting that. Updated. I personally prefer using classes, but since the OP is using IDs I'll stick to that. – Joseph Silber Jul 26 '12 at 17:47
• I'd probably add a class to the html and select using that, instead of using a slow attribute selector. – Inkbug Jul 27 '12 at 7:11