Oprettet man. d. 12. september 2011 kl. 15:09:24

30 point uddelt | 8 kommentarer

nanonano (1.540 point. Point ude: 0)

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/ (...) 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>

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet man. d. 12. september 2011 kl. 15:21:34| #1

softspot (101.915 point)
www.softspot.dk

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.

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet man. d. 12. september 2011 kl. 15:43:33| #2

nanonano (1.540 point)

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?

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet man. d. 12. september 2011 kl. 16:04:08| #3

softspot (101.915 point)
www.softspot.dk

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...

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet man. d. 12. september 2011 kl. 17:22:42| #4

nanonano (1.540 point)

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"));
});
});
...

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet man. d. 12. september 2011 kl. 17:48:11| #5

softspot (101.915 point)
www.softspot.dk

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.

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet man. d. 12. september 2011 kl. 17:54:48| #6

nanonano (1.540 point)

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 :-)

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet man. d. 12. september 2011 kl. 18:12:41| #7

Accepteret svar!30 point tildelt

softspot (101.915 point)
www.softspot.dk

Velbekomme :-)

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Skrevet ons. d. 14. september 2011 kl. 18:15:59| #8

lone_a_p (12.000 point)

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

Anmeld misbrug

Skriv et svar | Skriv en kommentar

Log ind

Opret bruger | Glemt adgangskode

Seneste spørgsmål

Hjælp til validering

Oprettet den 26. maj 2012 kl. 14.01

Stefan1 giver 20 point for svar | Giv et svar »

Javascript sliders?

Oprettet den 24. maj 2012 kl. 11.29

NizeGuy giver 15 point for svar | Giv et svar »

Validere navn i form

Oprettet den 22. maj 2012 kl. 15.13

13thsky giver 60 point for svar | Giv et svar »

Seneste guides

Hjælp til opsætning af IP-cam samt alm. netværks...

22. maj 2012 kl. 00.07 | Læs »

See Kessler vs. Green fight in your living room on pc

19. maj 2012 kl. 21.11 | Læs »

Ny god bærbar til tunge programmer

17. maj 2012 kl. 17.23 | Læs »

PSA-diagnosticering og -fejlkoder (Pre-Boot System...

9. maj 2012 kl. 11.12 | Læs »

Dell pc-diagnosticering - Problemer med din Dell...

7. maj 2012 kl. 14.38 | Læs »

Se alle guides »

Seneste nyheder

Galleri: De fedeste håndholdte gennem 40 år

25. maj 2012 kl. 16.04 | Læs »

Min Mac er under angreb - Apple skal tage det alvorligt

25. maj 2012 kl. 14.30 | Læs »

Landmænd låst fast til konkursramt bredbånds-firma

25. maj 2012 kl. 14.04 | Læs »

Her er din næste digitale gadget: En "Phablet"

25. maj 2012 kl. 13.40 | Læs »

Læserne: Her er vores værste it-indkøb

25. maj 2012 kl. 13.31 | Læs »

Se alle nyheder »

Tips & Tricks fra PC World

Læserne: Her er vores værste it-indkøb

Det er ikke al it-udstyr, som er det rene guld. Her er nogle af læsernes skrækhistorier.

Læs mere »

Anmeldelser fra PC World

Test: Mobil med Ferrari-design - og en Trabant-motor

Motorola har begået endnu en smartphone med lækkert design og potentiale til at være blandt de bedste. Men den når ikke i mål. Se her hvorfor.

Læs mere »

Seneste blogindlæg

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...

Læs mere »