jQuery extract url and place into .load()

Question

I'm trying to load external php into a div on click, works fine like this:

$('.tab1').click(function(){
    $('#place').hide(500, function(){
        $('#place').load('example1.inc', function(){
        $('#place').show(500);
        });
    });
});
$('.tab2').click(function(){
    $('#place').hide(500, function(){
        $('#place').load('example2.inc', function(){
        $('#place').show(500);
        });
    });
});

the problem is obvious, so I've been trying to narrow it down with no success. I figured to place links in the tabs (no longer using unique ids for the tabs), and extract the link to place into .load() -

$('.tab').click(function() {
    var location = $('a', this).attr('href');
    $('#place').hide(500, function() {
        $('#place').load(location, function() {
        $('#place').show(500);
        });
    });
});

this is way way off - and load only takes a url as first argument so...

My question is how can I place the appropriately clicked tab's URL into the load method?

btw I'm pretty new at this - is the first way I have it THAT bad? I mean when I have something like 5 tabs its pretty cleat that I'm doing it wrong. Thanks.

I don't see any issue with your second example, what's the problem with it? — Rory McCrossan, May 29 '13 at 09:27
in first you are using class not id's and your second one seem to be right ? — A.T., May 29 '13 at 09:29
Sounds like @Arun is right - you said you were "no longer using unique ids". If you are using the period selector, you weren't using IDs in the first place. In jQuery, selectors can be `$(".class")` and `$("#id")` — CodingIntrigue, May 29 '13 at 09:30
hmmm... second one is simply loading the link as a page, not into the #place div. the first is just bad re-writting example, but it worked. perhaps i should place the .tab into the 'a', as opposed to a into the tab. — , May 29 '13 at 09:33
sorry can't understand your requirement...is really something not working ?? — A.T., May 29 '13 at 09:35
not working in the slightest. just acting as any old link. perhaps I need to do something to the html part so it isn't an active link? blah — , May 29 '13 at 09:48
Yeah thanks Blade0rz & Arun - that was a mistake in the phrasing of the question. I meant classes. — , May 29 '13 at 09:50

score 1 · Accepted Answer · answered May 29 '13 at 09:38

the second one is simply loading the link as a page, not into the #place div

This is because you did not prevent the click event on the a by using preventDefault(). Try this:

$('.tab a').click(function(e) {
    e.preventDefault();
    var location = $(this).attr('href'), $place = $('#place');

    $place.hide(500, function() {
        $place.load(location, function() {
            $place.show(500);
        });
    });
});

jQuery extract url and place into .load()

1 Answers1