Question

我想使用下面的代码来完成以下流程：

验证用户的输入（弹出模式中的表单）
如果没有错误，则触发另一个模式以显示某些内容。结果模态的内容来自ajax调用。

问题是结果模态永远不会显示。

编辑：问题似乎与e.preventDefault（）有关，因为我测试了另一个版本，它在$（“＃frmSchPkg”）中进行ajax调用.resent（function（e）。它适用于preventDefefalut，如果缺少preventDefault（），它将无效。

也许问题是如何将preventDefault（）添加到此发布的javascript中。

$.validate({
  form: '#frmSchPkg',
  onSuccess: function($form) {
    var pkgnum12 = $("#pkgnum12").val();
    var dataString = 'pkgnum12=' + pkgnum12;
    $.ajax({
      type: "GET",
      url: "admin/sch_pkg_c.php",
      data: dataString,
      cache: false,
      async: false,
      success: function(data) {
        console.log(data);
        alert(data); // able to see data being expected. so the ajax call is successful
        $('#text-modal').modal('hide'); // tried to comment this out for testing, 1st modal vanishes anyway at this point
        $('#LookupResultModal').find('.ct_schpkgresult').html(data);
        $('#LookupResultModal').modal('show');
      },
      error: function(err) {
        console.log(err);
      }
    });
  }
});

<div class="modal fade text-modal" id="text-modal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-sm2">
    <div class="modal-content">
      <div class="modal-header bg-shop">
        <a class="close-modal" href="#" data-dismiss="modal">
          <span class="menu-icon"></span>
        </a>
        <h2 class=""><b>Search</b></h2>
      </div>
      <form action="" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSchPkg">
        <div class="modal-body">
          <div class="form-group">
            <div class="col-sm-12">
              <input class="form-control" name="pkgnum12" id="pkgnum12" type="text" placeholder="enter tracking number" data-validation="number length" data-validation-length="12-12" />
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="col-sm-6">

          </div>
          <div class="col-sm-6">
            <button name="btnfind" id="btnfind" type="submit" class="clsfind btn btn-store btn-block">
              <i class="fa fa-search"></i>&nbsp;Search</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>


<div class="modal fade" id="LookupResultModal" tabindex="-1" role="dialog" aria-labelledby="LookupResultModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog ">
    <div class="modal-content">
      <div class="modal-header bg-shop">
        <a class="close-modal" href="#" data-dismiss="modal">
          <span class="menu-icon"></span>
        </a>
        <h2 class=""><b>Search Result</b></h2>
      </div>

      <div class="ct_schpkgresult"></div>

    </div>
  </div>
</div>

Answer 1

JS脚本应该像

Ajax方法应该在验证onSuccess: function($form) { }

第一个模态hide和第二个模态show应该在Ajax方法success: function(data) { }

中

$.validate({
  form: '#frmSchPkg',
  onSuccess: function($form) {
    var pkgnum12 = $("#pkgnum12").val();
    var dataString = 'pkgnum12=' + pkgnum12;
    alert(dataString);
      $.ajax({
        type: "POST",
        url: "admin/sch_pkg_c.php",
        data: dataString,
        cache: false,
        success: function(data) {
          console.log(data);
          $('#text-modal').modal('hide'); //If all good hide first modal
          $('#LookupResultModal').modal('show'); //show 2nd modal
          $('#LookupResultModal').find('.ct_schpkgresult').html(data); //show response in 2nd modal
        },
        error: function(err) {
          console.log(err);
        }
      });
  }
});

Answer 2

我找到了以下解决方案：

$.validate({
  form: '#frmSchPkg',
  onSuccess: function(form) {
    return $.sendFormDataViaAJAX(form);
  }
});

$.sendFormDataViaAJAX = function(form) {
  var pkgnum12 = $("#pkgnum12").val();
  var dataString = 'pkgnum12=' + pkgnum12;
  $.ajax({
    type: "GET",
    url: "admin/sch_pkg_c.php",
    data: dataString,
    cache: false,
    async: false,
    success: function(data) {
      console.log(data);
      $('#text-modal').modal('hide');
      $('#LookupResultModal').find('.ct_schpkgresult').html(data);
      $('#LookupResultModal').modal('show');
    },
    error: function(err) {
      console.log(err);
    }
  });
  return false;
};

如何使用javascript一个接一个地触发模态

2 个答案: