Problem

After a successful AJAX call, I want to update an element on page. However, it is not being updated.

Code [Javascript]

$(function()
{
    $(".upvote").click(function()
    {
        var id = $(this).parent().find("input").val();
        $.ajax(
        {
            type: "GET",
            url: "process.php",
            data: "id=" + id +"&f=u",

            success: function(results)
            {
                $(this).parent().parent().find("span.ups").empty().append("Upvotes: " + results);
                console.log(results);
            }
        });
        return false;
    });
});

Code [HTML]

This code is being generated by PHP.

<div class="post">
    <h2>$title</h2>
    <p>$body</p>
    <span class="ups">Upvotes: $upvotes</span>
    <span class="downs">Downvotes: $downvotes</span>
    <span class="total">Total votes: $t_votes</span>
    <div id="links">
        <input type="hidden" id="id" name="id" value="$id">
        <a href="process.php?id=$id&f=u" class="upvote"><button>Upvote!</button></a>
        <a href="process.php?id=$id&f=d" class="downvote"><button>Downvote!</button></a>
    </div>
</div>

Returned by PHP

The updated number of upvotes.

Problem

After a successful AJAX call, I want to update an element on page. However, it is not being updated.

Code [Javascript]

$(function()
{
    $(".upvote").click(function()
    {
        var id = $(this).parent().find("input").val();
        $.ajax(
        {
            type: "GET",
            url: "process.php",
            data: "id=" + id +"&f=u",

            success: function(results)
            {
                $(this).parent().parent().find("span.ups").empty().append("Upvotes: " + results);
                console.log(results);
            }
        });
        return false;
    });
});

Code [HTML]

This code is being generated by PHP.

<div class="post">
    <h2>$title</h2>
    <p>$body</p>
    <span class="ups">Upvotes: $upvotes</span>
    <span class="downs">Downvotes: $downvotes</span>
    <span class="total">Total votes: $t_votes</span>
    <div id="links">
        <input type="hidden" id="id" name="id" value="$id">
        <a href="process.php?id=$id&f=u" class="upvote"><button>Upvote!</button></a>
        <a href="process.php?id=$id&f=d" class="downvote"><button>Downvote!</button></a>
    </div>
</div>

Returned by PHP

The updated number of upvotes.

• php
• javascript
• jquery
• ajax

• 3 What have you tried? Or actually, what's the problem? – Cerbrus Commented Jan 7, 2013 at 14:09
• Are you getting any error? – Suresh Kamrushi Commented Jan 7, 2013 at 14:11
• Updated* It element is not being updated after AJAX call. However, on refresh, I can see the updated value. – Rafay Commented Jan 7, 2013 at 14:11
• Could you show us your PHP also? What is the log returning? – cjds Commented Jan 7, 2013 at 14:11

3 Answers 3

this is not what you think it is. Its value is determined by how the function it appears in is called (and will change when inside a different function).

I've no idea what it will be in a jQuery success callback, but it won't be an HTML element.

If you want it to be the clicked upon element, then you need to store it while this is that element.

$(".upvote").click(function() {
    var clicked_element = this;

Then you can use that variable later on:

$(clicked_element).parent().etc

You cannot use this keyword like that.

var that = null;

$(function()
{
    $(".upvote").click(function()
    {
        var id = $(this).parent().find("input").val();
        that = $(this);
        $.ajax(
        {
            type: "GET",
            url: "process.php",
            data: "id=" + id +"&f=u",

            success: function(results)
            {
                that.parent().parent().find("span.ups").empty().append("Upvotes: " + results);
                console.log(results);
            }
        });
        return false;
    });
});

I didn't test this, but it should work.

Cheers.

$(this) inside the success callback is not the element you might think it is. It would probably be better to cache the parent object instead and traverse from there:

var $post = $('.post');

//... $.ajax etc

success: function() {
    $post.find('.ups').etc //...