将值传递给模态窗口函数

时间:2018-05-07 21:45:47

标签: javascript jquery sql modal-dialog

我有一个按钮列表。每个按钮都分配有一个ID(PK),可用于从数据库中删除项目。代码如下。

htp.tableData('<button class = "DELETE" value = '||patch_id||'>DEL</button>');

我希望能够捕获DELETE的原因,所以点击按钮后,我会弹出一个模态窗口,上面写着“请输入删除原因”。

dialog = $( "#dialog-form" ).dialog({
               autoOpen: false,
               height: 400,
               width: 580,
               show: { effect: "blind", duration: 800 },
               modal: true,
               buttons: {
                 "Submit": RunDeleteAjax,

                 Cancel: function() {
                   dialog.dialog( "close" );
                 }
               },
               close: function() {
                 form[ 0 ].reset();
                 allFields.removeClass( "ui-state-error" );
               }
             });

请注意,有一个名为“RunDeleteAjax”的函数。此函数负责调用删除ID的过程的AJAX调用。我有一个问题:我不知道如何获取我点击的按钮的ID。我不确定我是否能以某种方式将其传递给模态窗口,甚至不能传递给被调用的函数。我可以使用以下内容获取我单击的按钮的值:

$(".DELETE").on("click", function() { 
       var _btnVal = $( this ).attr("value")
       dialog.dialog( "open" );
  });

但是从那时起,我怎么能把它传递到模态窗口,或者甚至可能。因为我可以,我可以在“RunDeleteAjax”函数中将它用作参数。

此外,实际的模态表单代码如下:

<div id="dialog-form" class="dform" title="">
        <p class="validateTips">Please provide a detailed description of your changes.</p>

          <form>
            <fieldset>

              <label for="textarea">Reason</label>
              <textarea rows="4" cols ="75" name="EditReason" class="text ui-widget-content ui-corner-all"></textarea>

              <!-- Allow form submission with keyboard without duplicating the dialog button -->
              <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
            </fieldset>
          </form>
        </div>');

非常感谢你的帮助。提前谢谢。

1 个答案:

答案 0 :(得分:0)

经过几次尝试,我找到了解决这个问题的方法。我想发布这个以防万一其他人有类似的问题。我需要利用Jquery的.data方法并将值(我已经捕获)附加到我的“对话框”。

 $("#dialog-form").data("param", _btnVal).dialog( "open" );

现在我将它附加到我的'Dialog',我可以使用该值。我能够获取值并将其传递给我的RunDeleteAjax函数。我还需要更新'buttons'部分。

buttons: {
                 "Submit": function() {

                   var _gts = $( this ).data("param");
                   RunDeleteAjax(_gts);
                 },

                 Cancel: function() {
                   dialog.dialog( "close" );
                 }
               },

当我浏览答案时,我看到了几种不同的方法。根据我的目的,我上面做的调整最适合我。