Passing Data to the JQuery UI Dialog

Question

I am developing an ASP.Net MVC site and on it I list some orders from a database query in a table using ActionLink to cancel a reservation in a certain row with a specific BookingId as follows:

My orders

<table cellspacing="3"> <thead> <tr style="font-weight: bold;"> <td>Date</td> <td>Time</td> <td>Seats</td> <td></td> <td></td> </tr> </thead> <tr> <td style="width: 120px;">2008-12-27</td> <td style="width: 120px;">13:00 - 14:00</td> <td style="width: 100px;">2</td> <td style="width: 60px;"><a href="/Booking.aspx/Cancel/15">cancel</a></td> <td style="width: 80px;"><a href="/Booking.aspx/Change/15">change</a></td> </tr> <tr> <td style="width: 120px;">2008-12-27</td> <td style="width: 120px;">15:00 - 16:00</td> <td style="width: 100px;">3</td> <td style="width: 60px;"><a href="/Booking.aspx/Cancel/10">cancel</a></td> <td style="width: 80px;"><a href="/Booking.aspx/Change/10">change</a></td> </tr> </table> 

Which would be nice if I could use the jQuery dialog to display a message that the user is sure that he wants to cancel the reservation. I tried to get this to work, but I always went in cycles on how to create a jQuery function that takes parameters so that I can replace <a href="/Booking.aspx/Cancel/10">cancel</a> with <a href="#" onclick="ShowDialog(10)">cancel</a> . Then the ShowDialog function will open the dialog box and also pass parameter 10 to the dialog so that if the user clicks “yes”, he will send href: /Booking.aspx/Change/10

I created a jQuery dialog in a script as follows:

 $(function() { $("#dialog").dialog({ autoOpen: false, buttons: { "Yes": function() { alert("a Post to :/Booking.aspx/Cancel/10 would be so nice here instead of the alert");}, "No": function() {$(this).dialog("close");} }, modal: true, overlay: { opacity: 0.5, background: "black" } }); }); 

and the dialogue itself:

  <div id="dialog" title="Cancel booking">Are you sure you want to cancel your booking?</div> 

So finally, to my question: how can I do this? or is there a better way to do this?

Answer 1

You can do it as follows:

• mark <a> class, say cancel

• customize the dialog by acting on all elements with class = "cancel":

   $('a.cancel').click(function() { var a = this; $('#myDialog').dialog({ buttons: { "Yes": function() { window.location = a.href; } } }); return false; }); 

(plus your other options)

The key points here are:

• make it as unobtrusive as possible
• If all you need is a url, you already have it in href.

However, I recommend that you do POST instead of GET, since the undo action has side effects and therefore does not match the GET semantics ...

Answer 2

jQuery provides a method that stores data for you, no need to use the dummy attribute or find a workaround to your problem.

