Avatar billede nanonano Nybegynder
12. september 2011 - 15:09 Der er 7 kommentarer og
1 løsning

jQuery + Ajax: Link i nested Ajax?

Hej Experter

Jeg er newbie mht. jQuery og har følgende spørgsmål:

Hvordan fanger jeg et klik på et link inden i den side jeg har loadet med en .load().

Jeg har følgende nedenstående to sider (page1.php loader page2.php). Efter at page2.php?id=5 er loadet, skal efterfølgende klik på link'ene load'es i samme div (container).

I første omgang er der vist noget med at .live() skal benyttes, for at elementer opdateres efter load, derudover er jeg lidt blank.

Jeg håber at I forstår problemet, og har tid, lyst og lejlighed til at svare :-)


page1.php:
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#container").load("page2.php?id=5");
    });
    </script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

page2.php:
<html>
<head>
<body>
    <a href="page2.php?id=<?=($_GET["id"]-1)?>">One down</a><br>
    <a href="page2.php?id=<?=($_GET["id"]+1)?>">One up</a><br>
</body>
</html>
Avatar billede softspot Forsker
12. september 2011 - 15:21 #1
Jeg mener brugen af live i jQuery er:

{div]$("#container").live("click", function() {
  // går hvad der skal gøres...
});[/div]
Således du fanger click-eventet i alle elementer som er og i fremiden bliver loaded i elementet med id="container".

Jeg vil umiddelbart mene at du skal fjerne alle html, head og body-elementer fra den side du loader, da du ellers loader html-koder ind i en del at DOM, som ikke tillader dette...

Hvis du bruger page2.php som både en fuld side og en delvis side, så du nok sørge for at sondre mellem disse load-tilstande i koden til page2.php.
Avatar billede nanonano Nybegynder
12. september 2011 - 15:43 #2
Hej softspot

Det tror jeg du har ret mht. live. Men hvilken selector (tror jeg nok det hedder :-) skal jeg benytte for at fange klikket på linket?
- altså, hvad bør der stå der hvor du har skrevet //gør hvad der skal gøres?
Avatar billede softspot Forsker
12. september 2011 - 16:04 #3
Ja, det er nok korrekt at selectoten skal ændres til at fange de elementer hvortil click-funktionen skal knyttes i stedet for på containeren. Du har flere muligheder for at gøre dette. Det letteste ville nok være at knytte en class til elementerne (up og down-links i dit tilfælde), men du kan fange dem på mange andre måder, f.eks. vha. regex-lign mønstre:

$("a[href^=page2.php]").live("click", function() {
  // går hvad der skal gøres...
});

Dette burde finde de a-elementer som linker til noget som starter med "page2.php". Dog kunne jeg have en mistanke om at href bliver ændret til en fuld url med http:// osv, så det er nok ikke den mest sikre metode. Du kunne så vælge at benytte a[href*=page2.php] (altså "indeholder"), men det er jo heller ikke skudsikkert. Så vi er tilbage ved class-atributten, hvis det skal være rigtig nemt :-)

Eksempelvis:

$(".navigation-link").live("click", function() {
  // går hvad der skal gøres...
});

Hvis du så sætter class="navigation-link" på de to links i page2.php...
Avatar billede nanonano Nybegynder
12. september 2011 - 17:22 #4
Hej softspot

Jep, hvis jeg benytter følgende:
...
$(document).ready(function(){
  $("#container").load("page2.php?id=5");
  $(".navigation-link").live("click", function() {
      //gør hvad der skal gøres
      alert('link clicked!!!');
  });   
});
...
- bliver alert'en eksekveret, men page2.php?id=4 bliver loadet og står i location. Altså man forlader page1.php.

Så hvordan får jeg re-load'et container'en med den nye url?

Nedenstående virker ikke, men er det noget á la:
...
  $(document).ready(function(){
      $("#container").load("page2.php?id=5");
      $(".navigation-link").live("click", function() {
        $("#container").load($("a#navigation-link").attr("href"));
      });   
  });
...
Avatar billede softspot Forsker
12. september 2011 - 17:48 #5
Umiddelbart er din selector heller ikke den samme inde i click-handleren, så hvis du ændrer den til nedenstående virker det måske:

  $(document).ready(function(){
      $("#container").load("page2.php?id=5");
      $(".navigation-link").live("click", function() {
        $("#container").load($(this).attr("href"));
        return false;
      });   
  });

Jeg har ændret din selector til det aktuelle element (det der er blevet klikket på) og indsat en linje med return false, for at undgå default-handlingen for klikket på linket.
Avatar billede nanonano Nybegynder
12. september 2011 - 17:54 #6
Yes, softspot!!!

Tak for kampen :-)

Nedenstående virker:
...
$(document).ready(function(){
  $("#container").load("page2.php?id=5");
  $(".navigation-link").live("click", function() {
      // alert($(this).attr('href'));
      $("#container").load($(this).attr('href'));
      return false;
  });   
});
...

Hvis du smider et svar, kvitterer jeg med point :-)
Avatar billede softspot Forsker
12. september 2011 - 18:12 #7
Velbekomme :-)
Avatar billede lone_a_p Praktikant
14. september 2011 - 18:15 #8
Hej Nanonano,

Jeg er også newbie i jquery mobile og faldt lige over dit indlæg. Jeg har selv haft problemer med "click" og måtte bruge "mousedown" i stedet, for at det virkede på Android.

Blot et tip, hvis du støder på samme problem :)

Mvh Lone
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester