Cannot debug jQuery button

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 javascript? :)) 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>

Please be more specific about the problem itself if not it might be very difficult to help you, help us help you! — Trufa
– Trufa, Commented Oct 17, 2010 at 21:45
the problem is when i try to click the support button, on the html, its meant to send an ajax call then update the h2.score_up on the html,in this case to 13, but its doing nothing, its not even posting! :)) — getaway
– getaway, Commented Oct 17, 2010 at 21:48

user113716 · Accepted Answer · 2010-10-17 22:22:57Z

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

edited Oct 17, 2010 at 22:22

answered Oct 17, 2010 at 22:17

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

22 Comments

getaway Over a year ago

hey patrick, what do you think i should do then, this is a bit different from the other one we did? when we were working with links, im trying to do this with buttons for my blog!!!

user113716 Over a year ago

@getaway - Did this code work? I placed the <button> in its own <li>. Not sure if that's how you want it. We could place it in the first <li>, but will need to change a little then.

getaway Over a year ago

parick it works fine , but instead of chnaging the score up, it removes it

user113716 Over a year ago

@Peter - You're welcome. I personally think live() is overused/over-recommended. Typically dynamic events are added to some specific container that can have a delegate. I personally wouldn't use .live() unless there's some sort of element that could be placed at any location on the page. I don't think that happens too often.

user113716 Over a year ago

@getaway - From the button, traverse up to its <li> then over to the proper <li> that has the other button, then .find() the button. Then remove the original button. Something like this: $(this).closest('li').next().next().find('button').remove(); $(this).remove();

|

Peter Ajtai · Accepted Answer · 2010-10-17 22:43:54Z

2

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

edited Oct 17, 2010 at 22:43

answered Oct 17, 2010 at 21:48

Peter Ajtai

57.8k13 gold badges124 silver badges143 bronze badges

5 Comments

Peter Ajtai Over a year ago

@getaway, your success isn't quite right either. Was still in the process of editing. Ok, added in the corrected succes callback too.

getaway Over a year ago

thank you very much, it solved the ajax bit, pheeeeeew, thanks again +uovote from me, but its not updating the score, i get the right reponse from firebug, but it deosnt not update the score on the webpage (H2.support bit) :))

Peter Ajtai Over a year ago

@getaway - I think there's something odd going on with your .preventDefault(), since you want to prevent the default on submit not click. The way I know how to do that is with live(). I put together a working example on jsFiddle. You might be able to use delegate on the click sitll, but I was having problems with it.

getaway Over a year ago

it works on js fiddle but not on my page, i tried your alternative but its still the same thing

Peter Ajtai Over a year ago

@getaway - I also added a little cleanup to your HTML. Since you had invalid HTML that may have also been causing problems. Try it now. Also, if you can get it to work on jsFiddle but not your page, that means your page is somehow different.

Collectives™ on Stack Overflow

Cannot debug jQuery button

2 Answers 2

22 Comments

Try it out on this jsFiddle

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

22 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related