CODEWITHSUNDEEP
phpjavascriptjqueryhtml
Taimur
Taimur

Reputation: 3241

jQuery - html of <span> returning 'undefined'

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

Upvotes: 1

Views: 2725

Answers (4)

uadnal
uadnal

Reputation: 11445

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.com/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
                } 
            }
        });   
    });

Upvotes: 1

Adam Waite
Adam Waite

Reputation: 18855

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.

Upvotes: 1

geocar
geocar

Reputation: 9305

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 recommend 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 {
                  }
        }
    });   
});

Upvotes: 1

Maccath
Maccath

Reputation: 3956

$(this) won't contain the clicked element any more as it becomes 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 {
            };
        }
    });   
});

Upvotes: 6

Related Questions