button problem with jquery?

Question

I have this button, and when clicked, it sends an ajax call which changes the value of score_up.

I dont see what the problem is. I tried firbug, but apparently it's not even detecting the javscript? :)) Thanks.

jquery:

$('.stats').delegate('.support', 'click', function(e) {

      //stop event
      e.preventDefault();
      //get the id
       var the_id = $(this).closest('.score').attr('id').split('_').pop();
        //the main ajax request
       $.ajax({
           context:this,
           type: "POST",
           data: "action=support&id=" + the_id,
           url: "ajax/sa.php",
          success: function (msg) {

               $(this).siblings("h2.score_up").html(msg).fadeIn();
                //remove down button
                // and remove support button


           }
      });
   });

html:

 <ul class="stats">
        <li id="support_23"class="score">
            <h2 class="score_up">12</h2>
            <span style="text-align:center;">Supporters</span>
        </li>
        <li>
    <button type="submit" value="Actions" class="support" title="support">
        <i></i>
        <span>Support</span>
    </button>
</li>


//vote down button

 <li id="down_23"class="score">
            <h2 class="score_down">12</h2>
            <span style="text-align:center;">down</span>
        </li>
        <li>
    <button type="submit" value="Actions" class="down" title="down">
        <i></i>
        <span>down</span>
    </button>
</li>

    </ul>

Answer 1

Your HTML is invalid, so I would do:

<form action="javascript:alert('form')";>
<ul class="stats">
    <li id="topic_23"class="score">
        <h2 class="score_up">12</h2>
        <span style="text-align:center;">Supporters</span>
    </li>
    <li>
      <button type="submit" value="Actions" class="support" title="support">
      <i></i><span>Support</span></button>
    </li>
</ul>
</form>

And then the jQuery (which in your original would not work, since you wanted .siblings() and not .closest() would now be:

var the_id = $(this).closest("li").siblings('.score').attr('id')
                    .split('_').pop();

and success:

$(this).closest("li").siblings("li.score").find("h2.score_up")
       .html(msg).fadeIn();

I think you also run into troubles with prevent default, since you want to prevent default on the form, and in that case you might run into problems with delegate.

Here is what I would do with .live():

// Prevent form from submitting
$("form").live("submit", function(e) {
    e.preventDefault(); });

// Run Ajax
$('button.support').live('click', function(e) {
      //get the id
       var $score = $(this).closest("li").siblings('.score'),
           the_id = $score.attr('id').split('_').pop();
        //the main ajax request
      $.ajax({
           context:this,
           type: "POST",
           data: "action=support&id=" + the_id,
           url: "ajax/sa.php",
           success: function (msg) {
               $score.find("h2.score_up").html(msg).fadeIn(); 
           }
      });
});

​

Try it out on this jsFiddle

Answer 2

It is not valid HTML for a <button> to be a direct child of a <ul>.

Children of <ul> should be <li>. I wouldn't expect things to work properly with invalid HTML.

HTML with <button> inside a <li>:

<ul class="stats">
    <li id="topic_23" class="score">
        <h2 class="score_up">12</h2>
        <span style="text-align:center;">Supporters</span>
    </li>
    <li>
        <button type="submit" value="Actions" class="support" title="support">
            <i></i>
            <span>Support</span>
        </button>
    </li>
</ul>

jQuery, fixing some of the traversal methods:

$('.stats').delegate('.support', 'click', function(e) {
      //stop event
      e.preventDefault();
        // cache a reference to the previous <li> element
        //   since it is used more than once
       var $prevLi = $(this).closest('li').prev('li');
      //get the id
       var the_id = $prevLi.attr('id').split('_').pop();
        //the main ajax request
       $.ajax({
           context:this,
           type: "POST",
           data: "action=support&id=" + the_id,
           url: "ajax/sa.php",
          success: function (msg) {
               $prevLi.find("h2.score_up").html(msg).fadeIn();
           }
      });
 });