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"，因为如果存在，则提交本身不起作用。

咖啡脚本吧。 <{1}}在点击show modal时出现在控制台中。

submit

当我将$ -> $('#my-submit').on( click: -> console.log("show modal") $('#myModal').trigger('click')替换为`reveal（）'时，我收到此错误。

未捕获TypeError：对象[object Object]没有方法'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参数将包含服务器响应的任何数据。

Answer 2

而不是reveal()或trigger('click')，我应该使用foundation('reveal', 'open')

$ ->
 $('#my-submit').on(
    click: ->
      $('#myModal').foundation('reveal', 'open')

使用此代码现在可以正常工作。

Answer 3

所有你需要做的就是这个因为zurb基础只需要data-reveal-id属性中的模态ID

input id="my-submit" data-reveal-id="myModal" name="commit" type="submit" value="Submit">

Answer 4

如果你想要一个jQuery的在线解决方案：将以下选项添加到您的显示机制（<a>,<input>,等）。

onClick="$('#'+$(this).attr('data-reveal-id')).foundation('reveal', 'open');"

Answer 5

我刚刚写了一个可重复使用的代码片段，我将在这里分享，以防其他人试图通过使用揭示功能获取表单提交结果。

请注意，我使用了data-form-reveal-id而不是data-reveal-id来避免基础连接表格的点击事件。

$(document).ready(function() {
  $('form[data-form-reveal-id]').submit(function(e) {
    e.preventDefault();
    var $this = $(this);

    var $reveal = $('#' + $this.data('form-reveal-id'));
    $reveal.foundation('reveal', 'open', {
      url: $this.attr('action'),
      method: $this.attr('method') || 'GET',
      data: $this.serialize(),
      success: function(data) {
        alert('modal data loaded');
      },
      error: function() {
        alert('failed loading modal');
      }
    });
  });
});

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

5 个答案: