如何使用JavaScript来触发陆续

Question

我想用下面的代码来完成以下流模式之一：

1. 验证用户的输入（形式在一个模式弹出）
2. 如果没有错误，触发另一个模式来展示一些东西。结果模式的内容来自ajax调用。

问题是模态从未显示的结果。

编辑：。相对于e.preventDefault（），因为我有另一个版本，这使得在$（“＃frmSchPkg”）Ajax调用测试的问题似乎提交（函数（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

我发现以下解决方案：

$.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; 
 
};

Answer 2

的JS脚本应该像

1. Ajax的方法应该是内部验证onSuccess: function($form) { }

2. 第一模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); 
        } 
        }); 
       } 
   });