基金会揭示 AJAX 成功不起作用答案

【问题标题】：Foundation Reveal on AJAX success not working基金会揭示 AJAX 成功不起作用
【发布时间】：2015-10-10 01:42:37
【问题描述】：

试图在基金会论坛上发布此内容，但由于某种原因无法发布。

下面的第一个代码 sn-p 显示了使用 data-abide="ajax" 和 .on('valid.fndtn.abide',function(){}); 的表单的工作代码。元素被禁用等，并且模式打开。当模式关闭时，我会根据需要留在页面上。

我现在正在尝试使用 AJAX，其中请求将发送到处理数据插入的 php 脚本，并且元素操作和模式将在成功时发生。

第二个代码 sn-p 显示了该尝试，但它不起作用。当我运行此代码时，警报会触发，但随后页面提交，没有写入控制台，没有模式，页面刷新。我做错了什么？

我还包含了部分代码（第三个 sn-p），用于表单和模式。

如果有人有一个使用 Foundation、data-abide="ajax" 和reveal-modal 的工作示例，在提交表单的地方，将对 PHP 脚本进行 AJAX 调用以将数据插入数据库，并在成功时模态窗口打开，请提供示例。

片段 1 - 有效

<script type="text/javascript">
$(document).ready(function () {

    $("#pledge_btn").attr("disabled", true);

    $(document).foundation({
        abide: {
            validate_on: 'manual',
            patterns: {
                edu_address: /\.edu$/
            }
        }
    });

    $('a.custom-close-reveal-modal').click(function(){
      $('#emailModal').foundation('reveal', 'close');
    });

    $('#pledge_form')
    .on('invalid.fndtn.abide', function() {
      $("#pledge_btn").attr("disabled", true);
      $("#terms").prop("checked",false);
      console.log('Not Submitted');
    })
    .on('valid.fndtn.abide', function() {
      $("#pledge_form :input").prop('readonly', true);
      $("#pledge_btn").attr("disabled", true);
      $("#terms").attr("disabled", true);
      $("#sweeps").attr("disabled", true);
      console.log('Submitted: ', data);
      $('#myModal').foundation('reveal', 'open');
    });
});

片段 2 - 不起作用

 <script type="text/javascript">
  $(document).ready(function () {

    $("#pledge_btn").attr("disabled", true);

    $(document).foundation({
        abide: {
            validate_on: 'manual',
            patterns: {
                edu_address: /\.edu$/
            }
        }
    });

    $('a.custom-close-reveal-modal').click(function(){
      $('#emailModal').foundation('reveal', 'close');
    });

    $('#pledge_form')
    .on('invalid.fndtn.abide', function() {
      $("#pledge_btn").attr("disabled", true);
      $("#terms").prop("checked",false);
      alert("Form NOT submitted");
    })
    .on('valid.fndtn.abide', function() {
        var lname = $("#lName").val();

        var dataString = 'lname=' + lname;

      alert("Form submitted");
      $.ajax({
        url     : create_pledge.php,
        type    : $(this).attr('method'),
        data    : dataString,
        success : function( data ) {
          $("#pledge_form :input").prop('readonly', true);
          $("#pledge_btn").attr("disabled", true);
          $("#terms").attr("disabled", true);
          $("#sweeps").attr("disabled", true);
          console.log('Submitted: ', data);
          $('#myModal').foundation('reveal', 'open');
        },
        error   : function( data, xhr, err ) {
          console.log('Oops: ', data, xhr , err);
        }
      });
      return false;
    });
  });
</script>

部分形式和模式代码

    <div class="row pledge-row">
  <form data-abide="ajax" id="pledge_form" method="post" name="pledge_form">
    <div class="row">
      <div class="large-6 medium-12 columns">
        <label class="pledge-label">First Name*</label>
        <input id="fName" type="text" required pattern="[a-zA-Z]+"/>
       <small class="error">First Name is required</small>
      </div>
    </div>
    <div class="row">
      <div class="large-6 medium-12 columns">
        <label class="pledge-label">Last Name*</label>
        <input id="lName" type="text" required pattern="[a-zA-Z]+"/>
       <small class="error">Last Name is required</small>
      </div>
    </div>
    <div class="row">
      <div class="large-6 medium-12 columns">
          <label class="pledge-label">Email*</label>
          <input id="email" type="email"  required style="margin:0 0 5px 0 !important;"/>             
          <small class="error">.edu email address is required</small>
          <span id="email-result"></span>
          <div class="valid-email">(must be a properly formatted .edu email)</div>

      </div>
    </div>

    <!-- CODE REMOVED FOR THIS POST -->
  </form>
</div>

    <!-- Modal -->
    <div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
        <h2 id="modalTitle">Thanks for pledging.</h2>
        <p>please check your email for our confirmation/validation email.</p>
        <a class="close-reveal-modal" aria-label="Close">&#215;</a>
    </div>

【问题讨论】：

标签： php ajax modal-dialog zurb-foundation zurb-reveal

【解决方案1】：

找到了答案。我需要在提交中包含 ajax 请求，而不是有效事件。

所以这行得通：

        $('#pledge_form')
    .on('invalid.fndtn.abide', function() {
      $("#pledge_btn").attr("disabled", true);
      $("#terms").prop("checked",false);
      // alert("Form NOT submitted");
    })
    .on('valid.fndtn.abide', function() {
      // alert("Form submitted");
      console.log('VALID');
    })
    .on('submit', function(e) {
        var ajaxObj = $.ajax({
          url   : 'create_pledge.php',
          type    : $(this).attr('method'),
          data    : $(this).serialize(),
          success : function( ) {
            $("#pledge_form :input").prop('readonly', true);
            $("#pledge_btn").attr("disabled", true);
            $("#terms").attr("disabled", true);
            $("#sweeps").attr("disabled", true);
            console.log('Submitted');
            $('#myModal').foundation('reveal', 'open');
          },
          error   : function( xhr, err ) {
            console.log('Oops: ', xhr , err);
          },
          complete: function(){
              console.log('COMPLETE');
          }
      });
    });
  });

【讨论】：

【解决方案2】：

在提交之前我也遇到了同样的问题，fancybox 和 ajax 检查。

这是我的解决方案，确实有效

<form id="my_form" action="...." method="POST" class="popup" data-abide="ajax">
<input type="text" name="check_this_field_with_ajax" id="check_this_field_with_ajax">
....

</form>

<script type="text/javascript" src="..../js/foundation.min.js"></script>

<script type="text/javascript" src="..../js/foundation/foundation.abide.js"></script>

<script type="text/javascript">

$('#my_form')
    .on('invalid.fndtn.abide', function() {
        console.log('NOT Submitted');
    })
    .on('valid.fndtn.abide', function() {
      console.log('VALID');
    })
    .on('submit', function(e) {
        var ajaxRequest = $.ajax({
            type: 'GET',
            url: "....",
            data: {xxx: yyy},
            cache: false,
            dataType: 'json',
        });

        ....

        ajaxRequest.done(function() {
            if (ok) {
                $('#check_this_field_with_ajax').parent().removeClass('error');
                $('#my_form').attr({'submit_this_form': 'yes'});
                $(document).foundation('abide', 'reflow');
                $('#my_form').trigger('submit.fndtn.abide');
            }
        });
    }

</script>

现在进入foundation.abide.js，搜索“validate : function (els, e, is_ajax) {”行并添加：

if (
    is_ajax &&
    form.attr('submit_this_form') === 'yes'
    ) {
    return true;
  }

之前

if (is_ajax) {
    return false;
  }

【讨论】：