Question

I have this piece of code written in jQuery and PHP:

<script type="text/javascript">
$(document).ready(function(){
  $(".vote<?php echo $pid; ?>").click(function(){
  $("span.vote_box<?php echo $pid; ?>").html("you have voted");
  });
});
</script>

But it doesn’t seem to work. What it is supposed to do is to print “you have voted” in the position of a button which users can use to vote some post with. It reacts ok in the beginning but when i log on as a different user the button stays intact and doesn’t get replaced.

Here is the PHP and HTML part:

<?php
echo '<span class="vote_box'.$pid.'">';
echo '<input type="button" class="vote'.$pid.'" name="vote" value="vote"/>';
echo '</span>';
?>

NOTE: I am using an AJAX request to insert the vote to the database so practically all I want jQuery to do is replace the button with text

Any help? I am new to jQuery so I figure the “html” method I am using could be wrong. Thanks in advance!

Answer 1

I think you are overcomplicating things in your code. Assuming you have the following html:

<span class="vote_box1">
  <input type="button" class="vote1 vote" name="vote" value="vote"/>
</span>
<span class="vote_box2">
  <input type="button" class="vote2 vote" name="vote" value="vote"/>
</span>

and the following javascript:

$(function(){
  $('input.vote').click(function(e){
    $(this).parent().html('You have voted!');
  });  
});

Everything should work fine, as seen in this jsfiddle. If you still want to use your code, you have to start to debug.

From my experience if something does not work in jQuery and fails silently (this means no exception thrown), then the selector is not right. You can easily debug this with the following code:

<script type="text/javascript">
$(document).ready(function(){
  alert('Button: ' +  $(".vote<?php echo $pid; ?>").length);
  $(".vote<?php echo $pid; ?>").click(function(){
    alert('Votebox: ' +  $("span.vote_box<?php echo $pid; ?>").length);
    $("span.vote_box<?php echo $pid; ?>").html("you have voted");
  });
});
</script>

This should alert:

• Button: 1
• Votebox: 1

If on of these values is 0 you know that the selector is false.