jquery how remove popover parents on click confirm button? - javascript

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

Button not working to get data from one database and add it into new databse

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>

Button does not work while visit another pagination page or being search (ajax, Laravel)

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();

jQuery : extract tag from data

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'));

Selecting element parent with a specific class and removing it [duplicate]

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!");
}
});
});
});

Access data-attributes with .closest().attr() in Bootstrap Confirmation doesn't work

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:

Categories