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
3 Answers
Reset to default 7this
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 //...