2

を使用してjQueryUIダイアログで動的に開きたいリンクがいくつかありますjQuery.load()。ダイアログが開いたら、すでに開いているダイアログ内にリンクをロードします。

  1. したがって、サイトが読み込まれ、リンクをクリックすると、ダイアログが開きます。それはいいです。何度でも開閉できます。
  2. 開いているときに、読み込まれたコンテンツのリンクの1つをクリックしても、機能しません。
    • Ajax GETリクエストが実行されますが、結果のコンテンツがダイアログに正常にロードされません。（Firebugはリクエストを表示します）
    • 以前のダイアログタイトルとダイアログコンテンツが消去されます。ただし、新しいコンテンツは表示されません。また、DOMに挿入されることもありません。（生成されたソースにはコンテンツがどこにも表示されません。）

リンクは次のようになります...

<a href="http://www.example.com/index.php?action=something&amp;search=somethingelse#fragment" rel="dialog" title="Title Attribute">

クリックイベントがバインドされます...

$('body').delegate("a[rel~=dialog]", "click", function(e){return ajax_dialog(this, e);});

このajax_dialog関数は、ダイアログがあるかどうかを確認し、ない場合はダイアログを作成するために呼び出し、コンテンツをロードするために呼び出し、タイトルを設定し、ダイアログが開いていない場合は開きます。

function ajax_dialog(_this, _event){
    var urlToLoad = $(_this).attr("href").replace("#", "&ajax=true #");
    var linkTitle = $(_this).attr("title");

    // Create dialog
    if(!$('body').find('#ajaxDialog').size()){
        $('body').append('not yet init<br />'); // This shows up the first click only.
        init_dialog('#ajaxDialog');
    }

    // Load Dialog Content
    load_dialog('#ajaxDialog', urlToLoad);

    // Add title
    $('#ajaxDialog').dialog('option', 'title', linkTitle);

    // Open dialog (or reload)
    if(!$('#ajaxDialog').dialog('isOpen')){
        $('#ajaxDialog').dialog('open');
        $('body').append('not yet open<br />'); // This shows up the first click only.
    }
    return false;
}

init_dialogダイアログがない場合、関数はダイアログを作成します...

function init_dialog(_this){
    $('body').append('<div id="ajaxDialog"></div>');
    // Set Dialog Options
    $(_this).dialog({
        modal:true,
        autoOpen:false,
        width:900,
        height:400,
        position:['center','center'],
        zIndex: 9999,
        //open:function(){load_dialog(this, urlToLoad);}, This didn't work without destroying the dialog for each click.
        close:function(){$(this).empty();}
    });
}

このload_dialog関数は、目的のコンテンツをダイアログにロードします。

function load_dialog(_this, urlToLoad){
    $(_this).load(urlToLoad, function(){
        $('body').append(urlToLoad + ' load function<br />'); // This shows up each click
        $(_this).append("Hihi?"); // This shows up each click
    });
    // The loaded information only shows the first click, other times show an empty dialog.
}
4

1 に答える 1

1

はぁ。コードに示されているように、私はリクエストするURLとして正確なリンクを使用$jQuery.load()してプルしていました。すべてのURLの最後にフラグメント/アンカーがあります。つまり、....。hrefhtml#id-of-div

この場合、スクリプト自体は正常に機能していましたが、＃id-of-divはまだページに存在していませんでした。そのため、コンテンツが返されるのを見ることができましたが、ダイアログが空白になってしまいました。:-)

于 2010-08-12T17:00:56.710 に答える