Javascript 使用jqueryui确认表单提交

我试图确认使用RubyonRails创建的提交表单，但在提交之前，我有一个条件，即打开一个确认弹出窗口，询问用户是否真的想这样做。这将使用默认的“确认浏览器”框。但是现在我尝试用Jquery UI来实现它，但它不起作用。如何使用jqueryui返回true或false

如果用户单击“是”，则应提交表单，如果单击“否”，则应关闭表单

这是我的jquery ui函数：

  function confirm(message, callback) {
    $('body').append('<div id="confirm" style="display:none">'+message+'</div>');
    $( "#confirm" ).dialog({
      resizable: false,
      title: 'Confirm',
      zIndex: 99999999,
      modal: true,
      buttons: [
        {
          text: "Yes",
          click: function() {
            $(this).dialog("close");
            if ($.isFunction(callback)) {
              callback.apply();
            }

          }
        },{
          text: "No",
          click: function() { $(this).dialog("close");}
        }
      ],
      close: function(event, ui) {
        $('#confirm').remove();
      }
    });
  }

     $('form').submit(function(){

          <% @meetings.each do |mt| %>

       ...

          <%# cvalue_starthour.value %>

          $meeting_dates = [];

     ...

          $.each($meeting_dates, function (index, value) {
            $.each($test, function (index2, value2) {
);

              if (value.priority == "<%= l(:default_priority_trivial) %>" || "<%= l(:default_priority_minor) %>" || "<%= l(:default_priority_major) %>") {

                if ((value.date == value2.date) && (value.time == value2.time)) {
                  message = confirm("Are you sure?");


                }
              }
            });
          });


          <%      end %>


          <%  end %>

          if (message) {
            return true;
          } else {
            return false;
          }
        });


      });

函数确认（消息、回调）{
$（'body'）。追加（''+消息+''）；
$（“#确认”）。对话框({
可调整大小：false，
标题：“确认”，
zIndex:9999999，
莫代尔：是的，
按钮：[
{
文本：“是”，
单击：函数（）{
$（此）.dialog（“关闭”）；
if（$.isFunction（回调））{
callback.apply（）；
}
}
},{
文本：“否”，
单击：function（）{$（this）.dialog（“close”）；}
}
],
关闭：功能（事件、用户界面）{
$（“#确认”）.remove（）；
}
});
}

和我的提交功能：

  function confirm(message, callback) {
    $('body').append('<div id="confirm" style="display:none">'+message+'</div>');
    $( "#confirm" ).dialog({
      resizable: false,
      title: 'Confirm',
      zIndex: 99999999,
      modal: true,
      buttons: [
        {
          text: "Yes",
          click: function() {
            $(this).dialog("close");
            if ($.isFunction(callback)) {
              callback.apply();
            }

          }
        },{
          text: "No",
          click: function() { $(this).dialog("close");}
        }
      ],
      close: function(event, ui) {
        $('#confirm').remove();
      }
    });
  }

     $('form').submit(function(){

          <% @meetings.each do |mt| %>

       ...

          <%# cvalue_starthour.value %>

          $meeting_dates = [];

     ...

          $.each($meeting_dates, function (index, value) {
            $.each($test, function (index2, value2) {
);

              if (value.priority == "<%= l(:default_priority_trivial) %>" || "<%= l(:default_priority_minor) %>" || "<%= l(:default_priority_major) %>") {

                if ((value.date == value2.date) && (value.time == value2.time)) {
                  message = confirm("Are you sure?");


                }
              }
            });
          });


          <%      end %>


          <%  end %>

          if (message) {
            return true;
          } else {
            return false;
          }
        });


      });

$（'form'）。提交（函数（）{
...
$会议日期=[]；
...
$。每个（$会议日期、功能（索引、值）{
$。每个（$test，function（index2，value2）{
);
如果（value.priority==“”| |“”|“”）{
如果（（value.date==value2.date）&&（value.time==value2.time））{
message=确认（“您确定吗？”）；
}
}
});
});
如果（信息）{
返回true；
}否则{
返回false；
}
});
});

问题在于浏览器处理自己的警报、确认和提示对话框与自行生成的对话框的方式不同。您需要添加一个try/catch类型的场景

为了解决这个问题，我创建了以下内容：

这将使用

$.Deferred

和

$when（）

在返回结果或执行任何回调之前等待用户进行选择

对于您的应用程序，这可能如下所示：

工作示例：

HTML

<form id="myForm">
  Submit Form:
  <button type="submit">Go</button>
</form>

提交表格：
去

jQuery

function ui_confirm(message, callback) {
  var dfd = $.Deferred();
  var dialog = $("<div>", {
      id: "confirm"
    })
    .html(message)
    .appendTo($("body"))
    .data("selection", false)
    .dialog({
      autoOpen: false,
      resizable: false,
      title: 'Confirm',
      zIndex: 99999999,
      modal: true,
      buttons: [{
        text: "Yes",
        click: function() {
          $(this).dialog("close");
          dfd.resolve(true);
          if ($.isFunction(callback)) {
            callback.apply();
          }
        }
      }, {
        text: "No",
        click: function() {
          $(this).dialog("close");
          dfd.resolve(false);
        }
      }],
      close: function(event, ui) {
        $('#confirm').remove();
      }
    });
  dialog.dialog("open");
  return dfd.promise();
}
$(function() {
  $('#myForm').submit(function(e) {
    e.preventDefault();

    // your code

    $.when(ui_confirm("Are you sure?")).done(function(val) {
      if (val) {
        console.log("Submit the form.");
        $('#myForm')[0].submit();
      } else {
        console.log("Do not submit the form.");
      }
    });
  });
});

