I'm trying to increment the html value of a <span> when a button is clicked, but jQuery is saying that the value of the <span> is undefined, even though there is a number physically being shown on the page. Here is the PHP section that generates the HTML:

echo '<div class="box" style="background-color:'.$colours[0].'">
      <p>'.$confessions[0].'<br></p><br>
      <div class="overlay"></div>
      <div class="slide">
        <div class="slideleft">#'.$ids[0].'</div>
        <div class="slideright">
            <span class="upvote" id="'.$ids[0].'">Upvote</span>
            <span class="counter" id="'.$ids[0].'">"'.$counter[0].'"</span>
        </div>
      </div>
      </div>'

and here is the jQuery that is supposed to magic up the HTML:

$("body").on("click", ".upvote", function(e) {
    $.ajax({
        url: 'vote.php',
        data: {
            type: 'up',
            id: $(this).attr('id')
        },
        type: 'post',
        success: function(data) {
            if (data == 'ok') {
                alert($(this).next().html());
            } else {};
        }
    });
});

It does make an alert when the upvote button is pressed, but its value is undefined as opposed to the actual number. Can anyone shed some light on this issue?

Thanks

I'm trying to increment the html value of a <span> when a button is clicked, but jQuery is saying that the value of the <span> is undefined, even though there is a number physically being shown on the page. Here is the PHP section that generates the HTML:

echo '<div class="box" style="background-color:'.$colours[0].'">
      <p>'.$confessions[0].'<br></p><br>
      <div class="overlay"></div>
      <div class="slide">
        <div class="slideleft">#'.$ids[0].'</div>
        <div class="slideright">
            <span class="upvote" id="'.$ids[0].'">Upvote</span>
            <span class="counter" id="'.$ids[0].'">"'.$counter[0].'"</span>
        </div>
      </div>
      </div>'

and here is the jQuery that is supposed to magic up the HTML:

$("body").on("click", ".upvote", function(e) {
    $.ajax({
        url: 'vote.php',
        data: {
            type: 'up',
            id: $(this).attr('id')
        },
        type: 'post',
        success: function(data) {
            if (data == 'ok') {
                alert($(this).next().html());
            } else {};
        }
    });
});

It does make an alert when the upvote button is pressed, but its value is undefined as opposed to the actual number. Can anyone shed some light on this issue?

Thanks

• php
• javascript
• jquery
• html

4 Answers 4

$(this) won't contain the clicked element any more as it bees out of scope whilst inside your success function, instead you will need to cache the variable for use inside your success function.

For example:

$("body").on("click", ".upvote", function(e){
    var clicked = $(this);
    $.ajax({ 
        url: 'vote.php',
        data: { type: 'up', id: clicked.attr('id') },
        type: 'post',
        success: function(data) {
            if(data == 'ok'){
                alert(clicked.next().html());
            } else {
            };
        }
    });   
});

Your problem is that this is not what you expect; in the "success" callback, this has been rebound to the jqXHR object- and getting its next() is what's returning undefined.

I remend explicit capture to solve this problem:

$("body").on("click", ".upvote", function(e){
    var self = this; /// capture "this" explicitly here
    $.ajax({ 
        url: 'vote.php',
        data: { type: 'up', id: $(this).attr('id') },
        type: 'post',
        success: function(data) {
                    if(data == 'ok'){
                    alert($(self).next().html()); /// so now it is available here
                  } else {
                  }
        }
    });   
});

I think that $(this) isn't referencing your DOM element here. Before the ajax function try adding

var elem = $('.upvote');

And using

elem rather than $(this) in the ajax function.

pass this as the context for it to applied in methods to ajax

No need to make a new var to access this

Check out the docs: http://api.jquery./jQuery.ajax/

 $("body").on("click", ".upvote", function(e){

        $.ajax({ 
            url: 'vote.php',
            context: this, // capture this here instead
            data: { type: 'up', id: $(this).attr('id') },
            type: 'post',
            success: function(data) {
                if(data == 'ok'){
                    alert($(this).next().html()); /// so now it is available here
                } 
            }
        });   
    });