将数据传递给jQuery UI对话框
我正在开发一个ASP.Net MVC站点，并在其上列出了一些数据库查询中的一些预订，并使用ActionLink来取消特定行的预订，如下所示：
我的预订
<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> 如果我可以使用jQuery对话框popup一条消息，询问用户是否确定要取消预订，那将会更好。 我一直在尝试得到这个工作，但我一直在阻止如何创build一个接受参数的jQuery函数，以便我可以用<a href="/Booking.aspx/Cancel/10">cancel</a>取代<a href="#" onclick="ShowDialog(10)">cancel</a> 。 然后ShowDialog函数将打开对话框，并将参数10传递给对话框，以便如果用户单击是，则会发布href：/Booking.aspx/Change/10
我已经在这样的脚本中创build了jQuery对话框：
$(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" } }); });
和对话本身：
<div id="dialog" title="Cancel booking">Are you sure you want to cancel your booking?</div>
所以最后到我的问题：我怎么能做到这一点？ 还是有更好的方法呢？
你可以这样做：
- 用类标记
<a>，说“取消” -
通过对class =“cancel”的所有元素进行操作来设置对话框：
$('a.cancel').click(function() { var a = this; $('#myDialog').dialog({ buttons: { "Yes": function() { window.location = a.href; } } }); return false; });
（加上你的其他选项）
这里的关键是：
- 使其尽可能不显眼
- 如果你需要的只是url，你已经在href中。
但是，我build议你做这个POST而不是GET，因为取消操作有副作用，因此不符合GET语义 …
jQuery提供了一种为您存储数据的方法，不需要使用虚拟属性或find解决问题的方法。
绑定点击事件：
$('a[href*=/Booking.aspx/Change]').bind('click', function(e) { e.preventDefault(); $("#dialog-confirm") .data('link', this) // The important part .data() method .dialog('open'); });
和你的对话：
$("#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); } } });
就你用jQuery所做的事情而言，我的理解是你可以像你一样链接函数，而内部函数可以访问外部variables。 所以你的ShowDialog（x）函数包含了这些其他的函数，你可以重新使用它们中的xvariables，并将它作为参数从外部函数中引用。
我同意mausch，你真的应该看看使用POST的这些行动，这将添加一个<form>标签围绕每个元素，但使自动化脚本或工具触发Cancel事件的机会less得多的可能性。 更改操作可以保持原样，因为它（大概只是打开一个编辑表单）。
我现在已经尝试了你的build议，发现它还挺有用，
- 对话框div也以纯文本forms写出来
- 使用$ .post版本，实际上它的作用是控制器被调用，实际上取消了预订，但对话框保持打开状态，页面不刷新。 随着获得版本window.location = h.ref工程很好。
下面是我的“新”脚本：
$('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; });
}）;
任何线索？
哦，我的动作链接现在看起来像这样：
<%= Html.ActionLink("Cancel", "Cancel", new { id = v.BookingId }, new { @class = "cancel" })%>
看看你的代码你需要做的是添加function来closures窗口并更新页面。 在你的“是”function你应该写：
buttons: { "Ja": function() { $.post(a.href); $(a). // code to remove the table row $("#dialog").dialog("close"); }, "Nej": function() { $(this).dialog("close"); } },
删除表格行的代码并不好玩，所以我会让你处理一些细节问题，但是基本上，你需要告诉对话框后你应该怎么做。 这可能是一个聪明的对话，但它需要某种方向。
try / catch几个小时后，我终于来到这个工作的例子，其工作在AJAX POST与新行附加到飞行表（这是我真正的问题）：
Tha魔术附带这个链接：
<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>
这是AJAX POST和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>
这为我工作：
<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')); } } }); }
当您在对话警报显示100中点击“Sposta”时
确定第一个div标签的问题很简单：我只是添加了一个style="display:none;" 然后在显示对话框之前，我在对话框脚本中添加了这个对话框：
$("#dialog").css("display", "inherit");
但是对于后期版本，我还是不走运。
只要给你一些想法可以帮助你，如果你想完全控制对话框，你可以尝试避免使用默认的button选项，并在你自己的#dialog div中添加button。 您也可以将数据放入链接的某个虚拟属性，如Click。 在需要时调用attr（“data”）。
Boris Guery所启发的解决scheme如下：链接：
<a href="#" class = "remove {id:15} " id = "mylink1" >This is my clickable link</a>
绑定一个动作：
$('.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; } });
然后访问id字段（在这种情况下，值为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){ } }) } } });
我希望这有帮助
$("#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>
