Rafay Rafay - 3 months ago 6x
PHP Question

Update element after successful AJAX call


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

Code [Javascript]

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

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

Code [HTML]

This code is being generated by PHP.

<div class="post">
<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>

Returned by PHP

The updated number of upvotes.


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: