jQuery UI di Dialogo di modificare il contenuto di una finestra di dialogo apri (Ajax)

Ho alcuni link che voglio aprire dinamicamente in jQuery UI finestra di Dialogo utilizzando jQuery.load(). Una volta che la finestra è aperta, voglio il link di carico all’interno del già aperto il dialogo.

  1. Così, il sito viene caricato, è possibile fare clic su un link e si apre una finestra di dialogo. Va bene. Si può chiudere e aprire tutte le volte che si desidera.
  2. Mentre è aperto, se si fa clic su uno dei link il contenuto caricato, non funziona.
    • Un Ajax OTTENERE la richiesta VIENE effettuata, ma il contenuto non è correttamente caricato nella finestra di dialogo. (Firebug mostra la richiesta)
    • Il precedente titolo della finestra di dialogo e di dialogo contenuto viene cancellato. Ma il contenuto non è visibile, NÉ è inserito nel DOM. (Il sorgente generato non mostra il contenuto ovunque.)

I link simile a questo…

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

L’evento click è legato…

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

Il ajax_dialog funzione controlla per vedere se c’è una finestra di dialogo, chiamate a creare uno se non c’è, chiamate per caricare il contenuto, imposta il titolo, e si apre la finestra di dialogo se non è aperto.

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;
}

Il init_dialog funzione crea la finestra di dialogo se non c’è una…

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();}
    });
}

Il load_dialog funzione carica il contenuto desiderato nella finestra di dialogo.

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.
}
InformationsquelleAutor morewry | 2010-07-28



One Reply
  1. 1

    Hah. Come illustrato nel codice, io sto usando $jQuery.load() e tirando l’esatta href di collegamento con il URL a richiesta. Tutti gli Url avuto frammenti/ancore sulla fine, che è: ….html#id-of-div.

    In questo caso, lo script funzionava bene, ma il #id del div non esiste e non esiste la pagina di sicurezza. Ecco perché ho potuto vedere il contenuto restituito, ma la finestra di dialogo appena conclusa vuoto. 🙂

Lascia un commento