0

これを Foundation フォーラムに投稿しようとしましたが、何らかの理由で投稿できませんでした。

以下の最初のコード スニペットはdata-abide="ajax"、 と.on('valid.fndtn.abide',function(){});. 要素が無効などになり、モーダルが開きます。モーダルが閉じられると、必要に応じてページに残ります。

私は今、これに AJAX を使用させようとしています。リクエストは、データ挿入を処理する php スクリプトに対して行われ、成功すると要素操作とモーダルが行われます。

2 番目のコード スニペットはその試みを示していますが、これは機能していません。このコードを実行すると、アラートが発生しますが、ページが送信され、コンソールには何も書き込まれず、モーダルも表示されず、ページが更新されます。私は何を間違っていますか？

フォームとモーダルの部分的なコード (3 番目のスニペット) も含めました。

Foundation、data-abide="ajax"、および Reveal-modal を使用してフォームが送信される実際の例があれば、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>
4

2 に答える 2

1

送信前の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;
  }
于 2015-10-09T10:34:28.497 に答える