[JS] Jquery - .load links

[Verwijderd]

Hoi

Ik heb het volgende script:

code:

function loadContent(contentdiv, url) {
       var theurl = "/url/" + url;        
       $(contentdiv).load(theurl,'', showNewContent);       
}

Hiermee laadt ik het volgende stukje html in:

code:

<div id="vakgebied">
              <ul id="vakgebieden">        
                <li><a href="#portfolio" onclick="loadContent('#portfolioitems', 'portfolio/bekijken/architecture')">architecture</a></li>
               </ul>
</div>

<div id="#portfolioitems">
   hier een tabel
</div>

Dit inladen gaat prima, maar op het moment dat ik op de ingeladen content op een link klik, voert hij wel de loadContent functie uit, maar kan die de #portfolioitems div niet vinden. Omdat die dynamisch is ingeladen.
En in chrome werken de links helemaal niet meer.

Is hier een oplossing voor te vinden of probeer ik iets onmogelijks ?

[Manuel]

Heb je al gekeken via Firebug hoe die wat aanmaakt of dat er een error wordt meegegeven. Hier op GoT gaan we ervan uit dat je zelf ook wat hebt geprobeerd voordat je een topic aanmaakt.

[Verwijderd]

Firebug geeft geen foutmelding.

In de loadContent functie heb ik ook nog het volgende staan:

code:

    if(!($(contentdiv).length)) {
      alert("Het opgegeven element bestaat niet");
      return false;
    }

Deze vangt netjes de fout af, omdat het element via javascript in de DOM is geplaatst herkent hij deze blijkbaar niet.

[Manuel]

Oke dankje..
Wat geeft:

JavaScript:

alert($(contentdiv).load(theurl);     

Dan zou je zeggen dat je content daar moet komen te staan ;-) Verder is dit geplaatst buiten de

JavaScript:

$(function() {
  function vanjezelf() {
       alert('functie binnen de readystate');
  };
});

function vanjezelf () {
     alert('functie buiten de readystate.');
}

readystate of er juist weer binnen?
Plak eens de gehele code, aan snippets hebben we niet veel.

[eamelink]

Fout:
<div id="#portfolioitems">

Goed:
<div id="portfolioitems">

[iBasch]

Waarom gebruik je onclick? JQuery heeft hier juist wat leuks voor bedacht, namelijk de event helpers.

En zoals al gezegd, gebruik de ready event!

[Grijze Vos]

Wat iBasch zegt. Je kunt veel beter netjes in je JQuery code de click events toevoegen:
Even uit de losse pols (niet getest):

HTML:

<div id="vakgebied">
              <ul id="vakgebieden">        
                <li><a href="portfolio/bekijken/architecture" rel="#portfolioitems">architecture</a></li>
               </ul>
</div>

<div id="portfolioitems"></div>

JavaScript:

$(document).ready(function() {

  $("li > a[:rel]").click(function) {
    var theurl = "/url/" + url;        
    $(this.rel).load(theurl,'', showNewContent);
  })

});

[Verwijderd]

eamelink schreef op zaterdag 28 november 2009 @ 17:40:
Fout:
<div id="#portfolioitems">

Goed:
<div id="portfolioitems">

Dat was dus inderdaad het probleem.

Ik ben deze week begonnen met javascript, dus vandaar dat het allemaal nog een beetje knullig in elkaar zit

Toch wil google chrome de html links niet goed inladen, de muis pointer verandert niet in een handje, en als ik er op klik gebeurt er ook niks.

De javascript debugger van chrome geeft geen errors, en google helpt hier ook niet echt mee.

[mocean]

Grijze Vos schreef op zaterdag 28 november 2009 @ 21:06:

JavaScript:

$(document).ready(function() {

  $("li > a[:rel]").click(function) {
    var theurl = "/url/" + url;        
    $(this.rel).load(theurl,'', showNewContent);
  })

});

Hier is de variabele 'url' niet bekend. Dus via de rel zowel de te laden url als de ID van de div meegeven wordt ook lastig. Wellicht is een <a tag hier beter om daarmee tegelijk te zorgen dat e.e.a. kan werken voor zoekmachines zonder javascript.

[Grijze Vos]

oh, dat had this.href moeten zijn.