最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

php - Update element after successful AJAX call - Stack Overflow

programmeradmin1浏览0评论

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.

Share Improve this question asked Jan 7, 2013 at 14:08 RafayRafay 24.3k4 gold badges22 silver badges27 bronze badges 4
  • 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
Add a ment  | 

3 Answers 3

Reset to default 7

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 //...
发布评论

评论列表(0)

  1. 暂无评论