jQuery AJAX callback function issue

Question

I have a simple voting mechanism Im trying to block out. I got some help earlier and it works on its own but I'm trying to do it with an ajax callback - i get the returned data but the funciton isn't firing for some reason (although it works with a simple alert as the callback function) but it's not incrementing the numbers. Here's the simplified HTML

<form name="vote" id="vote" method="post" action="PHP/success.php">
    <a class="vote">Good</a><input class="qty" type="text" name="qty" value="0" readonly="readonly" />
    <a class="vote">Bad</a><input class="qty" type="text" name="qty" value="0" readonly="readonly" />
</form>

Here is the dummy PHP (PHP/success.php) that only performs an echo at this point

<?php
    echo('ok');
?>

and my click function

$(".vote").click(function() {
    $.ajax({
        type: "POST",
        url: "PHP/success.php",
        success: function(data) {
            if (data=="ok") {
                var input = $(this).next(".qty");
                input.val(parseFloat(input.val()) + 1);
            } else {
        alert('error');
            }
        }
    });
});

again if i replace the (data="ok") var and function with an alert it works fine. thx

Could just be whitespace on data, try $.trim(data) == 'ok' instead. — mu is too short
– mu is too short, Commented Nov 2, 2011 at 4:00
What happens if i click Bad? $(this).next(".qty") will fail in that case. — Sang Suantak
– Sang Suantak, Commented Nov 2, 2011 at 4:02
@muistooshort nope. this is puzzling...it looks right doesn't it? — Dirty Bird Design
– Dirty Bird Design, Commented Nov 2, 2011 at 4:03
@jSang it seems to work when it's not in the context of an ajax call dirtybirddesignlab.com/Wronglish/test.html — Dirty Bird Design
– Dirty Bird Design, Commented Nov 2, 2011 at 4:04
Sorry, i missed the input tag, my bad. BTW could you show us the exact value of the ajax call data? — Sang Suantak
– Sang Suantak, Commented Nov 2, 2011 at 4:08

Mithun Satheesh · Accepted Answer · 2011-11-02 04:17:16Z

4

i think problem is with this line.

var input = $(this).next(".qty");

$(this) is not giving the clicked element there.

if you replace it by

var input = $(".vote").next(".qty");

the function works.

EDIT:

I tried with this and it worked.

 $(".vote").click(function() {
                      var kk = $(this);

$.ajax({
    type: "POST",
    url: "a.php",
    success: function(data) {

    if (data=="ok") {

            var input = kk.next(".qty");
            input.val(parseFloat(input.val()) + 1);
        } else {
    alert('error');
        }


    }
});
});

edited Nov 2, 2011 at 4:17

answered Nov 2, 2011 at 4:11

Mithun Satheesh

27.9k14 gold badges80 silver badges103 bronze badges

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

3 Comments

nrabinowitz Over a year ago

That seems right, but you should probably save a reference to this outside the callback instead - your answer won't work correctly if there are multiple .vote elements.

Dirty Bird Design Over a year ago

@nrabinowitz so just move the var kk = $(this) up above the .ajax call, similar to xdazz's answer right? that would make it global correct?

nrabinowitz Over a year ago

@DirtyBirdDesign - yup, that's what I was thinking.

xdazz · Accepted Answer · 2011-11-02 04:21:30Z

2

Put var input = $(this).next(".qty"); outside.

$(".vote").click(function() {
    var input = $(this).next(".qty");
    $.ajax({
        type: "POST",
        url: "PHP/success.php",
        success: function(data) {
            if (data=="ok") {            
                input.val(parseFloat(input.val()) + 1);
            } else {
        alert('error');
            }
        }
    });
});

answered Nov 2, 2011 at 4:21

xdazz

161k38 gold badges255 silver badges278 bronze badges

1 Comment

Dirty Bird Design Over a year ago

awesome. always had issues with the "think globally act locally" stuff. I appreciate it man.

Collectives™ on Stack Overflow

jQuery AJAX callback function issue

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related