ARTS NET

jQuery.UI.dialogの中身をAjaxでloadしたくて$().load().dialog(‘open’)とか色々やってみたけど思うような動作にならない。しょうがないのでググってたら$().ajaxDialog: jQuery UI – dialog をajaxでというのを見つけました。ただ、使おうとしたら「このままだとloading中の表示を出せないし、画像だっけを出すようなこともできません」と書いてある。思うような動作とは正にローディングなので結局jQuery.UI.dialogのOpenイベントで実装することにしました。

書いたのはこんな感じ。

$("#disp").dialog({
        autoOpen: false,
        buttons: {
            'close': function(){
                $(this).dialog('close');
                $("#disp").children().remove();
            }
        },
        open: function(){
            $("#disp").load($(this).dialog("option", "url"), null, function() {
                $("#loading").hide();
            });
        }
});
$(".link").click(function(){
        $("#loading").show();
        $("#disp").dialog("option", "url", "/get_page?url=" + $(this).attr('href'));
        $("#disp").dialog('open');
        return false;
});

class=”link”なアンカー（複数ある）をクリックしたらクリックされたアンカーのhrefを取得してdialogに「url」というオプション値として登録しdialogをopenする。dialogのopenイベントで実行されるメソッドopen: function()にローディング開始とload処理を書き、更にload完了時のコールバックでローディング終了する。dialogを閉じる際のbuttons: {‘close’: function()でダイアログを閉じると共に$(“#disp”)の中身をremoveする。

ちなみに今回は別ドメインのページをloadする要件だったので/get_page?url=” + $(this).attr(‘href’)というようにサーバサイドを噛ませて取得しています。同一ドメインのページなら普通にurlを入れれば大丈夫です。このようにjQuery.UI.dialogにはopenに限らずイベントが多数用意されていますので応用すれば思い通りに動かせると思います。詳細はjQuery.UI.dialogのページ下部にあるEventsをご覧ください。

タグ

関連する投稿

• prototype.jsでウィンドウを表現 (0)