Jquery-Uiダイナミックテーブル内の各ボタンのダイアログフォーム

Question

Jquery UIダイアログフォームを開く必要がある各行にボタンを含むHTMLテーブルを生成しています。

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

しかし、問題はTicketControllerのアクションを更新してパラメータの状態とノードが空であることです。私に何ができる？そして、私はどのように設定することができますid = idのボタンの更新？

////////編集：dialogデータプロパティでクリックされたボタンの（@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> 

Answer 1

1.Store idあなたが開く前に、ダイアログ。

2.「OK」をクリックすると値が返されます。

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