How to pass PHP variable to jQuery Modal Pop-up Window

Report · May 03, 2016

Hi,

Need some help figuring out how to pass a php variable (which is fetched in a while loop) to a modal window.

There is a list of users on the page (displayed with a while loop), with delete buttons next to each one.

When the admin clicks on the delete button for that specific user, a modal window pops up confirming their action.

I cant seem to find a simple way to pass the id of the user which needs to be deleted to the modal (where the query is carried out, once "Yes confirm deletion" is clicked).

I have deleted the jQuery as the way this is done may change how the modal opens and closes.

Here is the modal:

<div class="modal_title">Are you sure you want to delete this user?</div>

<div class="modal_button_yes">Yes, Delete it</div>

</div>

<div class="delete_btn">Delete User</div>

The variable with the user id is:

$user_id

Any help would be very much appreciated!

Thanks

Report · May 03, 2016

I use an ordinary JavaScript Alert box.

In my use case, I'm deleting a product from the database. When DELETE button is clicked, the alert box pops-up and prompts user to confirm or cancel the action.

<a class="button" style="color:red" onclick="return confirm_alert(this);" href="delete_product.php?PRODID=<?php echo $row_get_products['PRODID']; ?>">DELETE</a>

JavaScript:

//alert on delete

function confirm_alert(node) {

return confirm("You are about to permanently delete a product. Click OK to continue or CANCEL to quit.");

}

</script>

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 03, 2016

I was thinking of doing that, but it's not the most attractive popup box.

In the future I would want to use it for actions which require additional information such as: 'Why are you deleting this' Etc...

Report · May 03, 2016

IMO, a modal window is overkill in a CMS.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 03, 2016

A modal window to delete a record permanently would not be overkill IMO. I use modal for delete confirmation of data records in many cases that require an additional layer of security of record management.

Usual data flow (assuming you're using php/mysqli route of exchanging and processing data) is to create a session variable on the click of the delete button via ajax, which will store the unique id of the record you want to delete while at the same time opening up the modal window - all while preventing a reload of the page. From the modal window you can perform a query of the data you're going to delete by using the unique id stored in the session variable from the click event that occurred. That way you can add an additional layer of confirmation so that instead of simply clicking yes or no, which can be accidentally clicked to delete something you might not of wanted to delete, you can enter some unique data into a confirmation form and then click yes. The confirmation form will then check to see that the record of the unique session id AND the unique data you entered into the confirmation form (be it a user's unique email address, username, phone number, or anything else that can be used to uniquely identify a record you want to delete). Using the method described above you can also create a new record in a joined table or update the existing record to store additional info like the reason someone is deleting a record and tie that info to the original record that was deleted by using the unique id that's stored in the session variable.

Also it's a good idea to actually archive the data in your database instead of deleting it so that archived records can be retrieved if they are accidentally archived. Even if a user or admin "deletes" a record it should actually be archived and retrievable by a super admin and/or root user.

The answer to your original question is to store unique record id in a session variable via ajax call that's triggered by the click event of the initial user delete button.

best,

Shocker

Report · May 03, 2016

This would be a fairly simple procedure. Personally I'm not sure its worth the effort for an admin area but hey we all have different opinions - so there is no right or wrong there.

Let's assume your delete buttons on your page are anchor tags and you have looped through your database of names to create the anchor tags. The dir value below has been inserted via the php loop through and is your record id.

<p><a href="#" class="delete" dir="1">Delete</a></p>

<p><a href="#" class="delete" dir="2">Delete</a></p>

<p><a href="#" class="delete" dir="3">Delete</a></p>

<p><a href="#" class="delete" dir="4">Delete</a></p>

When you click on the anchor tag (which has the class name 'delete') a lightbox opens. You also need to harvest the 'dir' value at the time the lightbox opens - which passes the record value to a hidden input field in the lighbox code.

$(document).ready(function() {

$('.delete').click(function(){

var record_id = $(this).attr('dir');

$('.record_id').val(record_id);

});

</script>

The 'dir' value gets passed to the lightbox in a hidden form field:

You have a delete button in the lightbox with the class of 'delete_record":

<p class="delete_record">Delete Record</p>

When the delete button in the lightbox is clicked the hidden form field value is harvested and passed to your delete_record.php page via the jquery/ajax script below, also housed on the same page.

$(document).ready(function() {

$('.delete_record').css('cursor','pointer').click(function(){

var record_id = $('.record_id').val();

;

$.ajax({

type: "POST",

url: "delete_record.php",

data: {

record_id: record_id

}

}).done(function() {

alert( "Record was deleted");

});

</script>

Your delete_record.php would look something like below, assuming you are using mysqli or if you are using mysql then you would follow the same delete procedure as normal.

<?php

$conn = new mysqli('localhost' , 'root' , 'root' , 'names');

if($conn->connect_errno) {

echo $conn->connect_error;

die('Sorry, cannot connect at moment, try later');

}

?>

<?php

// delete record

$record_id = $conn->real_escape_string(stripslashes(trim($_POST['record_id'])));

$conn->query("DELETE FROM names WHERE record_id = '$record_id'");

$record_deleted = "true";

?>

An alert box will pop up at the end confirming the record has been deleted. You do not have to deploy an ugly alert box - you can pass data back to the lightbox from the delete_record.php page in some nice fade in <div> if you want to be more subtle about it.

Report · May 03, 2016

Thanks for your reply.

I have added:

alert(record_id);

But it responds with 'undefined'

When I use 'inspect element' in chrome on the delete buttons the IDs (or DIRs) are correct.

Seems like the jquery isnt harvesting the DIR value?

$(document).ready(function(){

$(".delete").click(function(){

$(".modal").show();

var record_id = $(this).attr('dir');

$('.record_id').val(record_id);

alert(record_id);

});

$(".modal_button_no").click(function(){

$(".modal").hide();

});

</script>

Report · May 03, 2016

Should work if you have the dir value set on the a tags.

What html are you using for the delete buttons?

Report · May 03, 2016

I am testing this on a different page to that of the user management one I mentioned previously.

This one is notes linked to certain users.

<span class="note_visibility">Visible to: <?php echo $visible_to; ?></span>

</div>

As stated previously, the DIR values are being displayed, as I have used the inspector in chrome for each instance of the delete button.

Report · May 03, 2016

The code below works, it's exactly the same as yours (its linked to the jquery library) - so if it doesnt for you then investigate if the .js file for your modal window is somehow stopping the code working or maybe the image in the note_delete_button <div> is interfering with it.

<!DOCTYPE html>

<html>

<head>

<title>Untitled Document</title>

$(document).ready(function(){

$(".delete").click(function(){

$(".modal").show();

var record_id = $(this).attr('dir');

$('.record_id').val(record_id);

alert(record_id);

});

$(".modal_button_no").click(function(){

$(".modal").hide();

});

</script>

</head>

<body>

<div class="note_delete_button">Delete Record</div>

</a>

</div>

</body>

</html>

How to pass PHP variable to jQuery Modal Pop-up Window

1 Correct answer