2
\$\begingroup\$

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>
\$\endgroup\$

1 Answer 1

6
\$\begingroup\$

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.

\$\endgroup\$
4
  • \$\begingroup\$ 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. \$\endgroup\$
    – RoToRa
    Jul 26, 2012 at 13:26
  • \$\begingroup\$ 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. \$\endgroup\$
    – RoToRa
    Jul 26, 2012 at 13:27
  • \$\begingroup\$ @RoToRa - Thanks for spotting that. Updated. I personally prefer using classes, but since the OP is using IDs I'll stick to that. \$\endgroup\$ Jul 26, 2012 at 17:47
  • \$\begingroup\$ I'd probably add a class to the html and select using that, instead of using a slow attribute selector. \$\endgroup\$
    – Inkbug
    Jul 27, 2012 at 7:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.