Note that there are some explanatory texts on larger screens.

plurals
  1. POPassing data to a jQuery UI Dialog
    text
    copied!<p>I'm developing an <code>ASP.Net MVC</code> site and on it I list some bookings from a database query in a table with an <code>ActionLink</code> to cancel the booking on a specific row with a certain <code>BookingId</code> like this: </p> <p><strong>My bookings</strong></p> <pre><code>&lt;table cellspacing="3"&gt; &lt;thead&gt; &lt;tr style="font-weight: bold;"&gt; &lt;td&gt;Date&lt;/td&gt; &lt;td&gt;Time&lt;/td&gt; &lt;td&gt;Seats&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tr&gt; &lt;td style="width: 120px;"&gt;2008-12-27&lt;/td&gt; &lt;td style="width: 120px;"&gt;13:00 - 14:00&lt;/td&gt; &lt;td style="width: 100px;"&gt;2&lt;/td&gt; &lt;td style="width: 60px;"&gt;&lt;a href="/Booking.aspx/Cancel/15"&gt;cancel&lt;/a&gt;&lt;/td&gt; &lt;td style="width: 80px;"&gt;&lt;a href="/Booking.aspx/Change/15"&gt;change&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style="width: 120px;"&gt;2008-12-27&lt;/td&gt; &lt;td style="width: 120px;"&gt;15:00 - 16:00&lt;/td&gt; &lt;td style="width: 100px;"&gt;3&lt;/td&gt; &lt;td style="width: 60px;"&gt;&lt;a href="/Booking.aspx/Cancel/10"&gt;cancel&lt;/a&gt;&lt;/td&gt; &lt;td style="width: 80px;"&gt;&lt;a href="/Booking.aspx/Change/10"&gt;change&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>What would be nice is if I could use the <code>jQuery Dialog</code> 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 </p> <p><code>&lt;a href="/Booking.aspx/Cancel/10"&gt;cancel&lt;/a&gt;</code> </p> <p>with </p> <p><code>&lt;a href="#" onclick="ShowDialog(10)"&gt;cancel&lt;/a&gt;</code>. </p> <p>The <code>ShowDialog</code> 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: <code>/Booking.aspx/Change/10</code></p> <p>I have created the jQuery Dialog in a script like this:</p> <pre><code>$(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" } }); }); </code></pre> <p>and the dialog itself:</p> <pre><code> &lt;div id="dialog" title="Cancel booking"&gt;Are you sure you want to cancel your booking?&lt;/div&gt; </code></pre> <p>So finally to my question: How can I accomplish this? or is there a better way of doing it?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload