This question already has answers here:
Accessing $(this) after success:function() when using $.ajax
(3 answers)
Closed 5 years ago.
I have an anchor element nested within multiple divs. When I click on it the specific tweet gets deleted from the database using AJAX and I want to visually remove it using jquery but I can't get it to work.
HTML:
<div class="tweet-wrapper w-clearfix" >
<div class="tweet-left-side-wrapper"><img class="tweet-avatar" height="48" src="/images/profiles/{{$tweet->user->profile->image->file}}" width="48">
</div>
<div class="tweet-right-side-wrapper w-clearfix">
<a class="tweet-username" href="{{route('show.profile',$user->profile->url_handle)}}">{{$tweet->user->profile->display_name}}</a>
<a class="tweet-handle" href="{{route('show.profile',$user->profile->url_handle)}}">{{$tweet->user->profile->handle}}</a><span> · </span>
<a class="tweet-date" href="#">{{$tweet->created_at->diffForHumans()}}</a>
#if($tweet->user->profile->url_handle == $user->profile->url_handle)
<div class="tweet-dropdown w-dropdown" data-delay="0">
<div class="tweet-dropdown-toggle w-dropdown-toggle">
<div class="w-icon-dropdown-toggle"></div>
</div>
<nav class="tweet-dropdown-list w-dropdown-list">
<div class="nav-dropdown-link-group">
<a class="nav-dropdown-link w-dropdown-link" href="#">Share via Direct Message</a>
<a class="nav-dropdown-link w-dropdown-link" href="#">Copy link to Tweet</a>
<a class="nav-dropdown-link w-dropdown-link" href="#">Embed Tweet</a>
<a class="nav-dropdown-link w-dropdown-link" href="#">Pin to your profile page</a>
<a class="nav-dropdown-link w-dropdown-link profile-tweet-delete-button" data-tweet-id="{{$tweet->id}}" href="#">Delete tweet</a>
</div>
<div class="nav-dropdown-link-group"><a class="nav-dropdown-link w-dropdown-link" href="#">Add to new Moment</a>
</div>
</nav>
</div>
AJAX:
$('.profile-tweet-delete-button').each(function(){
$(this).on('click',function(){
$.ajax({
type:'post',
url:'{{URL::route('delete-tweet')}}',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data:{
tweetID : $(this).data('tweet-id')
}
,
success:function(){
successAlert("Tweet deleted!");
$(this).parents('div[class^="tweet-wrapper"]').remove();
},
error: function(){
errorAlert("Failed to delete tweet!");
}
});
});
});
You have to store this outside the success callback like so..
$('.profile-tweet-delete-button').each(function(){
$(this).on('click',function(){
var thisRef = this; // store a ref here
$.ajax({
type:'post',
url:'{{URL::route('delete-tweet')}}',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data:{
tweetID : $(this).data('tweet-id')
}
,
success:function(){
successAlert("Tweet deleted!");
$(thisRef).parents('div[class^="tweet-wrapper"]').remove();
},
error: function(){
errorAlert("Failed to delete tweet!");
}
});
});
});
Related
After being searched in the index page, the button action does not work.
While visiting second page the action button does not work.
Here is my index page
<a href="#" class="btn btn-primary btn-active-primary btn-sm"
data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
{{actions}}
<span class="svg-icon svg-icon-5 m-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" </svg>
</span>
</a>
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded
menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
data-kt-menu="true">
<div class="menu-item px-3">
<a href="{{ route('index.show', $index->id) }}" class="menu-link
px-3">
{{View Details}}
</a>
</div>
Here is the Route
Route::prefix('example')->name('examples.')->group(function () {
Route::get('', [ExampleController::class, 'index'])->name('index');
});
Here is the script
$(document).on("click", "#pagination a, #search_btn, #reset_btn", function() {
if(this.id == 'reset_btn'){
$("#searchform").reset();
}
$.ajax({
url: this.dataset.url,
type: 'get',
data: $("#searchform").serialize(),
processData: false,
cache: false,
contentType: false,
success: function(data) {
$("#pagination_data").html(data);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
})
});```
Simply solve the bug by inserting the code below into the button function script.
KTMenu.createInstances();
I am trying to send ajax request and remove the parent of popover after success
the request is success
but I can't access the parent of popover to remove it that is the bottom of problem
// delete work form portfolio
$(document).on("click", "#delete-work", function(){
var id_val= $(this).attr("data-id");
$.ajax({
url: "ajax/portfoliojx.php",
type: "POST",
data: {
name : "delete_work",
id : id_val,
},
dataType: "JSON"
}).done(function(data){
// check if responed email error
$(this).parents(".work").remove();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="work">
<div class="col-md-3">
<div class="thumbnail">
<a href="">
<img src="uploads/portfolio/251442-7.jpg" title="hello" alt="hello">
</a>
<div class="caption">
<h4 class="tite">hello</h4>
</div>
<hr>
edit <i class="fa fa-edit"></i>
<a tabindex="0" class="btn btn-danger pull-left" role="button" data-toggle="popover" data-trigger="focus" data-placement="top" title="" data-content="<button class='btn btn-defualt'>no</button><span class='pull-left'><button id= 'delete-work' data-id= '23' class='btn btn-danger'>yah</button></span>" data-original-title="are you sure from this ?"> delete <i class="fa fa-trash"></i></a>
</div>
</div>
</div>
Inside Ajax callback the scope should be Ajax so this won't be works. the below codes works for your case
$(document).on("click", "#delete-work", function(){
var _self = this;
var id_val= $(this).attr("data-id");
$.ajax({
url: "ajax/portfoliojx.php",
type: "POST",
data: {
name : "delete_work",
id : id_val,
},
dataType: "JSON"
}).done(function(data){
// check if responed email error
$(_self).parents(".work").remove();
});
})
I have following HTML code and I am calling ajax using click event using this class .educacao_search.
<div class="tab-pane active" id="tab-educacao">
<br>
<div class="row">
<div class="col-md-12">
<h4>EucaÇÃo</h4>
<ul class="list-inline three">
<li><a class="educacao_search" data-slug="ension">Ensino</a></li>
<li><a class="educacao_search" data-slug="enem">ENEM</a></li>
<li><a class="educacao_search" data-slug="escolas">Escolas</a></li>
<li><a class="educacao_search" data-slug="lingua-e-linguagens">Lingua e Linguagens</a></li>
<li><a class="educacao_search" data-slug="historia">História</a></li>
<li><a class="educacao_search" data-slug="todos">Todos</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group has-feedback has-search">
<input type="text" class="form-control" placeholder="Search" id="do_search_educacao">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
</div>
<br>
<div class="row"><div class="show_result"></div><br></div>
</div>
now I on success I want to show result in show_result class.
To do this I am using collowing jQuery code but it seems not working! I mean the result is not showing in this class called show_result
$(this).parents(".tab-pane").find(".show_result").html(result);
Note: this is a bootstrap tabs and there are 5 tabs with same classes which is educacao_search and show_result
Update:
Ajax Call:
$(".educacao_search").click(function () {
var slug = $(this).data('slug');
$.ajax({
type: 'POST',
url: urls.ajax_url,
data: {
'slug': slug,
'action': 'get_post_content'
}, success: function (result) {
$(this).parents(".tab-pane").find(".show_result").html(result);
//$(this).find(".show_result").html(result);
},
error: function () {
alert("error");
}
});
});
Declare var obj = $(this); before .ajax and use it inside success callback.
$(".educacao_search").click(function () {
var slug = $(this).data('slug');
var obj = $(this);
$.ajax({
type: 'POST',
url: urls.ajax_url,
data: {
'slug': slug,
'action': 'get_post_content'
}, success: function (result) {
obj.parents(".tab-pane").find(".show_result").html(result);
//$(this).find(".show_result").html(result);
},
error: function () {
alert("error");
}
});
});
It's important to know how this keyword works in javascript. Refer below links it will be helpful.
https://javascript.info/object-methods
https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c
Here is the html code:
<div class="magic-container">
<div class="input-group">
<input type="text" class="typeahead form-control" placeholder="Select category ..." />
<ul class="dropdown-menu" style= "margin-top: -10px !important;">
<li id="one">Sports</li>
<li role="presentation" class="divider"></li>
<li id="two">Entertainment</li>
<li role="presentation" class="divider"></li>
<li id="three">Travel</li>
<li role="presentation" class="divider"></li>
<li id="four">Business</li>
<li></li>
</ul>
<span class="flip">
FLIP
</span>
</div>
</div>
<div class="magic-bar">
<span id="rating-slider" class="ui-slider-range"></span>
<span class="flip">
FLIP
</span>
</div>
When FLIP with mirror1 clicked, I want to post fc1 and when FLIP with mirror2 is clicked I want to post fc2.
Here is my code to perform this:
$(".flip").on('click', function() {
$(".magic-bar").toggle();
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"flipClick": 'fc1'},
success: function(data) {
$(".articleContent").html(data);
//setInterval("messageDisable()", 5000);
}
});
$(".magic-container").toggle();
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"flipClick": 'fc2'},
success: function(data) {
$(".articleContent").html(data);
//setInterval("messageDisable()", 5000);
}
});
});
But when I click on FLIP both the values get posted and page response remains same. What is the logic mistake here?
You problem is that you only get the click on class flip, insted what anchor is clicked.
Try:
$(".flip a").on('click', function() {
if($(this).hasClass('mirror1'))
{
$(".magic-bar").toggle(); $(".magic-container").toggle();
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"flipClick": 'fc1'},
success: function(data) {
$(".articleContent").html(data);
//setInterval("messageDisable()", 5000);
}
});
}
else
{
$(".magic-container").toggle(); $(".magic-bar").toggle();
$.ajax({
url: "invite_db.php",
type: "POST",
data: {"flipClick": 'fc2'},
success: function(data) {
$(".articleContent").html(data);
//setInterval("messageDisable()", 5000);
}
});
}
});
You are simply submitting both values when clicking any DOM object with class "flip". I read your code like this:
$(".flip").on('click', function() {
$(".magic-bar").toggle();
$.ajax({ data: {"flipClick": 'fc1'} /* ... */);
$(".magic-container").toggle();
$.ajax({ data: {"flipClick": 'fc2'} /* ... */);
});
There is no conditional logic in your code
For instance you need to check if the closest anchor tag
of the flip click has class mirror1 or mirror2 then based
on that you will do one of the two calls and toggle
Something like this
$(".flip a").on('click', function() {
if($(this).hasClass('mirror1')){
}
if($(this).hasClass('mirror2')){
}
}
I have a JavaScript abc.js that is running on a div (class one) element. The script is working fine on elements located within the div element in the html code, but it's not working on data returned from success ajax call that appended to id=tow element.
Here is the code;
HTML
<script type="text/javascript" src="abc.js"></script>
<div class="one">
<ul id="tow">
<li>
<a href="images.jpg">
<img src="images/a1.jpg"/>
<span>
<div class="title"><img src="Images/a2.jpg" /></div>
</span>
</a>
</li>
</div>
JavaScript
$(document).ready(function () {
$('#search').click(function () {
if (cid != 0) {
$.ajax({
type: "POST",
url: 'ajax.php',
data: {
aid: aid,
cid: cid,
sid: sid
},
success: function (data) {
$("#tow").html(data);
}
});
}
});
});
The data returned from success ajax is:
<li> <a href="images3.jpg"><img src="images/a4.jpg"/>
<span>
<div class="title"><img src="Images/a5.jpg" /></div>
</span>
</a>
</li>
success: function(jqXHR)
{
$("#tow").html(jqXHR.responseText);
}
jQuery ajax returns a jqXHR object. What you are interested in is its responseText property.