How to pass item to jQuery UI dialog box?

Question

goal

I have a webpage with a table of elements. Each item has a delete button next to it. When this button is pressed, I want

• Ask user to confirm
• Delete the corresponding item from the database
• Remove this line from the list.

Current solution

Now I am doing something like this:

$('button.delete').click(function(){ thisRow = $(this).parent(); itemID = $(this).parent().attr('id'); if (confirm('Are you sure?')){ $.post('/manage_items.php', {"action":"delete", "itemid":itemID}, function(){ thisRow.hide("slow").remove(); }); } } 

This solution works because each button.delete can determine which line and element it belongs to and act accordingly.

Desired Solution

Instead of the clumsy OK or Cancel window, I would like to use the jQuery UI dialog box. But I'm not sure how to tell the dialog which line and element it should process each time it is clicked.

Here's how you set it up:

1) Define the div dialog

 <div class="dialogbox" id="confirmdeleteitem" title="Really DELETE this item?"> <p>Gee golly, are you sss-sure you want to do that?!</p> </div> 

2) Customize the behavior of the dialog box

 $('#cofirmdeleteitem').dialog({ //other options - not relevant here buttons: { "Nevermind": function() { //do nothing }, "Alright! Woo!": function(){ //do something } } }); 

3) Define a click event that will open a dialog

 $('button.delete').click(function(){ $('#confirmdeleteitem').dialog('open'); }); 

At this last stage, I would like to pass some information in the dialog box - for example, the delete button was pressed. But I do not see a way to do this.

I could insert a hidden dialog div.dialog into each line of the element up or insert it into a specific line after clicking on the button. Then the links $(this).parent() would capture the correct line ...

Is there an easier way to do this?

Answer 1

I am doing something like this:

  function ConfirmationDialog(title, question, options) { var d = $('<div title="' + title + '"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>' + question + '</p></div>'); d.dialog({ bgiframe: true, resizable: false, height: 190, width: 350, modal: true, overlay: { backgroundColor: '#000', opacity: 0.5 }, buttons: options }); } 

and then call my function from the click event.

Answer 2

As a result, it turned out to be very simple to configure the behavior of the dialog inside the click function itself. In fact, this is not much different from my original example.

 $('button.delete').click(function(){ thisRow = $(this).parent().parent(); thisRow.css("background-color","red"); skuid = $(this).parent().parent('tr').attr('id').substr(5); $('#dialogbox').dialog({ autoOpen: false, modal: true, draggable: true, width: 600, buttons: { "Actually, I can just mark it inactive": function() { thisRow.css("background-color","inherit"); $(this).dialog("close"); }, "This SKU needs to be deleted": function() { $.post('/intranet/backstage/modify_sku_info.php', {"action":"delete", "skuid":skuid}, function(result){ thisRow.hide("slow").remove(); }); $(this).dialog("close"); } } }); $('#dialogbox').dialog('open'); return false; }); 

Since div#dialogbox does not hide until calling $('#dialogbox').dialog() , I just gave it a built-in display:none style.

If I need something that can be generalized, as suggested by hyun , I will consider the problem again.

Answer 3

You can save the string in a global variable, for example:

 var deletingId; $('button.delete').click(function() { deletingId = $(this).parent().attr('id'); $('#confirmdeleteitem').dialog('open'); }); $('#confirmdeleteitem').dialog({ //other options - not relevant here buttons: { "Never mind": function() { }, "Alright! Woo!": function(){ $.post( '/manage_items.php', { action: "delete", itemid: deletingId }, function() { $('#' + deletingId).hide("slow").remove(); } ); } } }); 

This will only work if the dialogue is modal; otherwise, the user might click two different delete links, and you will need a few dialogs.

Answer 4

Why can't you just call the installation method to create a dialog of your choice?

 setupMyDialog( '#confirmdeleteitem', info1, info2 ); $('#confirmdeleteitem').dialog... 

Alternatively, just save the information in a global space before displaying the dialog. Remember that your javascript variables can have global scope or store information about objects / functions (which are only objects) arbitrarily.

 myDataStore = {}; myDataStore.row = foo; myDataStore.col = bar; 

Answer 5

Instead, you can add the "rel" attribute in the dialog box and save it there. This way, you don’t have to worry about global variables, and this is semantically not too bad, because you define the relationship between the dialog and the string. This way it will just be $ ('# confirmdeleteitem'). Attr ('rel', $ (this) .parent (). Attr ('id'). Dialog ('open');