Javascript 克隆引导模式后，jQuery表单丢失
我的想法是通过jQueryForm提交我的表单，该表单放置在引导模式中，并立即向用户发送上传状态响应。在我尝试通过克隆myModal来重置myForm之前，它工作得很好。克隆后，一切看起来都很好，直到您再次尝试提交myForm。结果是，我没有填写myStatus，而是被重定向到upload_replay-echo.php。解决方法很简单：location.reload（），但它使整个想法毫无意义 下面的代码是一个工作示例。upload_replay-echo.php可以返回任何内容。例如：Javascript 克隆引导模式后，jQuery表单丢失,javascript,php,jquery,twitter-bootstrap,Javascript,Php,Jquery,Twitter Bootstrap,我的想法是通过jQueryForm提交我的表单，该表单放置在引导模式中，并立即向用户发送上传状态响应。在我尝试通过克隆myModal来重置myForm之前，它工作得很好。克隆后，一切看起来都很好，直到您再次尝试提交myForm。结果是，我没有填写myStatus，而是被重定向到upload_replay-echo.php。解决方法很简单：location.reload（），但它使整个想法毫无意义 下面的代码是一个工作示例。upload_replay-echo.php可以返回任何内容。例如： &l
<?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">×</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"> </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>
测验
$（窗口）。加载（函数（）{
var myBackup=$（'#myModal'）.clone（）；
//委托事件，因为我们制作了一个副本，而复制的按钮不存在
$（'body'）。在（'click'，'myReset'，函数（）上{
$（'#myModal'）.modal（'hide'）.remove（）；
var myClone=myBackup.clone（）；
$（'body'）.append（myClone）；
//location.reload（）；
});
});
启动模式
&时代；
要上载的文件
重要提示：如果您可以看到下面的任何文本，请在尝试上载任何文件之前使用“重置”按钮。
关
重置
（功能（）{
变量栏=$（'.progressbar'）；
var状态=$（“#myStatus”）；
$（'form'）.ajaxForm({
beforeSend:function（）{
status.empty（）；
var pcv='0%'；
钢筋宽度（pcv）；
},
上载进度：功能（事件、位置、总数、完成百分比）{
var pcv=完成百分比+'%'；
钢筋宽度（pcv）；
},
成功：函数（）{
var pcv=‘100%’；
钢筋宽度（pcv）；
},
完成：函数（xhr）{
var pcv='0%'；
//等待1秒钟，然后重置进度。。
setTimeout（函数（）{
钢筋宽度（pcv）；
}, 1000);
html（xhr.responseText）；
}
});
})();
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();
});