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();
});
})
Related
I new to learn PHP,HTML,CSS and JAVASCRIPT, and battle with this code. I have tried it without and with form, but when click on button,(with form) it is running for 2 seconds and it does not update my new database. With out form nothing is happening.
I know there are problems with my code, learning and fixing them.
<?php include_once 'header.php'?>
<form id="basicForm" action="updateDatabase.php" method="post" enctype="multipart/form-data" name="basicForm">
<div class="wrapper">
<div class="content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-25">
<div class="card">
<div class="card-header">
<h3 class="card-title">Update Database</h3>
</div>
<div class="card-body">
<p>
<button position="relative" class="btn btn-block btn-outline-danger btn-lg c1" id="homeDB">Home DB</button>
<span id="homeupdate"></span>
<span id="loaders1" style="display:none;">
<img alt="" src="dist/img/loader11.gif">
</span>
</p>
<p>
<button position="relative" class="btn btn-block btn-outline-success btn-lg c1" id="workdb">Work DB</button>
<span id="workupdate"></span>
<span id="loaders2" style="display:none;">
<img alt="" src="dist/img/loader11.gif">
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script>
$(document).ready(function(){
$('#homeDB').on('click', function() {
$.ajax({
type:'POST',
url:'db.php',
// dataType: 'json',
data:{db:"homeDB"},
beforeSend: function(){
$("#loaders1").show();
},
complete: function(){
$("#loaders1").hide();
},
success:function(data) {
$("#homeupdate").html("Databasis Opgedateer");
},
error: function (error) {
$("#homeupdate").html(error);
}
});
});
$('#workdb').on('click', function() {
$.ajax({
type:'POST',
url:'db.php',
// dataType: 'json',
data:{db:"workdb"},
beforeSend: function(){
$("#loaders2").show();
},
complete: function(){
$("#loaders2").hide();
},
success:function(data) {
$("#workupdate").html("Databasis Opgedateer");
},
error: function (error) {
$("#workupdate").html(error);
}
});
});
</script>
<script>
jQuery(document).ready(function(){
// Basic Form
jQuery("#basicForm").validate({
highlight: function(element) {
jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function(element) {
jQuery(element).closest('.form-group').removeClass('has-error');
}
});
// Error Message In One Container
jQuery("#basicForm2").validate({
errorLabelContainer: jQuery("#basicForm2 div.errorForm")
});
// With Checkboxes and Radio Buttons
jQuery('#genderError').attr('for','gender');
jQuery('#intError').attr('for','int[]');
jQuery("#basicForm3").validate({
highlight: function(element) {
jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function(element) {
jQuery(element).closest('.form-group').removeClass('has-error');
}
});
jQuery("#basicForm4").validate({
highlight: function(element) {
jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function(element) {
jQuery(element).closest('.form-group').removeClass('has-error');
},
ignore: null
});
// Validation with select boxes
jQuery("#flowers, #fruits").select2({
minimumResultsForSearch: -1
});
});
</script>
</body>
</html>
<?php include_once 'footer.php'?>
If you modify the button and assign it a type='button' attribute you should be able to observe (in the console) that each button now fires the ajax request and the form is no longer submitted as per the default behaviour.
$(document).ready(function() {
$('#homeDB').on('click', function() {
console.log(this)
$.ajax({
type: 'POST',
url: 'db.php',
// dataType: 'json',
data: {
db: "homeDB"
},
beforeSend: function() {
$("#loaders1").show();
},
complete: function() {
$("#loaders1").hide();
},
success: function(data) {
$("#homeupdate").html("Databasis Opgedateer");
},
error: function(error) {
$("#homeupdate").html(error);
}
});
});
$('#workdb').on('click', function() {
console.log(this)
$.ajax({
type: 'POST',
url: 'db.php',
// dataType: 'json',
data: {
db: "workdb"
},
beforeSend: function() {
$("#loaders2").show();
},
complete: function() {
$("#loaders2").hide();
},
success: function(data) {
$("#workupdate").html("Databasis Opgedateer");
},
error: function(error) {
$("#workupdate").html(error);
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="basicForm" action="updateDatabase.php" method="post" name="basicForm">
<div class="wrapper">
<div class="content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-25">
<div class="card">
<div class="card-header">
<h3 class="card-title">Update Database</h3>
</div>
<div class="card-body">
<p>
<button type='button' position="relative" class="btn btn-block btn-outline-danger btn-lg c1" id="homeDB">Home DB</button>
<span id="homeupdate"></span>
<span id="loaders1" style="display:none;">
<img alt="" src="dist/img/loader11.gif">
</span>
</p>
<p>
<button type='button' position="relative" class="btn btn-block btn-outline-success btn-lg c1" id="workdb">Work DB</button>
<span id="workupdate"></span>
<span id="loaders2" style="display:none;">
<img alt="" src="dist/img/loader11.gif">
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
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();
With jQuery v3.2, I want to extract and remove "H1" from AJAX data :
$('.version-modal-show').click(function() {
var url = $(this).attr('href');
$.ajax({
url: url,
type: 'GET',
dataType: 'html',
success:function(d) {
console.log(d);
modal.setBody(d);
modal.open();
}
});
return false;
});
console.log(d) return html brut :
<h1>
<i class="fa fa-list" aria-hidden="true"></i>
Centre d'intérêt « TESTb »
</h1>
<p class="text-center">
<a href="/app_dev.php/administration/hobbies" class="btn btn-secondary">
<i class="fa fa-backward" aria-hidden="true"></i>
Retour aux centres d'intérêts
</a>
</p>
I want to remove the h1 from the modal.setBody() but put it in the modal.setTitle()
You can set the .filter()ed content
modal.setTitle($(d).filter('h1').prop('outerHTML'));
modal.setBody($(d).filter('p.text-center').prop('outerHTML'));
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!");
}
});
});
});
I have the following HTML:
<div data-fleet-id="438935" class="col-lg-6 col-md-8 col-sm-12 col-xs-12 list-wrap">
<a data-toggle="confirmation" data-placement="top" class="list-item-link-1" title="" data-original-title="Delete List">
<span class="label label-danger">
<i class="fa fa-times"></i>
</span>
</a>
</h3>
</div>
I include both Bootstrap and Bootstrap Confirmation scripts and then add the following code to enable Bootstrap Confirmation:
$(document).ready(function () {
$('.list-item-link-1').confirmation({
onConfirm: function () {
var list_id = $(this).closest(".list-wrap").attr("data-fleet-id");
$.ajax({
type: "POST",
url: "server/delete_list.php",
data: {
'list_id': list_id
},
cache: false,
success: function (data) {},
error: function () {
alert("AJAX error.");
}
});
},
btnOkLabel: '<i class="icon-ok-sign icon-white"></i>',
btnCancelLabel: '<i class="icon-remove-sign"></i>'
});
});
The problem is that I cannot access the data-fleet-id of the .list-wrap class. The var value is in fact undefined.
This is the console.log($(this)) result: