(AJAX) Funksjon fungerer kun riktig inline i HTML, ikke i ekstern .js

[Rognalf]

Jeg har en funksjon loadXMLDoc, som tar url som parameter, eks.: loadXMLDoc(findItem.php?iid=3).

 

Inline i HTML funker riktig:

<button type="button" id="button" onclick="loadXMLDoc('findItem.php?iid=3')">Vis varen</button>

 

Henvisning i ekstern .js funker ikke riktig. findItem.php blir lastet inn før jeg har trykket på knappen:

function init() {
 button = document.getElementById('button');
 button.onclick= loadXMLDoc('findItem.php?iid=4');
}
window.onload = init;

 

Hvordan kan jeg fikse den eksterne henvisningen, slik at findItem.php ikke blir lastet inn før jeg trykker på knappen?

[funkyboy]

Du har en funksjon i et eksternt javascript. I denne funksjonen sier du at noe skal skje. Men kaller du ikke denne funksjonen noe sted, vil ikke noe skje. Dette skjer når du forsøker å legge javascriptet i eksternt javascript. Anbefaler ellers bruk av jQuery (blant annet for enkelhetens skyld). Last inn jQuery i head:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

... Og følgende vil fungere utmerket:

 

$().ready(function() {
   $("#button").click(function(){
       // Her kan du si hva som skal skje ved klikk på elementet med id #button. 
   });
});

Ellers ser du trolig at jeg i eksemplet laster inn jQuery fra Google. Dette er et hett tips, da mange allerede har lastet ned javascriptet (ligger i brukerens caché). Du slipper også å bruke båndbredde/hosting, og Google gir en nedlastingstid du ikke vil klare å slå. :!:

Endret 12. april 2010 av bardoien

[Rognalf]

Jeg glemte å vise hele JavaScriptet, Jeg burde kanskje gjort det, beklager. Delen under init-funksjonen er hentet fra AJAX-tutorialen på w3schools.

 

function init() {
 button = document.getElementById('button');
 button.onclick = loadXMLDoc('findItem.php?iid=4');
}
window.onload = init;

var xmlhttp;
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 xmlhttp.onreadystatechange=stateChange;
 xmlhttp.open("GET",url,true);
 xmlhttp.send(null);
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 xmlhttp.onreadystatechange=stateChange;
 xmlhttp.open("GET",url,true);
 xmlhttp.send();
 }
}

function stateChange()
{
if (xmlhttp.readyState==4)
 {
 if (xmlhttp.status==200)
   {
   // process whatever has been sent back here
   document.getElementById('test').innerHTML=xmlhttp.responseText;
   }
 else
   {
   alert("There was a problem in the returned data");
   }
 }
}

 

Ellers setter jeg pris på forslaget. jQuery ser ut til å være veldig fint og flott, men jeg tror jeg vil dra mest fordel utav det ved å beherske litt mer vanlig JavaScript først.

[funkyboy]

Endrer du fra

 

window.onload = init;

 

til

 

window.onload = init();

 

tror jeg du etterhvert har scriptet i boks.

[Rognalf]

Dette endrer dessverre ingenting. Det er slik jeg har gjort det i tidligere javascript også.

[Jonas]

Å endre fra function window.onload = init; til window.onload = init(); er ikke en løsning. Anbefaler at dere leser dere opp på anonyme funksjoner og callbacks. Endre heller fra følgende.

 

function init() {
 button = document.getElementById('button');
 button.onclick= loadXMLDoc('findItem.php?iid=4');
}

.. til følgende.

 

function init() {
 button = document.getElementById('button');
 button.onclick= function(){loadXMLDoc('findItem.php?iid=4');};
}

Hvorfor dette løser problemet (avhengig av at du ikke har noen flere..) lar jeg stå som en liten øvelse.

Endret 12. april 2010 av Jonas

[funkyboy]

Dette endrer dessverre ingenting. Det er slik jeg har gjort det i tidligere javascript også.

 

Ja, se der, hehe! Ser jeg har lest litt feil her. Du skriver at loadXMLDoc kjører uansett. Slik jeg så det, burde ikke denne kjøre i det hele tatt. Løsningen Jonas beskriver her burde ellers fungere.

[Rognalf]

Jonas: Forslaget ditt gjorde riktignok at funksjonen ikke utføres på window.onload, men nå skjer det heller ingenting når jeg trykker på knappen.

[Jonas]

Gief link.

[Rognalf]

Link: http://www.stud.hig.no/~080521/ajax/

[Jonas]

Vel, jeg ser du fortsatt har skrevet window.onload = init(); istedenfor window.onload = init;. Sa det ikke vil løse noe som helst, og med en gang jeg fjernet parentesene fikk jeg noenlunde fine resultater.

[Rognalf]

Oi, glemte å endre det der. Men nå funka plutselig forslaget ditt! Det gjorde det ikke sist jeg prøvde; merkelig.

 

Takk for veldig god hjelp! Nå kan jeg endelig komme meg videre.