How to delete from MySQL database using PHP within a Javascript - javascript

I am trying to have the following script run when a button is pressed within a php page. The script is supposed to delete a row from a MySQL database table.
I have read from other previous questions that you cannot utilize a php within a javascript within a php page as the php runs along with the page load. Now as it currently sits, the data is indeed deleted, but that is when the page loads.
What is the proper way of having the following query run when a button is pressed in a php page? (FYI, I am using sweetalert)
<script>
function alertdelete() {
{
swal({
title: "Are you sure?",
text: "This delete is permanent!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete == true) {
<?php
mysqli_query($db, "DELETE FROM employee WHERE EMPNO='$id'");
?>
swal("The employee has been deleted!", {
icon: "success",
});
} else {
swal("Ok, the employee will not be deleted!");
return;
}
<?php
openPage("employees.php",3000);
?>
});
}
}
</script>

use a ajax to send request to a php file which has a function to delete
the image
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "deletePage.php", true);
xhttp.send();
If you don't want to use xmlHttpRequest method you can use
fetch api
fetch('url',{method: "POST",body="param=val"}).then((res)=>{//do something with response})
learn about fetch
"DONT FORGET TO CHECK FOR A POST REQUEST WHEN CREATING DELETING FUNCTION IF YOU ACCIDENTLY VISIT THE PAGE IT WILL DELETE"

I would create a deleteRow.php page with your query in it. Make sure to use proper validation before your actually send your query.
Use AJAX in your js file to trigger the delteRow.php page.
Here is a link for the AJAX:
http://api.jquery.com/jquery.ajax/

Use ajax ( better way to do is using JQuery rather than plain javascript ) like below:
<script>
function alertdelete() {
{
swal({
title: "Are you sure?",
text: "This delete is permanent!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete == true) {
var sendArray = {"id": YOUR_ROW_ID};
$.post("db_action.php", sendArray, function() {
swal("The employee has been deleted!", {
icon: "success",
});
});
} else {
swal("Ok, the employee will not be deleted!");
return;
}
});
}
}
</script>
And for the file db_action.php you can have code below:
<?php
mysqli_query($db, "DELETE FROM employee WHERE EMPNO='$_POST[id]'");
?>

Related

how do I add a page link in the ok button of Swal in Angular?

This is my html file
<button (click)="pay()">Add to Cart</button>
This is my ts file
pay(){
Swal.fire(
`Congratulations!!🤩`,
`<h3>The item has been added to the cart!!<h3>`,
'success');
}
So, when I click on the OK(which in here is success), I want user to redirect to the Cart Page of the site. How do I add a link?
Just make use of JavaScript promises. Put the then method after swal function. We do not need to use timer features. For example:
swal({
title: 'Request Delivered',
text: 'You can continue with your search.',
type: 'success'
}).then(function() {
window.location = "redirectURL";
})
Thank you
pay(){
Swal.fire(
`Congratulations!!🤩`,
`<h3>The item has been added to the cart!!<h3>`,
'success').then(() => {
this.router.navigate(['/yourCartPage']);
})
}

how to call jquery pnotify only once during web form

Hello i am trying to call pnotify in my asp.net web form. It is running properly but when i refresh my page it show me that same notify again...
So anyone can please help me from this issue and here is my code:
function successMessage() {
new PNotify({
title: "Success",
text: "Login Successfully",
width: "100%",
timeout:'100',
cornerclass: "no-border-radius",
addclass: "stack-custom-top bg-primary",
type: 'success',
});
}
You can add loggedIn boolean variable to cooike with false value and then check this variable's value when page is loading. On page loading you must check this value, if it is false then you must call successMessage() and set this variable's value to true else doesn't call the function:
var checkLoggedIn = function(){
var loggedIn = getCooike("loggedIn");
if(!loggedIn){
successMessage();
setCooike("loggedIn", true);
}
}
function successMessage() {
new PNotify({
title: "Success",
text: "Login Successfully",
width: "100%",
timeout:'100',
cornerclass: "no-border-radius",
addclass: "stack-custom-top bg-primary",
type: 'success'
});
}
window.onload = checkLoggedIn;
I wrote getCooike and setCooike methods in my code. You can implement this methods using this article

explicitly release sweetalert popup after ajax call

I'm using sweetalert to ask user for an input to rename a tag. And then I make an ajax call to change the tag on server. If succeeded, I call a small callback function(postAction) which will update the UI and renamed the tag on UI. It works fine as long as little call back function has a statement "swal("done!");", so user clicks on this little confirmation message box, and sweetalert message box is released. I'm trying to see if there is a function I can call to release the input sweetalert pop up without the additional "swal("done")" statement, so user will have 1 less click. Is there an easy way to do this?
All I can find now is to add a timer in the second pop up. swal("Done!", {timer: 500}); It's OK but not ideal.
renameTag = function(tagId)
{
swal({
title: "Rename Gallery Tag",
text: 'Please provide a new tag name',
content: "input",
button: {
text: "OK",
closeModal: false,
},
})
.then(name => {
var tagName = name.trim();
if (tagName.length == 0)
{
swal({
title: "Rename Gallery Tag Failed",
text: "Tag name cannot be empty",
icon: "error",
button: "OK",
});
return;
}
else
{
ajaxAction("POST"
, "/User/RenameGalleryTag"
, { 'index': tagId, 'name': tagName }
, "rename gallery tag"
, {
'reload': false
, postAction: function () {
$(".selected-tag").text(tagName);
swal("done!");
}
});
}
})
}
You should be able to close it like this
swal.close()

how to close sweet alert on ajax request completion

I am using Sweet-alert in my angular app.
function GetDataFromServer(url) {
SweetAlert.swal(
{
title: "",
text: "Please wait.",
imageUrl: "../../app/app-img/loading_spinner.gif",
showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
function success(response) {
//SweetAlert.swal(
// {
// title: "",
// text: "data loaded",
// });
return response.data;
}
function exception(ex) {
return (ex);
}
}
Req #1 (Main Objective of my this post)
What I am looking for is when the ajax request completes i.e.,
controls enters in the then(), Sweet alert should automatically hide.
Req #2
Also while request processing, I don't want to have the Close pop-up button (Ok button) in the sweet alert.
As per the documentation,showConfirmButton: false should hide it but it's not.
Any help/suggestion highly appreciated.
Thanks.
For automatically hiding the pop-over when it's done, you should set your initial pop-over to a variable so you can access it later. Maybe:
function GetDataFromServer(url) {
SweetAlert.swal({
title: "",
text: "Please wait.",
imageUrl: "../../app/app-img/loading_spinner.gif",
showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
function success(response) {
swal.close()
return response.data;
}
function exception(ex) {
return (ex);
}
}
It's right on: https://t4t5.github.io/sweetalert/ in the methods section near the bottom.
Since you don't have a specific 'way' you want to do hide the ok button and you're just looking for suggestions, you could always just use a little CSS to target it and give it the ol display: none; setup.
You can close current showing sweetalert by using below line of code anywhere you want.
swal.close();
That's it!
You can use the close method over the sweet object see the documentation in down part
https://t4t5.github.io/sweetalert/
swal.close(); --> Close the currently open SweetAlert programmatically.
self.showProgress = function(message) {
swal({ title: message });
swal.showLoading();
};
self.hideProgress = function() {
swal.close();
};
SweetAlert has close method if you check the docs at http://t4t5.github.io/sweetalert/
You can use SweetAlert.close() to close the sweetalert in angular.
If you use swal2 you can close it using Swal.close() from anywhere inside your code for closing it when ajax is complete I think the code below is an easy way:
$(document).ajaxComplete(function () {
Swal.close();
});
swal does not work with sync function (ex. get), you need make call get async
swal({
type: 'warning',
text: 'Please wait.',
showCancelButton: false,
confirmButtonText: "ok",
allowOutsideClick: false,
allowEscapeKey: false
}).then(function (result) {
if (result) {
setTimeout(function () {
$http.get(url)
}, 500);
}
});
if you are using the AngularJS library known as angular-sweetalert then use swal.close(); to close the alert window.
angular-sweetalert is a wrapper on the core sweetalert library package.
Cache the swal() to trigger it later.
function GetDataFromServer(url) {
let swalAlert = SweetAlert.swal; // cache your swal
swalAlert({
title: "",
text: "Please wait.",
imageUrl: "../../app/app-img/loading_spinner.gif",
showConfirmButton: false
});
return $http.get(url)
.then(success)
.catch(exception);
function success(response) {
swalAlert.close(); // this is what actually allows the close() to work
return response.data;
}
function exception(ex) {
return (ex);
}
}

record being deleted without confirmation?

I am using bootbox dialogs for confirming before deleting records.
here is my jQuery script for confirmation before deleting record.
<a class="btn btn-xs btn-danger" id="deleteContent" title="Delete">delete</a>
$('#deletec').click(function (e) {
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
}
}
}
});
});
it is showing correct dialog but the record being deleted without taking confirmation, can anyone please tell me how can i prevent deletion of record without confirmation ? Thanks in advance.
You can not do what you want because the modal dialog that you are using has no way of pausing the click action. You would need to have to cancel the click action and than make that call.
One way is just to unbind click and call it again
$('#deleteContent').on("click", function (e) {
e.preventDefault();
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
$('#deleteContent').off("click")[0].click();
}
}
}
});
});
As I said in my comments above, making a delete request with a get is a BAD idea. If a user has a plugin that prefetches pages, say goodbye to all your data in the database.
What happens in the code
e.preventDefault(); Cancels the click event so it will not go to the server
$('#deleteContent').off("click") //removes the click event so it will not be called again
[0].click() //selects the DOM element and calls the click event to trigger the navigation

Categories