AJAX成功失败的基础揭示

Question

试图在基金会论坛上发布这篇文章，但出于某种原因，它不会发布。

下面的第一个代码片段显示了我的表单使用data-abide="ajax"和.on('valid.fndtn.abide',function(){});的工作代码。这些元素被禁用等，并打开模态。当模态关闭时，我将按需要保留在页面上。

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

第二个代码片段显示了该尝试，但不起作用。当我运行这段代码时，警报会触发，但是页面会提交，没有写到控制台，没有模态，页面刷新。我做错了什么？

我还包括了部分代码(第三段)，用于表单和模态。

如果有一个使用Foundation的工作示例，数据遵守=“AJAX”和显示模式，在提交表单时，会对PHP脚本进行AJAX调用，将数据插入DB，如果成功，请提供一个示例。

片段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>

Answer 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');
          }
      });
    });
  });

Answer 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;
  }