2011-04-05 14 views
5

Quindi, sto caricando alcuni dati da un'azione MVC3 che restituisce Json, contenente alcuni parametri e contenuto come una stringa. Applico il contenuto ad alcuni div. Nella vista parziale ho un evento JQuery document.ready. Per qualche motivo questa funzione viene eseguita prima che il contenuto sia aggiunto e tutti i selettori che dichiaro nella funzione ready sono vuoti.

Esiste un motivo logico per questo? Sono impostato un timeout, i selettori vedono gli elementi. Ma un timeout può essere molto impreciso.

Qualche suggerimento?

Grazie! Codice

Esempio violino: http://jsfiddle.net/aKxy7/

risposta

0

ho finito per la codifica di un metodo che attende fino a quando un elemento selezionato nel codice HTML caricata tramite la tecnologia AJAX è pronto.

+0

So che questa è una vecchia risposta, ma puoi fornire uno snippet di codice? –

2

Sembra che vi aspettate $(document).ready() al fuoco dopo tutto assests vengono caricati. Non è così che funziona $(document).ready(). Viene attivato quando il DOM ha finito il rendering. Niente di più. Sembra che tu voglia utilizzare $(window).load(), che fa attendere fino a quando tutte le risorse sono state caricate.

+1

La funzione $ (finestra) .load() non viene attivata nelle richieste AJAX poiché non sto eseguendo un postback a pagina intera. –

+0

Suggerimento: $ (window) .load() è deprecato dalla versione 1.8. – robsch

0

$(document).ready() viene chiamato quando l'HTML! è caricato Ciò significa che se il tuo HTML carica qualche javascript che apporta modifiche al DOM HTML, quelli $(document).ready() vengono chiamati prima.

È necessario accertarsi che la funzione sia stata richiamata per ultima o utilizzare setTimeout che si chiama fino a quando non sono stati caricati gli elementi necessari.

0

nel $ (document) funzione .ready è possibile chiamare jQuery $ .ajax o $ GetJSON per ottenere la risposta dal server. Quindi puoi iniettare la risposta JSON dove vuoi. No setTimeout necessario

0

Prima di tutto,

var elementIWannaGet = $('html-content-div'); 

dovrebbe essere

var elementIWannaGet = $('#html-content-div'); 

Tuttavia, ciò che può essere meglio fare è separare lo script dal contenuto, come il Dom è già caricato ...

pensare di cambiare la risposta a questo:

{ result: true, 
    data: { id: '1' }, 
    elementId: '#html-content-div', 
    content: '<div id="html-content-div">Html content! :D</div>' 
} 

e quindi modificare il vostro gestore contentLoaded come segue:

function contentLoaded(response) { 
    if (response.result == true) 
     handleError(response); 

    // Get the container where the response.content will be rendered to. 
    var targetContainer = $('#target-container-id'); 

    // Append the content 
    targetContainer.append(response.content); 

    // Do something with your container 
    alert($(response.elementId).html().length); 
} 
Problemi correlati