javascript - jQuery Form gets lost after Bootstrap modal is cloned -
javascript - jQuery Form gets lost after Bootstrap modal is cloned -
my thought submit myform placed within bootstrap modal via jqueryform, immediate upload status response user. works fine until seek reset myform cloning mymodal. after cloning looks fine untill seek submit myform 1 time again. result instead of getting mystatus filled in redirected upload_replay-echo.php. solution easy: location.reload() makes whole thought pointless.
the code below working example. upload_replay-echo.php can homecoming anything. example:
<?php echo 'upload echo..<br>'; ?> can help me in matter?
thanks in advance!
<!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 create copy, , copied button 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 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 upload" size="100" class="btn-sm"/> </form> <div class="row"> </div> <div class="progress"> <div class="progress-bar"></div> </div> <div> important: <small>if can see text below please utilize "reset" button before trying upload 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 sec , reset progress.. settimeout(function (){ bar.width(pcv); }, 1000); status.html(xhr.responsetext); } }); })(); </script> <!-- file upload tests: jquery.form - end --> </body> </html>
i realized ajaxform 1 time initialize! when reset modal related form - dom element unbind jquery form plugin. should prepareform (instantiation) everytime when reset modal.
var myuploadmodule = myuploadmodule || {}; $(window).load(function() { myuploadmodule.mybackup = $('#mymodal').clone(); myuploadmodule.init = function() { var _this = this; console.log("my module initializer"); // delegated events because create copy, , copied button 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 sec , reset progress.. settimeout(function (){ bar.width(pcv); }, 1000); status.html(xhr.responsetext); } }); }; myuploadmodule.init(); }); javascript php jquery twitter-bootstrap
Comments
Post a Comment