We Keep Coding

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>

Hiding html element clicked after ajax success

I'm new to Web Development and making a mock twitter application. I want the tweet box to be removed after I click on the delete button (only if it is actually deleted in the backend)
I'm using django templating to loop through each tweet:
{% for tweet in data%}
<div class="container border border-primary rounded">
<p> tweet: {{tweet.content}}</p>
<div class="row">
{{tweet.id}}
<p class = "likes" style="margin: 0px 10px;"> likes: {{tweet.likes}} </p>
<button class="btn btn-dark like" style="margin: 0px 10px;">like</button>
<p class = "retweets" style="margin: 0px 10px;" > retweets: {{tweet.retweets}}</p>
<button class = "btn btn-dark retweet" style="margin: 0px 10px;">retweet</button>
<button class="btn btn-dark float-right delete_tweet" onclick="delete_tweet('{{tweet.id}}')">delete</button>
</div>
</div>
{% endfor %}
Here's the delete_tweet function:
function delete_tweet(id){
$(document).ready(function(){
$.ajax({
url: "{% url 'deleteTweet'%}",
data: {'id':id},
dataType: 'json',
success: function(data){
console.log(data);
$(this).parent().parent().remove();
}
});
});
}
This deletes the tweet in the backend fine, but the remove method doesn't work -
I'm pretty sure that I'm this is not referring to the right scope, what should I be doing instead?

Use .closest(".your-element-name").remove();
Your Button
function delete_tweet(id, that){
$(document).ready(function(){
$.ajax({
url: "{% url 'deleteTweet'%}",
data: {'id':id},
dataType: 'json',
success: function(data){
console.log(data);
$(that).closest(".rounded").remove();
}
});
});
}

jquery how remove popover parents on click confirm button?

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

How to use javascript to trigger a modal one after another

I want to use the code below to accomplish the following flow:
validate user's input (form in a modal pop up)
if no error, trigger another modal to show something. The content of the result modal comes from an ajax call.
The problem is the result modal never shows.
Edited: The problem seems in relation to e.preventDefault() as I tested with another version which makes the ajax call in $("#frmSchPkg").submit(function(e).
It works with preventDefefalut and doesn't work if preventDefault() is missing.
Perhaps the question is how to add preventDefault() to this posted javascript.
$.validate({
form: '#frmSchPkg',
onSuccess: function($form) {
var pkgnum12 = $("#pkgnum12").val();
var dataString = 'pkgnum12=' + pkgnum12;
$.ajax({
type: "GET",
url: "admin/sch_pkg_c.php",
data: dataString,
cache: false,
async: false,
success: function(data) {
console.log(data);
alert(data); // able to see data being expected. so the ajax call is successful
$('#text-modal').modal('hide'); // tried to comment this out for testing, 1st modal vanishes anyway at this point
$('#LookupResultModal').find('.ct_schpkgresult').html(data);
$('#LookupResultModal').modal('show');
},
error: function(err) {
console.log(err);
}
});
}
});
<div class="modal fade text-modal" id="text-modal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-sm2">
<div class="modal-content">
<div class="modal-header bg-shop">
<a class="close-modal" href="#" data-dismiss="modal">
<span class="menu-icon"></span>
</a>
<h2 class=""><b>Search</b></h2>
</div>
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSchPkg">
<div class="modal-body">
<div class="form-group">
<div class="col-sm-12">
<input class="form-control" name="pkgnum12" id="pkgnum12" type="text" placeholder="enter tracking number" data-validation="number length" data-validation-length="12-12" />
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<button name="btnfind" id="btnfind" type="submit" class="clsfind btn btn-store btn-block">
<i class="fa fa-search"></i> Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="LookupResultModal" tabindex="-1" role="dialog" aria-labelledby="LookupResultModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header bg-shop">
<a class="close-modal" href="#" data-dismiss="modal">
<span class="menu-icon"></span>
</a>
<h2 class=""><b>Search Result</b></h2>
</div>
<div class="ct_schpkgresult"></div>
</div>
</div>
</div>

The JS script should be like
Ajax method should be inside validation onSuccess: function($form) { }
First modal hide and 2nd modal show should be in side Ajax method success: function(data) { }
$.validate({
form: '#frmSchPkg',
onSuccess: function($form) {
var pkgnum12 = $("#pkgnum12").val();
var dataString = 'pkgnum12=' + pkgnum12;
alert(dataString);
$.ajax({
type: "POST",
url: "admin/sch_pkg_c.php",
data: dataString,
cache: false,
success: function(data) {
console.log(data);
$('#text-modal').modal('hide'); //If all good hide first modal
$('#LookupResultModal').modal('show'); //show 2nd modal
$('#LookupResultModal').find('.ct_schpkgresult').html(data); //show response in 2nd modal
},
error: function(err) {
console.log(err);
}
});
}
});

I found the following solution:
$.validate({
form: '#frmSchPkg',
onSuccess: function(form) {
return $.sendFormDataViaAJAX(form);
}
});
$.sendFormDataViaAJAX = function(form) {
var pkgnum12 = $("#pkgnum12").val();
var dataString = 'pkgnum12=' + pkgnum12;
$.ajax({
type: "GET",
url: "admin/sch_pkg_c.php",
data: dataString,
cache: false,
async: false,
success: function(data) {
console.log(data);
$('#text-modal').modal('hide');
$('#LookupResultModal').find('.ct_schpkgresult').html(data);
$('#LookupResultModal').modal('show');
},
error: function(err) {
console.log(err);
}
});
return false;
};

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: