Avatar billede AnyFellow Mester
18. januar 2012 - 09:15 Der er 15 kommentarer og
1 løsning

Link i ajax-loaded indhold i DIV

Hej

Jeg arbejder i øjeblikket på en indkøbskurv, men er i forbindelse med dette spørgsmål rendt ind i yderligere et problem: http://www.eksperten.dk/spm/955415

Jeg loader mit indhold i en div, hvilket fungerer perfekt. Men jeg havde ikke lige overvejet hvordan jeg håndterer at en vare tages ud af min indkøbskurv igen. Dette havde jeg forestillet mig skulle ske vha. et link ud for varen i indkøbskurven.

Er det muligt at holde alle klik i min div indenfor div'en?

Altså hvis jeg klikker på et link i div'en, er det kun div'en der bliver opdateret?
Avatar billede keysersoze Guru
18. januar 2012 - 09:39 #1
Ikke direkte nej - et link er et link det har et reelt target. Skal dit link derfor kun opdatere din div skal du fortsætte i samme stil som i dit andet spørgsmål, nemlig brug af AJAX.
Avatar billede AnyFellow Mester
18. januar 2012 - 10:05 #2
Okay, så det dokument jeg loader skal indeholde det samme ajax som mit hoveddokument, således det kun er div'en der opdateres?
Avatar billede AnyFellow Mester
18. januar 2012 - 10:12 #3
Jeg har nu 3 dokumenter jeg tester med, som ser ud til at virke.

test.htm
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<a class="refresh" href="indhold1.html?value=xxx&value2=xxx&value3=xxx">click</a><br>
<br>

<script type="text/javascript">
    $(function() {
      $(".refresh").click(function(evt) {
          evt.preventDefault();
          //$("#loaddiv").load($(this).attr('href'))
          $.ajax({
  url: $(this).attr('href'),
datatype: "html",  success: function(data){
$("#loaddiv").html(data)
  }
});
      });
    });
</script>

<div id="loaddiv" style="width:400px;height:200px;background-color:#ff0000;"></div>


indhold1.htm
<script type="text/javascript">
    $(function() {
      $(".refresh").click(function(evt) {
          evt.preventDefault();
          //$("#loaddiv").load($(this).attr('href'))
          $.ajax({
  url: $(this).attr('href'),
datatype: "html",  success: function(data){
$("#loaddiv").html(data)
  }
});
      });
    });
</script>

indhold1.htm<br>
<a class="refresh" href="indhold2.html">click</a>


indhold2.htm
<script type="text/javascript">
    $(function() {
      $(".refresh").click(function(evt) {
          evt.preventDefault();
          //$("#loaddiv").load($(this).attr('href'))
          $.ajax({
  url: $(this).attr('href'),
datatype: "html",  success: function(data){
$("#loaddiv").html(data)
  }
});
      });
    });
</script>

indhold2.htm<br>
<a class="refresh" href="indhold1.html">click</a>


Rent fagligt, er det så en stabil løsning jeg har gang i, eller er det total modsat af hvordan man ville gøre tingene.

I mit fulde setup vil der være en hovedside der viser mine produkter. Klikket man på en vare, vil indkøbskurven bliver opdateret med 1 stk. af varen. Klikker man på samme vare vil antallet stige til 2. Indkøbskurven vil være en php-fil, der håndterer hvad man har stoppet i kurven og til hvilken pris. I indkøbskurven er der 2 muligheder for at klikke på noget:
1. Et link til at fjerne varen med.
2. Et link til at "Gå til kassen".
Avatar billede keysersoze Guru
18. januar 2012 - 11:08 #4
Jeg kan ikke helt gennemskue om det er den rigtige vej eller ej - men et par ting der nok kan nævnes er; Jeg ikke kan se hvorfor du vil have det præcis samme javascript i flere filer - det burde vel kun ligge i test.htm. Jeg ville nok loade rene data, fx i JSON, fremfor HTML og så bruge javascript til at opdatere visningen (omend det nok gør udviklingen mere kompleks). Og endelig, nu er der nok mere i det end bare ovenstående, men med udgangspunkt i ovenstående behøver du vel kun din test.htm og så én datakilde.
Avatar billede AnyFellow Mester
18. januar 2012 - 11:28 #5
keysersoze...> Når jeg fjerner javascriptet fra de andre dokumenter fungerer det ikke. Skal jeg gøre noget anderledes?

Korrekt at jeg kun skal have 2 sider (min hovedside og min side der fungerer som datakilde).
Avatar billede olebole Juniormester
18. januar 2012 - 15:15 #6
<ole>

Jeg fulgte, som du ved, også den forrige tråd, og jeg forstår heller ikke, hvad du skal bruge tre dokumenter til. Jeg tvivler på, keysersoze mente, du skulle fjerne scriptet fra de to filer - jeg tror, han ligesom jeg undrer sig over, hvad du bruger dem til. Hvorfor er der tre?

Og så må jeg give keysersoze ret: At HTML-formatere data på serveren er en komplet misforståelse af Ajax - og en af de mest effektive måder til at undgå Ajax's store fordele. Responsen bør i stedet XML- eller JSON-formateres, men det kræver, at man selv kan kode og ikke er tvunget til at bruge tredieparts 'black-boxes'.

/mvh
</bole>
Avatar billede AnyFellow Mester
18. januar 2012 - 16:58 #7
Jeg synes nu, at jeg ret klart har skrevet, at jeg skal bruge 2 sider (en hovedside og en side der skal være min indkøbskurv).

De 3 sider anvendt ovenfor, er lavet for at kunne teste løsningen lettest muligt, uden at skulle uploade til min webserver hver gang.

Jeg kan stort set ikke programmere i java, og synes derfor ovenstående løsning er et godt alternativ, idet jeg opnår en løsning jeg selv kan vedligeholde og videreudvikle.

Datamængden der sendes til klienten hver gang en bruger klikker på et link vil være minimal, så jeg har svært ved at se hvor meget bedre det vil fungere kun med datasættet sendt til klienten.

Jeg gik i overvejelser omkring at betale mig fra at få en ajax-indkøbskurv, men har ikke umiddelbart nogen i mit netværk der vil kunne løse problemet.
Avatar billede AnyFellow Mester
18. januar 2012 - 17:02 #8
Hvis en af jer er interesseret i at lave den korrekte løsning for mig (ajax-delen), mod betaling naturligvis, må i meget gerne sige til.
Avatar billede olebole Juniormester
18. januar 2012 - 17:16 #9
Forleden læste jeg en helt ubetalelig kommentar:
"Internettet gør os ikke mere ubegavede. Det har blot gjort det så meget lettere at møde dem, der er det!"

Vi kan hermed konstatere, at det må være lykkedes for dig at møde et par stykker. Uanset, hvor tydeligt du mener at have forklaret dig, forstår jeg i hvertfald stadig ikke, hvad du skal bruge tre filer til  =)
Avatar billede keysersoze Guru
18. januar 2012 - 18:16 #10
Jeg ville have javascriptet liggende ét sted - i dit hoveddokument - og når dit indhold var replaced, uanset om det er med html, json eller xml som kilde, ville jeg binde click-eventen på igen.
Avatar billede olebole Juniormester
18. januar 2012 - 18:24 #11
Mon ikke det så ville være smartere at lægge en handler på det omkransende element og kikke på event.target||event.srcElement?

Man skal passe på med at oprette og nedlægge elementer, hvis man samtidig knytter handlers til dem. Det resulterer meget let i memory leaks  =)
Avatar billede AnyFellow Mester
18. januar 2012 - 19:18 #12
olebole...> Jeg startede oprindelig med 2 dokumenter (test.html, indhold1.html). Javascriptet var i test.html. Når jeg klikkede på et link i test.html, opdaterede den indholdet i min div, med indholdet fra indhold1.html

Jeg blev så mere avanceret, og ville gerne have et link i indhold1.html, som jeg kunne klikke på, og den skulle så opdatere indholdet i div'en igen. For at kontrollere at dette virkede, lavede jeg indhold3.html, som den så skulle vise indholdet af.

Det er ikke planen at de 3 filer skulle bruges til andet end test.

Min grundlæggende idé, et at have et hoveddokument (f.eks. index.php) med varer. Når man klikker på et link ud for en vare, skal div'en opdateres med  shop.php, der viser den vare man har valgt at købe. Ud for varen i div'en, er der et link man kan klikke på, for at få varen fjernet fra kurven igen.

Jeg er helt blank på hvad i mener i #10 og #11.

Jeg vil også gerne kunne nøjes med at have java-scriptet liggende ét sted, men ved ikke hvordan jeg skal gøre dette, idet det ikke fungerer hvis jeg fjerner det fra indhold1.html. Når jeg klikket på linket i indhold1.html (der ligger i min div), opdateres hele siden (og ikke kun div'en) med indholdet fra indhold2.html.
Avatar billede olebole Juniormester
19. januar 2012 - 15:37 #13
Du har fundamentalt misforstået Ajax. Man henter ikke HTML-kode med Ajax, men XML eller JSON - men du står absolut ikke alene med den misforståelse.

Desværre har w3schools oprettet en såkaldt 'tutorial' om såkaldt 'Ajax', men som så meget andet på det skodsite, er den ikke to ører værd ... tværtimod! Den har skadet langt mere end gavnet!

Den omtalte 'tutorial' har gjort, at titusindvis af kodere fejlagtigt tror, de har lært, hvad Ajax er. Det har sredt sig ud til adskillige libraries, som tilbyder mulighed for at hente og indsætte HTML, på trods af, at det er en totalt misforståelse og mere end dumt at gøre. I stedet har de lært, hvordan en totalt inkompetent klaphat gør - og hans fremgangsmåde er alt andet end kopieringsværdig!

Når man bruger Ajax henter man XML- eller JSON- formaterede data. Når disse returnerer til browseren, indsættes de i elementer, som oprettes med DOM - og elementerne indsættes herefter i dokumentet med DOM.
Avatar billede AnyFellow Mester
20. januar 2012 - 08:50 #14
Jeg kendet heldigvis godt w3schools i forhold til css/html/php, og holder mig normalt langt væk fra deres tutorials.

Jeg kan ikke programmere i java overhovedet, hvilket vel vil gøre opgaven med at lave den rigtige løsning stort set håbløs?

Efter hvad jeg læser, ser det i hvertfald ud til at det er vanskeligt at programmere java'en, således den fungerer cross-browser.

Jeg må lede i mit netværk, efter en der kan lave opgaven for mig, idet det er vigtigt at den bliver lavet korrekt.

olebole og keysersoze...> Læg et svar og der er point på vej.
Avatar billede olebole Juniormester
20. januar 2012 - 14:39 #15
Ellers tak, jeg samler ikke point  =)

En lille detalje er, at sproget, du tænker på, hedder JavaScript. Det har stortset kun fire ting tilfælles med sproget Java - nemlig J, A, V og A. Det er to fuldstændig forskellige sprog  *o)
Avatar billede keysersoze Guru
20. januar 2012 - 18:09 #16
svar - hvis jeg fortjener point :)

I øvrigt, der er ingen der har sagt at det skal være let at være udvikler - dine spørgsmål er ikke særlig gamle og det tager lidt mere end et par timer at sætte sig grundigt ind i javascript og et hvilket som helst andet sprog og for mig lyder det ikke som om du for alvor har forsøgt - men jeg kan selvfølgelig let tage fejl.
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