对于动态表中的每个按钮，Jquery-Ui对话窗体 [英] Jquery-Ui Dialog form for each button in a dynamic table

问题描述

  / 
 
 /表
< table class =table table-reporting table-condensed table-stripedid =tableoperator> 
< tbody> 
 @for（int h = 0; h< Model.ToList（）。Count; h ++）
 {
< tr> 
< td class =隐藏手机隐藏式平板电脑> 
< button class =updateid =@ Model.ElementAt（h）.id>更新< / button> 
< / td> 
< / tr> 
} 
< / tbody> 
< / table> 
 
 //对话框形式
< div id =dialog-formtitle =更新故障单> 
< form> 
< fieldset> 
< label for =state>状态< / label> 
< input type =textname =stateid =stateclass =text ui-widget-content ui-corner-all> 
< label for =note>注意< / label> 
< input type =textname =noteid =noteclass =text ui-widget-content ui-corner-all> 
< input type =submittabindex = -  1style =position：absolute; top：-1000px> 
< / fieldset> 
< / form> 
  

 <脚本> 
 $（function（）{
 var dialog，
 state = $（＃state）。val（），
 note = $（＃note）。val （），
 id =按钮id更新
 dialog = $（＃dialog-form）。dialog（{
 autoOpen：false，
 height：400， 
 width：350，
 modal：true，
按钮：{
Ok：function（）{
 $ .ajax（{
 type： POST，
 url：@ Url.Action（Update，Ticket），
 data：{'id'：id，'state'：state，'note'：note }，
 cache：false，
 dataType：json，
 success：function（data）{
 $（this）.dialog（close）; 
} 
 }）; 
}，
取消：function（）{
 $（this）.dialog（close）; 
}} 
}）; （）; 
 
 $（。update）。button（）。on（click，function（）{
 dialog.dialog（open）; 
}）; 
}）; 
< / script> 
  

但是问题是在TicketController的更新操作中，参数state和node是空的。我能做什么？而我怎样才能设置ID = id的按钮更新？

////////编辑：这是正确的代码（正如@Igor所建议的那样）

 <脚本> 
 $（函数（）{
 var state = $（＃state）。val（），
 note = $（＃note）。val（），
 dialog = $（＃dialog-form）。dialog（{
 autoOpen：false，
 height：400，
 width：350，
 modal：true，
按钮：{
Ok：function（）{
 $ .ajax（{
 type：POST，
 url：@ Url.Action（Update ，票据），
 data：{'id'：$（this）.data（idt），'state'：$（＃note）.val（），'note' ：$（＃note）。val（）}，
 cache：false，
 dataType：json，
 success：function（data）{
 $（this ）.dialog（close）; 
} 
}）; 
}，
取消：function（）{
 $（this）。对话框（ 亲密）; 
}} 
}）; （）; 
 $ b $（。update）。button（）。on（click，function（）{
 dialog.data（idt，this.id）; 
 dialog.dialog（open）; 
}）; 
}）; 
< / script> 
  

解决方案

1.Store id
2> / code>数据属性中的/ code>点击对话框中的点击按钮。 。在确定点击内容中发送值。

 Ok：function（）{
 var id = dialog.data（buttonid）; 
 var state = $（＃state）。val（）; 
 var note = $（＃note）。val（）; $（）$ b $ .ajax（{
 ... 
 
 $（。update）。button（）。on（click，function（）{
 dialog.data（buttonid，this.id）; 
 dialog.dialog（open）; 
}）; 
  




I am generating an HTML table with a button for each row which have to open a Jquery ui dialog form.

//The table
<table class="table table-reporting table-condensed table-striped" id="tableoperator">   
    <tbody>
        @for (int h = 0; h < Model.ToList().Count; h++)
        {
            <tr>                      
                <td class="hidden-phone hidden-tablet">
                    <button class="update" id="@Model.ElementAt(h).id">Update</button>
                </td>
            </tr>
        }
    </tbody>
</table> 

//The dialog form
<div id="dialog-form" title="Update Ticket" >
<form>
    <fieldset>
        <label for="state">State</label>
        <input type="text" name="state" id="state" class="text ui-widget-content ui-corner-all">
        <label for="note">Note</label>
        <input type="text" name="note" id="note" class="text ui-widget-content ui-corner-all">
        <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
</form>

<script>
        $(function () {
            var dialog,
              state = $("#state").val(),
              note = $("#note").val(), 
              id = id of button Update??
              dialog = $("#dialog-form").dialog({
                autoOpen: false,
                height: 400,
                width: 350,
                modal: true,
                buttons: {
                    "Ok": function () {
                        $.ajax({
                            type: "POST",
                            url: "@Url.Action("Update","Ticket")",
                            data: { 'id': id, 'state': state, 'note': note },
                            cache: false,
                            dataType: "json",
                            success: function (data) {
                            $(this).dialog("close");
                                }
                            });
                    },
                     "Cancel": function () {
                         $(this).dialog("close");
                     }}
            });

            $(".update").button().on("click", function () {
                dialog.dialog("open");
            });
        });
    </script>

But the problem is that in the action Update of TicketController the parameters state and node are empty. What can I do? And How can I set id = id of button Update?

//////// Edit: this is the correct code (as suggested by @Igor)

<script>
    $(function () {
        var state = $("#state").val(),
          note = $("#note").val(),
          dialog = $("#dialog-form").dialog({
            autoOpen: false,
            height: 400,
            width: 350,
            modal: true,
            buttons: {
                "Ok": function () {
                    $.ajax({
                        type: "POST",
                        url: "@Url.Action("Update","Ticket")",
                        data: { 'id': $(this).data("idt"), 'state': $("#note").val(), 'note': $("#note").val() },
                        cache: false,
                        dataType: "json",
                        success: function (data) {
                        $(this).dialog("close");
                            }
                        });
                },
                 "Cancel": function () {
                     $(this).dialog("close");
                 }}
        });

        $(".update").button().on("click", function () {
            dialog.data("idt", this.id);
            dialog.dialog("open");
        });
    });
</script>

解决方案

1.Store id of the clicked button in the dialog data property before you open the dialog.

2.Retrieve values to be sent inside the "Ok" click.

  "Ok": function () {
    var id = dialog.data("buttonid");
    var state = $("#state").val();
    var note = $("#note").val(); 
    $.ajax({
      ...

$(".update").button().on("click", function () {
  dialog.data("buttonid", this.id);
  dialog.dialog("open");
});

这篇关于对于动态表中的每个按钮，Jquery-Ui对话窗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！