Question

I have an ajax function that sends a variable – num – to a php script and then echos the value of num in a div with id “status”.

First what happens is the user makes a post, i run all the necessary queries and display the users posts in a div called “posts” (use a while loop so each post is in a div with the same id but the div’s are under one and other). I would like the ajax functionality to work in every one of these “posts” divs (each “posts” div contains the two js buttons witch – onclick – manage the ajax function as well as a “status” div)

However every time i click one of the buttons, lets say in the bottom most visible “posts” div displayed (the button clicked calls the ajax/js function), the function carries out in the top most “posts” div where the first “status” div is whereas it should be displaying in the bottom most div where i clicked the button.

Answer 1

EDIT: Sorry, I was assuming you were using jQuery. My bad.

You should be using classes instead of IDs. If you use an ID jquery will only have an effect on the first one in the DOM. IDs should only be used once per page.

Use classes, then reference the divs you want to edit not only by class name, by some sort of reference to the post div you are interacting with.

$('.posts .button').click(function() {
  //do ajax stuff...
  $(this).parent('div').find('.status').html(data);
}

Updated code:

// .posts should be the class of the posts div
// .button should be the class of the button on which you are activating your ajax
$('.posts .button').click(function() { 
    $.post('your ajax post URL', function(data) {
       $(this).parent('div').find('.status').html(data);
    })
});