Passing data to a jQuery UI Dialog

Question

I'm developing an ASP.Net MVC site and on it I list some bookings from a database query in a table with an ActionLink to cancel the booking on a specific row with a certain BookingId like this:

My bookings

<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> 

What would be nice is if I could use the jQuery Dialog to popup a message asking if the user is sure he wants to cancel the booking. I have been trying get this to work but I keep getting stuck on how to create a jQuery function that accepts parameters so that I can replace the

<a href="/Booking.aspx/Cancel/10">cancel</a>

with

<a href="#" onclick="ShowDialog(10)">cancel</a>.

The ShowDialog function would then open the dialog and also pass the paramter 10 to the dialog so that if the user clicks yes then It will post the href: /Booking.aspx/Change/10

I have created the jQuery Dialog in a script like this:

$(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 dialog 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 accomplish this? or is there a better way of doing it?

Answer 1

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

Bind the 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 dialog:

$("#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);         }     } });