函数ui\u确认（消息、回调）{
var dfd=$.Deferred（）；
变量对话框=$（“”{
id:“确认”
})
.html（信息）
.appendTo（$（“正文”））
.数据（“选择”，错误）
.对话({
自动打开：错误，
可调整大小：false，
标题：“确认”，
zIndex:9999999，
莫代尔：是的，
按钮：[{
文本：“是”，
单击：函数（）{
$（此）.dialog（“关闭”）；
dfd.resolve（正确）；
if（$.isFunction（回调））{
callback.apply（）；
}
}
}, {
文本：“否”，
单击：函数（）{
$（此）.dialog（“关闭”）；
dfd.resolve（错误）；
}
}],
关闭：功能（事件、用户界面）{
$（“#确认”）.remove（）；
}
});
dialog.dialog（“打开”）；
返回dfd.promise（）；
}
$（函数（）{
$（'#myForm'）。提交（函数（e）{
e、 预防默认值（）；
//你的代码
$.when（ui_确认（“您确定吗？”）.done（函数（val）{
if（val）{
console.log（“提交表单”）；
$（'#myForm'）[0]。提交（）；
}否则{
日志（“不要提交表格”）；
}
});
});
});

问题在于浏览器处理自己的警报、确认和提示对话框与自行生成的对话框的方式不同。您需要添加一个try/catch类型的场景

为了解决这个问题，我创建了以下内容：

这将使用

$.Deferred

和

$when（）

在返回结果或执行任何回调之前等待用户进行选择

对于您的应用程序，这可能如下所示：

工作示例：

HTML

<form id="myForm">
  Submit Form:
  <button type="submit">Go</button>
</form>

提交表格：
去

jQuery

function ui_confirm(message, callback) {
  var dfd = $.Deferred();
  var dialog = $("<div>", {
      id: "confirm"
    })
    .html(message)
    .appendTo($("body"))
    .data("selection", false)
    .dialog({
      autoOpen: false,
      resizable: false,
      title: 'Confirm',
      zIndex: 99999999,
      modal: true,
      buttons: [{
        text: "Yes",
        click: function() {
          $(this).dialog("close");
          dfd.resolve(true);
          if ($.isFunction(callback)) {
            callback.apply();
          }
        }
      }, {
        text: "No",
        click: function() {
          $(this).dialog("close");
          dfd.resolve(false);
        }
      }],
      close: function(event, ui) {
        $('#confirm').remove();
      }
    });
  dialog.dialog("open");
  return dfd.promise();
}
$(function() {
  $('#myForm').submit(function(e) {
    e.preventDefault();

    // your code

    $.when(ui_confirm("Are you sure?")).done(function(val) {
      if (val) {
        console.log("Submit the form.");
        $('#myForm')[0].submit();
      } else {
        console.log("Do not submit the form.");
      }
    });
  });
});

函数ui\u确认（消息、回调）{
var dfd=$.Deferred（）；
变量对话框=$（“”{
id:“确认”
})
.html（信息）
.appendTo（$（“正文”））
.数据（“选择”，错误）
.对话({
自动打开：错误，
可调整大小：false，
标题：“确认”，
zIndex:9999999，
莫代尔：是的，
按钮：[{
文本：“是”，
单击：函数（）{
$（此）.dialog（“关闭”）；
dfd.resolve（正确）；
if（$.isFunction（回调））{
callback.apply（）；
}
}
}, {
文本：“否”，
单击：函数（）{
$（此）.dialog（“关闭”）；
dfd.resolve（错误）；
}
}],
关闭：功能（事件、用户界面）{
$（“#确认”）.remove（）；
}
});
dialog.dialog（“打开”）；
返回dfd.promise（）；
}
$（函数（）{
$（'#myForm'）。提交（函数（e）{
e、 预防默认值（）；
//你的代码
$.when（ui_确认（“您确定吗？”）.done（函数（val）{
if（val）{
console.log（“提交表单”）；
$（'#myForm'）[0]。提交（）；
}否则{
日志（“不要提交表格”）；
}
});
});
});

函数不会返回任何内容<代码>消息为

空

或为空。函数不返回任何内容<代码>消息为

空

或在任何情况下为空。有了该代码，当我单击提交时，该功能不会停止，它会提交，然后出现确认表单。因为我是用rails ajax提交的，但在提交之前，我是在js@terrorista这里有些东西不符合逻辑。因为代码已经执行并发送到浏览器，所以它正在客户端执行。因此，

e.preventDefault（）

应该阻止浏览器向服务器提交数据，直到表单元素再次以编程方式提交