2010-12-08 81 views
25

jQueryダイアログ内で(iframeを使用して)写真をアップロードするためのコードを実装しました。iframeからjQuery UIダイアログを閉じる

はここインラインフレーム

<div style="display: none"> 
    <iframe id="upload-form" frameborder="0" marginheight="0" marginwidth="0" src="Upload.aspx"></iframe> 
</div> 

だと、ここでダイアログを開くの面倒を親ページにjQueryのコードです。

$("#upload-image").click(function (e) { 
    e.preventDefault(); 
    $('#upload-form').dialog({ 
     modal: true, 
     width: 300, 
     title: "Upload Image", 
     autoOpen: true, 
     close: function(event, ui) { $(this).dialog('close') } 
    }); 
}); 

私はその後、アップロード後(インラインフレームページ)スクリプトを注入していますが、バック親ページに結果を通過する成功しているが、私は同時に、ダイアログを閉じたいです。

$(document).ready(function() { 
    $(parent.document).find('#imagePathValue').val('theimagevalue'); 
    $(parent.document).find('#upload-form').dialog('close'); 
}); 

​​がsuccessfuly渡されますが、私は、ダイアログを閉じることができるように見えることはできません。

答えて

39

、あなたがいないのiframe内から、親からのjQueryを呼び出す必要があります。これを行うには、次を使用してください...

window.parent.jQuery('#upload-form').dialog('close'); 

これはすべきです!あなたもこれを行う必要があることに加えて

+0

それはそれが仲間です、ありがとう! :) – Marko

5

これを試してみてください。それを動作させるためには

$(document).ready(function() { 
    $(parent.document).find('#imagePathValue').val('theimagevalue'); 
    window.parent.$('#upload-form').dialog('close'); 
}); 
+0

私はこれも同様に動作すると推測します。+1 – Marko

+0

両方の答えが同じです。 –

2

window.parent.$('#upload-form').remove(); 

はそうインラインフレームインスタンスは、ダイアログ終了後に削除されます。

ので、最終的なコードは次のようになります。 Kaushal

+0

ありがとう。 remove()がなければ、ダイアログを開き、閉じてからもう一度開きますが、2回目のクローズは失敗します。代わりに –

+0

ダイアログ( 'destroy')を使用してください。ダイアログは、ダイアログ自体の子DOM要素内で参照されるリソース以外のリソースを作成します。 – bvoyelr

-1

は間違いなく、それは親ドキュメント自体に機能を参照する必要があり、機能のこれらのタイプを呼び出すためにそれを覚えて

$(document).ready(function() { 
    $(parent.document).find('#imagePathValue').val('theimagevalue'); 
    window.parent.$('#upload-form').dialog('close'); 
    window.parent.$('#upload-form').remove(); 
}); 

感謝。 jqueryコンストラクタの2番目の引数を使用する場合は、メソッドのターゲットのみを指定し、実行する場所は指定しません。

だから、$('element', window.parent.document).method();は機能しません。window.parent.jQuery('element').method();となります。

関連する問題