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

You could do it like this:

• mark the <a> with a class, say ‘cancel’

• set up 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 the URL, you already have it in the href.

However, I recommend that you make this a POST instead of a GET, since a cancel action has side effects and thus doesn’t comply with GET semantics…