将数据传递给 jQuery UI 对话框

小开

最佳答案

你可以这样做:

用一个类标记 <a>，说“取消”

设置对话框的方法是对 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...

小开

就 jQuery 而言，我的理解是，您可以像现在这样将函数链接起来，内部函数可以访问外部函数中的变量。ShowDialog (x)函数也包含这些其他函数，您可以在其中重用 x 变量，并将其作为对外部函数中的参数的引用。

我同意 mausch 的观点，您应该考虑使用 POST 来执行这些操作，它将在每个元素周围添加一个 <form>标记，但是使得自动化脚本或工具触发 Cancel 事件的可能性大大降低。Change 操作可以保持原样，因为它(可能只是打开了一个编辑表单)。

小开

我现在已经尝试了你的建议，并发现它有点工作,

对话框 div 总是以明文形式写出
用美元。发布版本它实际上工作在控制器调用和实际取消预订，但对话框保持打开和页面不刷新。使用 get 版本的 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" })%>

小开

好的，div 标签的第一个问题很简单: 我只是添加了一个 style="display:none;"，然后在显示对话框之前，我在我的对话框脚本中添加了这个:

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

但是对于后期的版本，我还是不太走运。

小开

查看代码时，您需要做的是添加关闭窗口和更新页面的功能。在你的“ Yes”函数中，你应该写:

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

删除表格行的代码编写起来并不有趣，所以我将让您处理细节，但是基本上，您需要告诉对话框在您发布它之后要做什么。这可能是一个聪明的对话，但它需要某种方向。

小开

只要给你一些想法可能会帮助你，如果你想完全控制对话框，你可以尝试避免使用默认按钮选项，并添加按钮自己在你的 # 对话框 div。您还可以将数据放入链接的一些虚拟属性中，如 Click。需要时调用 attr (“ data”)。

小开

经过几个小时的 try/catch 之后，我终于找到了这个工作示例，它在 AJAX POST 上使用新行的工作动态地附加到 TABLE (这是我真正的问题) :

这个魔法来自于这个链接:

<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 对话框的最终版本:

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

小开

JQuery 提供了一种为您存储数据的方法，不需要使用虚拟属性或找到解决问题的方法。

绑定 click 事件:

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

小开

我采用的一个由 Boris Guery 启发的解决方案如下: 链接:

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


}
})
}
}
});

小开

这对我有用:

<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')); } }
});
}

当您点击对话框警报中的“ Sposta”时，显示100

小开

希望这能帮上忙

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