Bootstrap模式被克隆后，jQuery表单会丢失

我的想法是通过jQueryForm提交放置在Bootstrap模式中的myForm，并提供对用户的立即上传状态响应。它工作正常，直到我尝试通过克隆myModal重置myForm。克隆后，一切看起来都很好，直到你再次尝试提交myForm。结果是，我没有将myStatus填入，而是重定向到upload_replay-echo.php。解决方案很简单：location.reload（），但它使整个想法完全没有意义。Bootstrap模式被克隆后，jQuery表单会丢失

下面的代码是一个工作示例。 upload_replay-echo.php可以返回任何内容。例如：

<?php 
echo 'Upload echo..<br>'; 
?>

任何人都可以帮助我解决这个问题吗？

提前致谢！

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <title>Test</title> 

     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.2.3/bootstrap-table.min.css"> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.2.3/bootstrap-table.min.js"></script> 

     <script type='text/javascript'> 
     $(window).load(function(){ 
      var myBackup = $('#myModal').clone(); 
      // Delegated events because we make a copy, and the copied button does not exist onDomReady 
      $('body').on('click','#myReset',function() { 
       $('#myModal').modal('hide').remove(); 
       var myClone = myBackup.clone(); 
       $('body').append(myClone); 

       // location.reload(); 

      }); 
     }); 
     </script> 
    </head> 
    <body> 
     <!-- Modal starter.. --> 
     <div class="container"> 
      <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal"> 
       Start modal 
      </button> 
     </div> 
     <!-- Modal.. --> 
     <div class="modal" id="myModal"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <!-- Modal Header --> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">File to upload</h4> 
        </div> 

        <!-- Modal Body --> 
        <div class="modal-body" id="myModalBody"> 
         <form id="myForm" enctype="multipart/form-data" action="upload_replay-echo.php" method="post" > 
          <input type="hidden" name="MAX_FILE_SIZE" value="2000000" /> 
          <input type="submit" class="btn btn-primary btn-sm" value="Upload file" /> 
          <input type="file" name="myfile[]" multiple title="Choose WoT replay files to upload" size="100" class="btn-sm"/> 
         </form> 

         <div class="row">&nbsp;</div> 

         <div class="progress"> 
          <div class="progress-bar"></div> 
         </div> 
         <div> 
          Important: <small>If you can see any text below then please use "Reset" button before trying to upload any file.</small> 
         </div> 
         <div id="myStatus"></div> 

        </div> 
        <!-- Modal Body - end --> 
        <!-- Modal Footer --> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Close</button> 
         <button type="button" class="btn btn-default btn-sm" data-dismiss="modal" id="myReset">Reset</button> 
        </div> 
       </div> 
      </div> 
     </div> 

    <!-- File upload tests: jQuery.Form --> 
     <script src="js/jquery.form.js"></script> 
     <script> 
     (function() { 

     var bar = $('.progress-bar'); 
     var status = $('#myStatus'); 

     $('form').ajaxForm({ 
      beforeSend: function() { 
       status.empty(); 
       var pcv = '0%'; 
       bar.width(pcv); 
      }, 
      uploadProgress: function(event, position, total, percentComplete) { 
       var pcv = percentComplete + '%'; 
       bar.width(pcv); 
      }, 
      success: function() { 
       var pcv = '100%'; 
       bar.width(pcv); 
      }, 
      complete: function(xhr) { 
       var pcv = '0%'; 
      // Wait 1 second and reset progress.. 
       setTimeout(function(){ 
        bar.width(pcv); 
       }, 1000); 
       status.html(xhr.responseText); 
      } 
     }); 

     })(); 
     </script> 
    <!-- File upload tests: jQuery.Form - end --> 
    </body> 
</html>

来源

2014-10-12 fazi62

我意识到ajaxForm只是一次初始化！当你重置与jquery form插件的模式相关的Form-dom元素解除绑定。您应该在每次重置模态时进行prepareForm（Instantiation）。

var myUploadModule = myUploadModule || {}; 
    $(window).load(function() { 
     myUploadModule.myBackup = $('#myModal').clone(); 
     myUploadModule.init = function() { 
      var _this = this; 
      console.log("my module initializer"); 
      // Delegated events because we make a copy, and the copied button does not exist onDomReady 
      $('body').on('click','#myReset',function() { 
       $('#myModal').modal('hide').remove(); 
       var myClone = _this.myBackup.clone(); 
       $('body').append(myClone); 

       myUploadModule.prepareForm(); 
       // location.reload(); 
      }); 

      myUploadModule.prepareForm(); 
     }; 
     myUploadModule.prepareForm = function() { 
      var bar = $('.progress-bar'); 
      var status = $('#myStatus'); 

      $('form').ajaxForm({ 
       crossDomain: true, 
       dataType: 'jsonp', 
       beforeSend: function() { 
        status.empty(); 
        var pcv = '0%'; 
        bar.width(pcv); 
       }, 
       uploadProgress: function(event, position, total, percentComplete) { 
        var pcv = percentComplete + '%'; 
        bar.width(pcv); 
       }, 
       success: function() { 
        var pcv = '100%'; 
        bar.width(pcv); 
       }, 
       complete: function(xhr) { 
        var pcv = '0%'; 
       // Wait 1 second and reset progress.. 
        setTimeout(function(){ 
         bar.width(pcv); 
        }, 1000); 
        status.html(xhr.responseText); 
       } 
      }); 
     }; 

     myUploadModule.init(); 
    });

来源

2014-10-12 09:54:32

Bootstrap模式被克隆​​后，jQuery表单会丢失

回答

相关问题

Bootstrap模式被克隆后，jQuery表单会丢失