We Keep Coding

How to delete from MySQL database using PHP within a 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]'");
?>

Ext.Defer gives getAsynchronousLoad Error

I've just defined a combobox. Firstly it loads a countrylist and when select a value it's fire a change event which doing a ajax query to DB within searching service;
The thing; this configuration works pretty well when I click and open combobox items. But when I'm typing to combobox's field it's fires listener's store.load and because of none of country selected yet, the search query url gives not found errors of course.
{
xtype: 'countrycombo',
itemId: 'countryName',
name:'country',
afterLabelTextTpl: MyApp.Globals.required,
allowBlank: false,
flex: 1,
// forceSelection: false,
// typeAhead: true,
// typeAheadDelay: 50,
store: {
proxy: {
type: 'ajax',
// isSynchronous: true,
url: MyApp.Globals.getUrl() + '/country/list?limit=250',
// timeout: 300000,
reader: {
type: 'json',
rootProperty: 'data'
}
},
pageSize: 0,
sorters: 'description',
autoLoad: true
}
,
listeners: {
change: function (combo, countryId) {
var cityStore = Ext.getStore('cityCombo');
cityStore.getProxy()
.setUrl(MyAppp.Globals.getUrl() + '/city/view/search?query=countryid:'+ countryId);
// Ext.defer(cityStore.load, 100);
cityStore.load();
}
}
},
I've tried several things as you see in code above to set a delay/timeout for load during typing to combobox text field; Ext.defer, timeoutconfig on proxy, typeAhead config on combo but none of them worked!
I thought that Ext.defer is the best solution but it gives this error:
Uncaught TypeError: me.getAsynchronousLoad is not a function at load (ProxyStore.js?_dc=15169)
How can I set a delay/timeout to combobox to fires load function?

Instead of Ext.defer(cityStore.load, 100);
try using this :
Ext.defer(function(){
cityStore.load
}, 300);
If this doest work, try increasing your delay
or you can put a logic before loading
like this :
if(countryId.length == 5){
cityStore.load
}
This will ensure that you Entered the right values before loading
Hope this helps, and Goodluck on your project

well.. I've tried to implement #Leroy's advice but somehow Ext.defer did not fire cityStore.load. So I keep examine similar situations on google and found Ext.util.DelayedTask
So configured the listerens's change to this and it's works pretty well;
listeners: {
change: function (combo, countryId) {
var alert = new Ext.util.DelayedTask(function () {
Ext.Msg.alert('Info!', 'Please select a country');
});
var cityStore = Ext.getStore('cityCombo');
cityStore.getProxy().setUrl(MyApp.Globals.getUrl() + '/city/view/search?query=countryid:'+ countryId);
if (typeof countryId === 'number') {
cityStore.load();
} else {
alert.delay(8000);
}
}
}

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

React-notification-system - trigger notification on JSON input

Using react-notification-system, I am attempting to create a pop-up notification each time a JSON array is returned from the backend. For the sake of showing the issue I've manually added the array and parsed it in the below code.
As it appears I wish to trigger the event if the "type" of the alerts array is either "WARNING" or "ERROR", and furthermore print the message that comes along with it in the "message" part.
I'm pretty sure the issue I have is with the state and props. Right now, running this code, I am getting Uncaught TypeError: Cannot read property 'type' of undefined - Which leads me to the question, how do I access the information inside the array in React properly, and trigger it in the return function on the conditions?
Sample code:
var NotificationSystem = React.createClass({
_notificationSystem: null,
_addNotification: function(event) {
event.preventDefault();
this._notificationSystem.addNotification({
message: 'Danger!',
level: 'error',
position: 'tc'
});
},
componentDidMount: function() {
this._notificationSystem = this.refs.notificationSystem;
},
render: function() {
var mdata = {"alerts":[
{
"dateTime": 111111111,
"message": "This is a super serious warning",
"type": "WARNING"
}
]};
var mdataArr = Object.values(mdata);
console.log(JSON.stringify(mdataArr)); // It prints the JSON in console
if (this.props.mdataArr.type == "WARNING")
this._notificationSystem.addNotification({
message: this.props.mdataArr.message,
level: 'warning',
position: 'tc'
});
else if (this.props.mdataArr.type == "ERROR")
this._notificationSystem.addNotification({
message: this.props.mdataArr.message,
level: 'error',
position: 'tc'
});
return (
<div>
<NotificationSystem ref="notificationSystem" />
</div>
);
}
});

Actually you defined mdataArr in render() method itself, but you are looking for same in this.props
Try this in render method
if (mdataArr[0].type == "WARNING")
this._notificationSystem.addNotification({
message: mdataArr[0].message,
level: 'warning',
position: 'tc'
});
else if (mdataArr[0].type == "ERROR")
this._notificationSystem.addNotification({
message: mdataArr[0].message,
level: 'error',
position: 'tc'
});