how would one create a jquery modal dialog pop confirmation box after submission

Question

hey everyone!

i am currently working a edit and delete pages for a company database.

edit.php

right now i am trying to get php to check that a form has been successfully submitted (it POSTs to itself) and once this check is done then it would render a jquery modal box informing the user that the form has been successfully edited.

delete.php

is this page really necessary? i could quite easily set it up using the dreamweaver procedures but it seems laborious to have to render a new page in order to delete a simple record.

there is a link on the top navigation bar for each record displayed labelled 'delete'. i would ideally like to render another jquery modal box upon clicking this to confirm whether or not the user really wants to delete the record.

if YES is clicked, another message would appear telling the user that the record has been deleted. the user would then be redirected to another page.

if NO is clicked, then the dialog would simply close.

i am struggling to currently write this in code. i was thinking of using the facebox plugin to render the modal boxes but where else can i start digging to find more information on how to build upon the basic functionalities of facebox. i am a novice jquery programmer but quite adept at php/mysql.

thanks for the time everyone. this website is really good!

Answer 1

I would suggest using jQuery UI which has a dialog box implementation. The code on that page has various examples, including ones that would work fine for the edit page

Then to delete a record you could have a jquery dialog box and if the user presses Ok, use the jQuery ajax functions to post the required details to delete.php, which would then carry out the deletion. The jquery side would look something like:

$(function() {
 $("#dialog").dialog({
  bgiframe: true,
  resizable: false,
  height:140,
  modal: true,
  overlay: {
   backgroundColor: '#000',
   opacity: 0.5
  },
  buttons: {
   'Delete this item': function() {
                                    //ajax request here

    $(this).dialog('close');
   },
   Cancel: function() {
    $(this).dialog('close');
   }
  }
 });
});