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
– Rory McCrossan, Commented May 29, 2013 at 9:27
in first you are using class not id's and your second one seem to be right ? — A.T.
– A.T., Commented May 29, 2013 at 9: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
– CodingIntrigue, Commented May 29, 2013 at 9: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. — anon
– anon, Commented May 29, 2013 at 9:33
sorry can't understand your requirement...is really something not working ?? — A.T.
– A.T., Commented May 29, 2013 at 9:35

Rory McCrossan · Accepted Answer · 2013-05-29 09:38:31Z

1

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);
        });
    });
});

answered May 29, 2013 at 9:38

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery extract url and place into .load()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related