jquery - 使用ajax提交时弹出显示模式对话框

Question

我在 Rails 中使用 Zurb-Foundation Reveal Modal。

我想在按下提交按钮时打开一个新的模式对话框并显示确认信息。

使用这样的链接，模式打开没有问题。

<a data-remote="true" data-reveal-id="myModal" data-type="html" href="/foo">Link</a>

但是使用表单并提交时，模式不会出现。

<form accept-charset="UTF-8" action="/foo" data-remote="true" data-type="html" method="get">
<input name="utf8" type="hidden" value="✓"></div>
  <input id="bar" name="bar" type="text" value="bar">
  <input id="my-submit" name="commit" type="submit" value="Submit">
</form>

我已经把 data-reveal-id="myModal" 拿走了，因为如果它存在，提交本身就不起作用。

还有它的 CoffeeScript 。单击 submit 后，show modal 出现在控制台中。

$ ->
 $('#my-submit').on(
    click: ->
      console.log("show modal")
      $('#myModal').trigger('click')

当我将 trigger('click') 替换为 `reveal()' 时，我收到此错误。

Uncaught TypeError: Object [object Object] has no method 'reveal'

我已经关注了 this question 的回答.

如何在模态对话框中显示提交结果？

Answer 1

根据documentation on the Zurb Foundation site ，您需要在对象上有一个名为 data-reveal-id 的数据属性，该属性应在单击时显示模式。

所以你应该尝试这样的事情:

<form accept-charset="UTF-8" action="/foo" data-remote="true" data-type="html" method="get">
<input name="utf8" type="hidden" value="✓"></div>
  <input id="bar" name="bar" type="text" value="bar">
  <input id="my-submit" data-reveal-id="myModal" name="commit" type="submit" value="Submit">
</form>

编辑

我想我误解了你的问题。如果您希望在提交成功后显示该对话框，那么您可能需要使用 jQuery 的 ajax 函数。

您可以在 JavaScript 中尝试类似的操作。

// formId is the id of your form
$('#formId').submit(function (e) {
    var url = $(this).attr('action');

    $.ajax({
        type: 'POST',
        url: url,
        data: $('#formId').serialize(),
        success: function (data) {
            $('#myModal').reveal();
        }
    });
    e.preventDefault();
});

一旦 AJAX 请求完成，就会调用 reveal 函数。如果您需要显示服务器生成的信息，则传递给成功回调函数的 data 参数将包含服务器响应的任何数据。