将数据传递到 jQuery UI 对话框

https://stackoverflow.com/questions/394491

23-08-2019
|

题

我正在开发一个 ASP.Net MVC 网站上，我在一个带有数据库查询的表中列出了一些预订 ActionLink 取消特定行的预订 BookingId 像这样：

我的预订

<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 Dialog 弹出一条消息，询问用户是否确定要取消预订。我一直在尝试让它工作，但我一直卡在如何创建一个接受参数的 jQuery 函数上，以便我可以替换

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

和

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

这 ShowDialog 然后，函数将打开对话框并将参数 10 传递给对话框，以便如果用户单击“是”，那么它将发布 href： /Booking.aspx/Change/10

我在这样的脚本中创建了 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 中找到了它。

但是，我建议您将其设为 POST 而不是 GET，因为取消操作有副作用，因此不符合 GET 语义...

其他提示

jQuery提供其存储你的数据的方法，无需使用虚拟属性或找到解决办法，以您的问题。

绑定单击事件：

$('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做什么方面，我的理解是，你可以像你这样的连锁功能，具有与内部的人有机会获得来自外部的变量。如此，你的ShowDialog（x）函数包含这些其他功能，则可以重新使用该变量x在其中，这将被视为对从外部函数的参数的引用。

我mausch同意，你应该看看使用POST这些动作，这将增加每个元件的周围的<form>标签，但要自动运行的脚本或工具的几率触发取消事件不太可能。更改动作可以保持原样，因为它（大概只是打开的编辑形式）。

我现在尝试了你的建议，发现它有点管用，

对话框 div 始终以明文形式写出
对于 $.post 版本，它实际上是在控制器被调用并实际上取消预订的情况下工作的，但对话框保持打开状态并且页面不会刷新。使用 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" })%>

在你的代码，你需要做的是寻找添加功能关闭该窗口，并更新页面。在你的“是”的功能，你应该写：

        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的工作与新行追加到表上飞（那是我真正的问题）：

临屋魔术带着这个链接：

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

这个工作对我来说：

<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

[确定] div标签的第一个问题是很容易的：我只是增加了一个style="display:none;"给它，然后显示我在对话脚本中添加此对话框之前：

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

但对于后期的版本我还是运气不好。

只要给你一些想法可以帮助你，如果你想完全控制对话框中，可以尽量避免使用的默认按钮选项，并通过自己在你的#dialog DIV添加按钮。你也可以把数据转化为链接的一些虚拟的属性，如点击。调用ATTR（ “数据”），当你需要它。

由我采用看起来像这样鲍里斯伽利湖启发A液：的链接：

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

和然后用15值访问在此情况下的ID字段（：

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

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow