jQuery UI Dialog with iFRAME -
i'm implementing jquery ui dialog iframe. dialog has iframe has file upload page.
fine, closing dialog iframe page got problem.
the below code:
parent page
<!-- upload file form --> <div id="dialog-upload" class="dialog" title="upload file" style="display:none"> <div class="message error"></div> <iframe id="upload-form" src="file_upload.php" width="276" height="195" frameborder="0"></iframe> </div> <!-- button launch dialog --> <button id="btnupload">upload</button> <script type="text/javascript"> function _finishupload(){ console.log($('#dialog-upload')); // element outputed in console $('#dialog-upload').dialog( 'close' ); // dialog not closed. //$('#dialog-upload').hide() // code executed. } function _fileupload(){ var doc = $('#upload-form')[0].contentwindow; // iframe document $('#dialog-upload').find('.message').html('').hide(); var file = doc.$('form').find('#file').val(); if( ! file ){ $('#dialog-upload').find('.message').html('please select file.').show(); }else{ doc.$('form').submit(); // submit form in iframe dialog } }, $(document).ready( function(){ $( "#dialog-upload" ).dialog({ modal: true, autoopen: false, resizable: false, buttons: { ok: function() { _fileupload(); }, cancel: function(){ $(this).dialog( "close" ); } } }); $( '#btnupload' ).click(function(){ $('#dialog-upload').dialog( 'open' ); }); } ); </script>
iframe page
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> <div class="dialog" style="display:block"> <form name="frmfileupload" method="post" enctype="multipart/form-data"> <fieldset> <label for="txttitle">upload file</label> <input type="file" name="file" id="file" class="text ui-widget-content ui-corner-all" /> </fieldset> </form> </div> </body> </html> <?php if(sizeof($_post)){ # trigger when form submitted ?> <script type="text/javascript"> window.parent._finishupload(); // executed, dialog not closed </script> <?php } ?>
i tried window.parent.$('#dialog-upload').dialog('close');
in iframe, failed.
this bug jquery mobile work iframe. refer this: https://github.com/jquery/jquery-mobile/issues/4822
Comments
Post a Comment