Bind click event:

 $('a[href*=/Booking.aspx/Change]').bind('click', function(e) { e.preventDefault(); $("#dialog-confirm") .data('link', this) // The important part .data() method .dialog('open'); }); 

And your dialogue:

 $("#dialog-confirm").dialog({ autoOpen: false, resizable: false, height:200, modal: true, buttons: { Cancel: function() { $(this).dialog('close'); }, 'Delete': function() { $(this).dialog('close'); var path = $(this).data('link').href; // Get the stored result $(location).attr('href', path); } } }); 

Answer 3

In terms of what you are doing with jQuery, I understand that you can bind functions like yours and internal have access to variables from external. So your ShowDialog (x) function contains these other functions, you can reuse the variable x inside them, and it will be taken as a parameter reference from an external function.

I agree with mausch, you really should take a look at using POST for these actions, which will add a <form> around each element, but will do everything possible for an automated script or tool that triggers the Cancel event to be much less likely, The change action may remain the same. as well because it (presumably just opens the edit form).

Answer 4

Now I tried my suggestions and found that it works,

• The div dialog box is also written as plain text
• With the $ .post version, it actually works in terms of the fact that the controller is called and actually cancels the reservation, but the dialog remains open and the page does not refresh. With getting the version window.location = h.ref works fine.

Se my "new" script below:

 $('a.cancel').click(function() { var a = this; $("#dialog").dialog({ autoOpen: false, buttons: { "Ja": function() { $.post(a.href); }, "Nej": function() { $(this).dialog("close"); } }, modal: true, overlay: { opacity: 0.5, background: "black" } }); $("#dialog").dialog('open'); return false; }); 

});

Any clues?

oh and my link for Action now looks like this:

 <%= Html.ActionLink("Cancel", "Cancel", new { id = v.BookingId }, new { @class = "cancel" })%> 

Answer 5

Look at your code, what you need to do is add functionality to close the window and refresh the page. In your Yes function, you should write:

  buttons: { "Ja": function() { $.post(a.href); $(a). // code to remove the table row $("#dialog").dialog("close"); }, "Nej": function() { $(this).dialog("close"); } }, 

The code to delete a table row is not fun to write, so I’ll let you figure out the details, but basically you need to tell the dialog what to do after it is posted. It may be an intellectual dialogue, but it needs some direction.

Answer 6

After a FEW HOURS of try / catch, I finally came up with this working example, his work on AJAX POST with new lines is added to TABLE on the fly (this was my real problem):

The magic came with a link:

 <a href="#" onclick="removecompany(this);return false;" id="remove_13">remove</a> <a href="#" onclick="removecompany(this);return false;" id="remove_14">remove</a> <a href="#" onclick="removecompany(this);return false;" id="remove_15">remove</a> 

This is the last work with AJAX POST and JQuery Dialog:

  <script type= "text/javascript">/*<![CDATA[*/ var $k = jQuery.noConflict(); //this is for NO-CONFLICT with scriptaculous function removecompany(link){ companyid = link.id.replace('remove_', ''); $k("#removedialog").dialog({ bgiframe: true, resizable: false, height:140, autoOpen:false, modal: true, overlay: { backgroundColor: '#000', opacity: 0.5 }, buttons: { 'Are you sure ?': function() { $k(this).dialog('close'); alert(companyid); $k.ajax({ type: "post", url: "../ra/removecompany.php", dataType: "json", data: { 'companyid' : companyid }, success: function(data) { //alert(data); if(data.success) { //alert('success'); $k('#companynew'+companyid).remove(); } } }); // End ajax method }, Cancel: function() { $k(this).dialog('close'); } } }); $k("#removedialog").dialog('open'); //return false; } /*]]>*/</script> <div id="removedialog" title="Remove a Company?"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span> This company will be permanently deleted and cannot be recovered. Are you sure?</p> </div> 

Answer 7

This work for me:

<a href="#" onclick="sposta(100)">SPOSTA</a>

 function sposta(id) { $("#sposta").data("id",id).dialog({ autoOpen: true, modal: true, buttons: { "Sposta": function () { alert($(this).data('id')); } } }); } 

When you click "Sposta" in the alert dialog 100

Answer 8

Well, the first problem with the div tag was quite simple: I just added style="display:none;" and then before displaying the dialog, I added this to my script dialog:

 $("#dialog").css("display", "inherit"); 

But for the post version, I'm still out of luck.

Answer 9

Just give you some idea that can help you if you want to completely control the dialog, you can try to avoid using the default button options and add the buttons yourself in your #dialog div. You can also put the data in some dummy attribute of the link, for example Click. call attr ("data") when you need it.

Answer 10

The solution inspired by Boris Gehry that I used looks like this: Link:

 <a href="#" class = "remove {id:15} " id = "mylink1" >This is my clickable link</a> 

associate an action with it:

 $('.remove').live({ click:function(){ var data = $('#'+this.id).metadata(); var id = data.id; var name = data.name; $('#dialog-delete') .data('id', id) .dialog('open'); return false; } }); 

And then to access the id field (in this case with a value of 15:

 $('#dialog-delete').dialog({ autoOpen: false, position:'top', width: 345, resizable: false, draggable: false, modal: true, buttons: { Cancel: function() { $(this).dialog('close'); }, 'Confirm delete': function() { var id = $(this).data('id'); $.ajax({ url:"http://example.com/system_admin/admin/delete/"+id, type:'POST', dataType: "json", data:{is_ajax:1}, success:function(msg){ } }) } } }); 

Answer 11

Hope this helps

 $("#dialog-yesno").dialog({ autoOpen: false, resizable: false, closeOnEscape: false, height:180, width:350, modal: true, show: "blind", open: function() { $(document).unbind('keydown.dialog-overlay'); }, buttons: { "Delete": function() { $(this).dialog("close"); var dir = $(this).data('link').href; var arr=dir.split("-"); delete(arr[1]); }, "Cancel": function() { $(this).dialog("close"); } } }); <a href="product-002371" onclick="$( '#dialog-yesno' ).data('link', this).dialog( 'open' ); return false;">Delete</a>