This is the keyword in a jQuery AJAX request
On click, I change the css of the selected div like this:
$(".like-grid-span").click(function() {
if ($(this).css('color') == "rgb(0, 0, 0)") {
$(this).css({
color: 'blue',
transition: 'all .45s'
});
$('.like-count').html(data);
$(this).prop('title', 'Rated as Good');
} else {
$(this).css({
color: 'rgb(0, 0, 0)',
transition: 'all .45s'
});
$(this).prop('title', 'Rate as Good');
}
});
I just injected an ajax request into the onclick function and added the rest of the code in the callback, but my keyword (which was referencing the currently selected div) is not working now, I know it might be a link to ajax now, but like can I use this to link to a selected div? Or is there an alternative?
$(".like-grid-span").click(function() {
var selected_offer_id = $(this).closest("ul.amenities").data('id');
$.ajax({
url: "/apexrealestates/goods/goodmechanism.php",
type: "POST",
data: {
user_id: 1,
offer_id: selected_offer_id
},
success: function(data) {
if ($(this).css('color') == "rgb(0, 0, 0)" && data != false) {
$(this).css({ // this is the my this keyword I'm talking about
color: 'blue',
transition: 'all .45s'
});
$('.like-count').html(data);
$(this).prop('title', 'Rated as Good');
} else {
$(this).css({
color: 'rgb(0, 0, 0)',
transition: 'all .45s'
});
}
},
error: function(data) {
alert("phat gea");
}
});
});
Here is my html:
<div class="row">
<div class="listing_tile item col-sm-4">
<div class="options">
<a data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body" type="button" data-html="true" href="#" id="login">Login</a>
<div id="popover-content" class="hide">
</div>
</div>
<div class="image">
<a href="./property/detail.php">
<span class="btn btn-default"><i class="fa fa-file-o"></i> Take a Look</span>
</a>
<img src="img/property2.jpg" alt="" />
</div>
<div class="favt-grid-div" title="Add to Wishlist">
<i class="fa fa-star"></i>
</div>
<div class="price">
<i class="fa fa-home"></i>For Sale
<span>PKR 2500000</span>
</div>
<div class="info">
<h3 class="text-center">
<a href="#">Apartment in Bahria</a>
<small><?= getExcerpt('556-Safari villas bahria town Lahore'); ?></small>
</h3>
<h4 class="text-center text-danger"><b>Lahore</b></h4>
<ul class="amenities" data-id="2">
<li><i class="fa fa-arrows"></i> 45 Sq-Ft</li>
<li title="click to Rate"><span class="like-grid-span"><i class="fa fa-thumbs-o-up"></i></span><span class="like-count">26</span> Likes</li>
</ul>
</div>
</div>
</div>
Help will be received, thanks.
source to share
Store the this
reference in a variable and then use it in the success
callback method
$(".like-grid-span").click(function() {
var _self = $(this); //Store reference
$.ajax({
success: function(data) {
//Use the variable
_self.css({ });
}
});
});
Alternatively, you can use context
, it sets the value this
in callbacks.
$.ajax({
context: this,
});
EDIT, unbind and bind the click handler
function likeClickHandler() {
var _self = $(this);
//Unbind click handler
_self.off('click')
$.ajax({
success: function(data) {
//Use the variable
_self.css({
});
//Bind Click handler
_self.on('click', likeClickHandler);
}
});
}
$(".like-grid-span").on('click', likeClickHandler);
source to share
assign object $(this)
to javascript variable.
var thisOBJ;
$(".like-grid-span").click(function() {
thisOBJ = $(this);
// success function
success: function(data) {
if (thisOBJ.css('color') == "rgb(0, 0, 0)" && data != false) {
thisOBJ.css({ // this is the my this keyword I'm talking about
color: 'blue',
transition: 'all .45s'
});
});
source to share