How do I pass a variable into a jquery load selector?

Question

I am loading a page inside of a div using ajax. It's all working fine when I have a fixed selector div such as -

$('.ajaxurl').click(function(){
    $('.selected-blog').load($(this).attr('href'));
    return false;
});

Here '.selected-blog' is a fixed entry.

However I have multiple .ajaxurl links on the page, each with it's own respective '.selected-blog' div and so I want to be able to load the source into a different div depending on which .ajaxurl link was clicked. In other words, each .ajaxurl link will need to have a corresponding unique .selected-blog-[id] class and clicking the link will need to pass the [id] variable into the function so that it can be appended to the selector.

I have tried giving the .ajaxurl link an id to pass to the jquery as a variable, so that the body code is -

<div class="teaser-id<?php print $id; ?>">
  <a class="ajaxurl" id ="id<?php print $id; ?>" href="[pagelink]">Click me</a>  
  stuff here
</div> 
<div class="selected-blog-id<?php print $id; ?>"></div>     

[this above code repeats for each teaser in the list]

And the jquery code is -

$('.ajaxurl').click(function(){
     var x = this.id;
     $('.selected-blog-,'+x).load($(this).attr('href'));
     return false;
});

But I can't get it to work, what am I doing wrong?

(Finally - and this is an additional point for if it has an impact on the solution - I'd want to hide the teaser-[id] div, so if the variable passed can also be used for this .hide() function that would be great!)

How do I do this?!

Thanks very much!

Josh Mein · Accepted Answer · 2012-08-27 12:41:06Z

1

You dont need to make your html so complex. You can keep it simple and use jquery next() to get the next div with the class selected-blog-id to load the content into. Something along these lines should work for you:

HTML:

<div class="teaser-id">
    <a class="ajaxurl" href="[pagelink]">Click me</a>  
    stuff here
</div> 
<div class="selected-blog-id"></div>

Javascript:

$('.ajaxurl').click(function(e) {
    var $parent = $(this).parent();

    // hide the teaser
    $parent.hide();

    // load content into the next div with selected-blog-id
    $parent.next('.selected-blog-id').load(this.href);
    e.preventDefault();
});

edited Aug 27, 2012 at 12:41

answered Aug 27, 2012 at 12:35

Josh Mein

28.6k15 gold badges79 silver badges89 bronze badges

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

Comments

techfoobar · Accepted Answer · 2012-08-27 12:36:39Z

0

You are printing out your ajaxurl element as id ="id<?php print $id; ?>", did you intent to do id ="<?php print $id; ?>" instead?

answered Aug 27, 2012 at 12:36

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

1 Comment

Rob Over a year ago

I had added the text 'id' to those sections as $id is a number and from my understanding you can't start an id with a number. So the final result would be id="id3" for example.

JRomero · Accepted Answer · 2012-08-27 12:56:18Z

0

A couple things seem to have been mistyped or else you might want to double check the below:

<div class="teaser-id-<?php print $id; ?>">
 <a class="ajaxurl" id ="blog-<?php print $id; ?>" href="[pagelink]">Click me</a>  
 <!-- <a class="ajaxurl" id ="id<?php print $id; ?>" href="[pagelink]">Click me</a> -->  
 stuff here
</div> 
<div class="selected-blog-<?php print $id; ?>"></div> 
<!-- <div class="selected-blog-id<?php print $id; ?>"></div> -->   

[this above code repeats for each teaser in the list]

jQuery

$('.ajaxurl').click(function(){
    var x = this.id.replace("blog-", '');
    //$('.selected-blog-,'+x).load($(this).attr('href'));
    $('.selected-blog-' + x).load($(this).attr('href'), function(){
        $(".teaser-id-" + x).hide();
    });
    return false;
});

UPDATE Based on comment change this...

$('.selected-blog-'+x).load($(this).attr('href'));

edited Aug 27, 2012 at 12:56

answered Aug 27, 2012 at 12:40

JRomero

4,8781 gold badge31 silver badges49 bronze badges

4 Comments

Rob Over a year ago

Thanks J.Romero! I had added the text 'id' to those sections as $id is a number and from my understanding you can't start an id with a number. So the final result would be id="id3" for example. I've tried your changed code above but I can't get it working.

JRomero Over a year ago

In that case, your jquery selector is not matching your displayed ids.

JRomero Over a year ago

var x = this.id; x would = id3, your selected-blog div is selected-blog-id3 but the jquery is looking for $('.selected-blog-,'+x) which is interpreted into class .selected-blog OR id3 (which isn't a proper selector) because of the comma. Get rid of the comma and it should work.

Rob Over a year ago

Thanks J Romero! I hadn't realised that with the comma. Very helpful!!

Collectives™ on Stack Overflow

How do I pass a variable into a jquery load selector?

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related