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!

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