1
Я реализую диалог jQuery UI с iFrame. В диалоговом окне есть файл iFrame с файловой загрузкой.
Все в порядке, но закрытие диалога с страницы iFrame стало проблемой.jQuery UI Dialog с iFRAME
Ниже мой код:
Родитель 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 to launch the dialog -->
<button id="btnUpload">Upload</button>
<script type="text/javascript">
function _finishUpload(){
console.log($('#dialog-upload')); // the element was outputed in the console
$('#dialog-upload').dialog('close'); // the dialog is not closed.
//$('#dialog-upload').hide() // this code was 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 a file.').show();
}else{
doc.$('form').submit(); // submit the form in the 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 страница
<!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 this only when the form is submitted ?>
<script type="text/javascript">
window.parent._finishUpload(); // it was executed, but the dialog is not closed
</script>
<?php } ?>
Я также попытался это window.parent.$('#dialog-upload').dialog('close'); в плавающем фрейме, но не удалось.
Вы совершенно ошибаетесь в этой проблеме, я думаю. Зачем вам нужен iframe? –
@ Leandro, я использую iFrame из-за загрузки файла. Вот аналогичный вопрос http://stackoverflow.com/questions/4392146/close-jquery-ui-dialog-from-iframe?rq=1, но это не помогло решить мою проблему. В конце концов я получил решение для этого. Это связано с динамическим изменением iFrame src. Я должен был динамически изменять iFrame src при каждом открытии диалога. Я отвечу позже. – Sithu