2010-07-27 21 views
7

Ho esaminato alcune delle domande correlate e devo chiedermelo in modo completamente diverso perché ne ho visto solo alcune che sembravano riguardare. Sto caricando un'intera media div tramite la chiamata JQuery Ajax e voglio semplicemente essere in grado di fare un po 'di JQuery automatico su quella nuova area come $ (document) .ready permette quando viene caricato un DOM. Ho letto che livequery avrebbe fatto questo, ma ho pensato che ci sarebbe stato un modo per integrarlo. Sto provando ad aggiungere un selettore di date a un campo di input proprio all'inizio.

Questo è il contenuto che chiamerà per il contenuto nel back-end che quindi estrarrà alcune sezioni specifiche.

$.post("ReportingWizard",$("#wizard_form").serialize(), function (data) { setData(data); }); 

function setData(data) { 
divElement.innerHTML = data; 
$(activeTab).fadeIn(); //Fade in the active content 
$(".wizardBody").fadeIn(); 
} 

All'interno del file che viene messo in quel DivElement avrà un metodo di JQuery che deve essere eseguito per modificare il codice html all'interno di esso.

+0

Cosa vuoi fare e quando? Dopo il "medio div" viene caricato? –

+0

Voglio che venga aggiunto prima che il div medio sia caricato ma basato sul contenuto che viene recuperato. Il JQuery è in realtà nel contenuto che viene caricato e in pratica dà ID a div e aggiunge anche immagini e funzionalità di selezione della data ad aree specifiche. – Craig

risposta

8

Registrare gli eventi nel callback della funzione AJAX.

Se stai usando .load() fare caricare il div mezzo, inserire il codice jQuery direttamente nella richiamata:

$('#middleDiv').load('/fish.php', function() { 
    $('#someDiv').fadeIn(300); // ? whatever 
}); 

Se si sta utilizzando alcune delle altre funzioni AJAX, inserire il vostro jQuery codice dopo la linea in cui si aggiungono gli elementi al DOM nella richiamata:

jQuery.get('/fish.php', function (response) { 
    $('#middleDiv').html(response); 

    $('#someDiv').fadeIn(300); // ? whatever 
}); 

Se si tratta di eventi che si desidera associare, si potrebbe guardare con. on() (oppure delegate() o .live() se si utilizzano le versioni precedenti di jQuery, che erano presenti quando questa domanda era stata scritta in origine). È possibile vedere un confronto di questi vari metodi here.

Questi metodi consentono il binding di eventi agli elementi anche quando non sono ancora presenti nel DOM; il che significa che puoi associare gli eventi nel tuo blocco $(document).ready(), anche se gli elementi non sono ancora registrati nel DOM.

+0

Sto usando lo stesso metodo di post per 3 o 4 selezioni di dati differenti in modo che la seconda riga sia ciò che è effettivamente all'interno del contenuto che viene caricato. Aggiunto il codice attualmente in uso all'interno dell'area generale. – Craig

+0

Questa sarebbe stata la mia soluzione finale, grazie. Alla fine però mi è stato detto che non avevamo davvero bisogno di Ajax perché le funzioni in cui veniva tagliato lo usavano effettivamente. – Craig

+0

Ho bisogno di una funzione per eseguire un elemento di classe quando è 1) è caricato o 2) è spinto nella pagina tramite ajax, ho provato 'on ('ready', '.my-class', handler)', ma non ha funzionato. – Shimmy

4

Craig,

penso che si sta cercando di andare su questo nel modo più duro.

In primo luogo: Sebbene tecnicamente si possa manipolare la risposta con javascript/jquery prima di iniettarli nella pagina, sarà molto più facile farlo immediatamente dopo essere stati aggiunti (come da documento pronto).

In secondo luogo: non sono sicuro di quanto sarebbe efficace quel metodo se aggiungessi qualcosa come un datepicker. Suppongo che tu non possa aggiungere un datapicker a un elemento prima che tutto sia nella pagina (solo una supposizione). Quei widget dell'interfaccia utente di jQuery hanno molto da fare in background.

Ti suggerisco di seguire il consiglio del Matt.

Se si chiama $ .post, la funzione di callback è lo stesso come il vostro $ (document) funzione .ready, si chiamerà non appena la risposta è disponibile in modo che si possa fare qualcosa di simile:

$.post(url, data, function(response) { 
    $("#some_element").append(response); 
    // Now your element has been injected you can do whatever u like here 
    // call some function etc. 
}); 

Questo è il modo migliore per farlo. La manipolazione verrà eseguita non appena i dati sono stati iniettati nella tua pagina come $ (documento) .ready.

Se pensi che ci sia un po 'di ritardo con quello che stai facendo e non vuoi che i tuoi utenti vedano, quindi imposta display per nascondere e quindi sbiadire o mostrare una volta che la manipolazione è stata eseguita.