[jQuery] Actie op .load verkregen list

[Rainmaker1987]

Tijdens het laden van een pagina haal ik via jQuery.load() een lijst op (<ul> etc.) op deze lijst zou ik een functie (expandCollapse()) willen uitoefenen. Een lijst die ik er handmatig in heb gezet ondergaat wel de gewenste behandeling, maar het dynamische gedeelte niet.

Een zoekactie leverde mij op dat dit komt doordat later geladen data, niet door jQuery verwerkt kan worden behalve wanneer er een .live (of beter .delegate) en tegenwoordig de nieuwe .on( events [, selector] [, data], handler ) gebruikt wordt.

Ik heb dit uiteraard geprobeerd maar ik krijg het alsnog niet aan de gang. Even mijn code:

JavaScript:

//function to retrieve the data at startup  
 $(document).ready
 (
    function()
    {
       knownData();
       expandCollapse();
    }
 );

knownData() is verantwoordelijk om een pagina met daarin de list te laden in #DataKnown en expandCollapse() voor en kunnen in en uitklappen van de lists (de uitklapbare <li> items moeten dan de class category hebben).

Ik had de hoop dat deze volgorde van aanroepen al voldoende zou zijn, maar ook het aanvullen van deze code met $('#DataKnown').on('change', expandCollapse()); blijkt niet te werken. De vraag is dus: hoe krijg ik expandCollapse werkend op #DataKnown

[Creepy]

Hoe laadt knownData de data? Als je dat met ajax asynchroon doet, dan kan de expandCollapse al aangeroepen worden voordat knownData klaar is.

Los daarvan hoosr javascript in Webdesign, Markup & Clientside Scripting en niet in Programming dus ik heb dit topic verplaatst.

[Rainmaker1987]

Excuses voor de verkeerde locatie. knownData is heel simpel op het moment (het moet nog worden uitgebreid met Session_id's etc maar om te testen het even simpel gehouden):

JavaScript:

function knownData()
{
    $('#DataKnown').load('known_data.php');
}

En dit gaat dus asynchroon, vandaar ook mijn verhaal over .on() en .live() want daardoor bestaat inderdaad het probleem dat expandCollapse() eerder is aangeroepen dan knownData() hoewel in de volgorde ik eerst dataKnown aanroep.

Moet ik dan soms een ready statement aan dataKnown toevoegen, en dat dan pas expandCollapse plaatsvind?

[Flowmo]

.load() heeft een callback functie welke afvuurt zodra .load() klaar is met laden. Maak daar gebruik van, daar zijn ze o.a. voor bedoeld.

Edit: zie http://api.jquery.com/load/

[ Voor 13% gewijzigd door Flowmo op 12-12-2011 11:40 ]

[Rainmaker1987]

@Flowmo: bedankt voor deze test werkt het inderdaad. Waarom ik dit niet gebruikte is mij een raadsel. De success en vooral error heb ik veelvuldig gebruikt in het werkzaam krijgen van het laden van alles.

Even voor toekomstige mensen die de oplossing willen zien:

JavaScript:

//Insert the known data 
function knownData()
{
    $('#DataKnown').load('known_data.php', 
      function(response, status, xhr) 
      {
         if (status == "error") 
         {
             var msg = "Sorry but there was an error: ";
             $("#DataKnown").html(msg + xhr.status + " " + xhr.statusText);
         }
         else
           expandCollapse();
      });
}

Het gaat hierbij dus om het gedeelte vanaf function dat expandCollapse aanroept nadat load is uitgevoerd.