Question

I have a jQuery vote script that allows a user to vote on a poll that is displayed on a page. On a particular page there are many polls being displayed (via forms) and the jQuery grabs the values of the inputs in a particular form and send the data over to a query.php page.

This is what a sample poll page looks like:

QUESTION 1:<br />
<div class="poll_area">
    <div id="poll">    
        <form method="POST" action="" class="poll_query">
            <input type="hidden" value="favorites" name="page" />
            <input type="hidden" value="user1" name="to" />
            <input type="hidden" name="pid" value="1"/>                            
            <input name="" type="radio" value="yes" /> Yes<br />
            <input name="" type="radio" value="no" /> No<br />                        
        </form>    
    </div>
    <div class="result"> </div>
</div>

QUESTION 2:<br />
<div class="poll_area">
    <div id="poll">    
        <form method="POST" action="" class="poll_query">
            <input type="hidden" value="favorites" name="page" />
            <input type="hidden" value="user2" name="to" />
            <input type="hidden" name="pid" value="2"/>                            
            <input name="" type="radio" value="yes" /> Yes<br />
            <input name="" type="radio" value="no" /> No<br />                        
        </form>    
    </div>
    <div class="result"> </div>
</div>

And this is the jQuery Script I’m running:

var ajax_load = "<img src='images/ajax-loader.gif' alt='loading...' />";
$("form.poll_query > input[type='radio']").click(function(e) {
    e.preventDefault();
    var form= $(this).closest("form");
    var pid = $("input[name='pid']", form).val();
    var ans = $(this).val();
    var page = $("input[name='page']", form).val();
    var to = $("input[name='to']", form).val();

    $(this).closest("#poll").html(ajax_load);
    $.post(
        "query.php?module=vote",  
        {answer: ans, pid: pid, to: to, page: page},
        function(responseText){  
            $("#poll").hide(0,function() {
                $(".result").html(responseText).fadeIn(1500);
            }); 
        },  
        "html"
    );
});

When voting in the first poll everything renders correctly. The ‘responseText’ that is returned is displayed in the page where it is supposed to. But for every subsequent poll on the page the ‘ajax_load’ loads correctly where it is supposed to but the ‘responseText’ is loaded in the .result class of the FIRST poll.

This is what the page initially looks like:

Question 1? 
o YES 
o NO

Question 2?
o YES 
o NO

if a particular user votes on question 2 this is what the page should look like:

Question 1? 
o YES 
o NO

Question 2 
o YES : XXXXXXXXX 60%
o NO  :  XXXXXX 40%

Instead this is what actually happens (even though the user voted on question 2):

Question 1? 
o YES : XXXXXXXXX 60%
o NO  : XXXXXX 40%

Question 2 
o YES 
o NO

But if the user votes on question 1 the results is loaded properly:

Question 1? 
o YES : XXXXXXXXX 60%
o NO  : XXXXXX 40%

Question 2 
o YES 
o NO

I’ve tried changing $(".result").html(responseText).fadeIn(1500); to $(this).closest(".result").html(responseText).fadeIn(1500);

But still no luck.

Answer 1

You have duplicate element IDs for poll. You should use a class instead, then make your selectors in the callback more precise. You’re on the right track with $(this).closest().

You’ll need to do something like:

var pollArea = $(this).closest(".poll_area");
$.post(... , function(responseText) { 
  pollArea.find(".poll").hide(0,function() {
      pollArea.find(".result").html(responseText).fadeIn(1500);
}); 

Note that the .poll and .result selectors are now scoped by the .poll_area that encloses the clicked radio button.