Avatar billede mcclaud Nybegynder
23. februar 2014 - 20:57 Der er 7 kommentarer og
1 løsning

Url via XMLHttpRequest OnClick

Hej alle eksperter

Mit projekt:
http://www.halfmen.dk/TEST/alltime/alltimestatistik.htm

Jeg arbejder på et projekt men er strandet med et mindre problem. Jeg kunne godt tænke mig, at man med knapperne helt til højre (All Time / 2014 osv.) kan lave en onClick funktion, så forskellige XML-dokumenter kan vælges med et klik på knapperne.

Lige nu åbner siden og indlæser:
xmlhttp.open("GET","xml-alltimestatistik.xml",false);
og det er fint, at siden starter sådan. Kan man lave et simpelt javascript, så man kan ændre xml-urlen ved et enkelt klik?

Jeg har lavet en ekstra xml-fil til test, som er opsat på præcis samme måde som den xml-fil, der automatisk indlæses. Den har titlen: xml-2014statistik.xml

Jeg håber, at I kan hjælpe...

:o) mcclaud
Avatar billede HBP2 Praktikant
24. februar 2014 - 20:12 #1
Da du alligevel loader jQuery, så kan du ligeså godt bruge
  $.get()
istedet for at bruge
  xmlhttp.open()

Hvis du laver en function a la:
  function loadXML(filename) {
    $.get(filename, [], function(xml) {
      // gør hvad der nu end skal gøres med XMLen
    }, 'xml');
  }
så skal du bare kalde den funktion med et filnavn som afhænger af hvilken knap der blev trykket på. I samme omgang vil jeg foreslå dig at bruge JSON istedet for XML, det er som regel nemmere at have med at gøre.

Hvis du f.eks. vil have en funktion til at blive kaldt hver gang der trykkes på en af sorterings knapperne, så brug:

$.('ul.section-sort-view li.sort').click(function() {
  var sortby = $(this).attr('data-sort'); // tag sortby fra <li>
  loadXML('sorted-'+sortby+'.xml'); // eller noget i den stil
});
Avatar billede mcclaud Nybegynder
24. februar 2014 - 23:11 #2
Hej HBP2

Jeg har efter bedste evne (som på dette område desværre ikke er så god) prøvet at nørkle med dit forslag, og jeg har ikke kunne få det til at fungere. Jeg har stærkt inspireret at dit forslag fundet frem til noget som vist nok er 'tæt' på at virke???

Se her (bemærk ny sti)
http://www.halfmen.dk/TEST/alltime/alltimestatistik-test.htm

Her forsøger jeg mig med dette script:

----------
function loadXMLDoc(filename)
{
(window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
xmlDoc=loadXMLDoc('xml-alltimestatistik.xml');
----------

Det hele ser rigtigt ud, men når jeg klikker på knappen herunder ændrer indholdet sig ikke som ønsket til det andet xml-indhold:

----------
<li onclick="loadXMLDoc('xml-2014statistik.xml')">2014</li>
----------

Jeg vil gerne have siden til at starte op med 'xml-alltimestatistik.xml', som den gør nu, og jeg vil gerne have den til at skifte indhold ved klik på knappen.

Jeg håber meget, at du kan hjælpe, så jeg kan bevare den øvrige del af siden.

På forhånd mange tak...

:o) mcclaud
Avatar billede HBP2 Praktikant
25. februar 2014 - 18:39 #3
Desværre orker jeg ikke at gennemlæse alm. javascript - der er alt for tungt; sådan noget som:
  document.write(x[i].getElementsByTagName("SPILLER")[0].childNodes[0].nodeValue)
er vildt trættende at læse.
Men det ser ud som om loadXMLDoc() ikke bruger den læste XML fil til noget som helst.
Avatar billede mcclaud Nybegynder
25. februar 2014 - 21:39 #4
Hej HBP2

Det er selvfølgelig fuldt forståeligt... Jeg er rigtig glad for, at du tager dig tid til at kigge på min sag.  :o)

Hvis vi nu dribler videre med dit forslag. Kan du lave pixie-udgaven, så vil jeg med største glæde forsøge at inkoorporere det. Kan du hjælpe med at fylde 'hullerne' herunder?

----------
function loadXML(filename) {
  $.get(filename, [], function(xml) {
    // gør hvad der nu end skal gøres med XMLen
  }, 'xml');
}
----------

Hvad skal der stå i stedet for de kantede paranteser '[]' i linje 2? og kan du give et kort eksempel på opbygningen bag udtrykket 'gør hvad der nu end skal gøres med XMLen'?

Og til sidst. Kan du give et eksempel på en knap, der kalder scriptet. Ser den sådan ud:

----------
<li onclick="loadXMLDoc('xml-2014statistik.xml')">2014</li>
----------

På forhånd tak
mcclaud  :o)
Avatar billede HBP2 Praktikant
25. februar 2014 - 22:27 #5
Det er utvivlsom muligt at få din eksisterende kode til at virke, jeg synes bare den slags javascript er svær at arbejde med.
Der skal ikke stå noget i [] parenteserne, men jeg skulle have skrevet {} - det er en liste med parametre til GET, og da der ikke er nogen parametre, så skal listen være tom.

Man bør prøve at undgå at skrive javascript i onclick="", det er en uheldig sammenblanding af HTML og javascript. Istedet bør hver <li> tilhøre en klasse, f.eks. 'section-sort-view' som du brugte tidligere, og skal så indeholde filnavnet i en eller anden attribut (du brugte vist tidligere 'data-sort'). Derefter fanger du click på alle <li> med den klasse - på een gang, blot ved at kalde:
  $('li.section-sort-view').click(function() {
    // find ud af hvilken fil som skal vises
    // this indeholder det element der blev trykket på
    var filename = $(this).attr('data-sort');
    // hent og vis filen
  });

Huske at skrive en masse ud til konsollen med
  console.log('nu gør jeg det her');
så du kan finde ud hvor tingene stopper, hvis der da ikke lige frem opstår fejl som rapporteres.
Avatar billede mcclaud Nybegynder
02. marts 2014 - 17:03 #6
Hej HBP2

Jeg har prøvet det bedste, jeg kan, men jeg kan ikke få dit script til at fungere - hverken vedr. skift af xml-fil eller de smartere knapper til sortering... men det er helt sikkert fordi, jeg ikke er skarp nok.

Jeg vil meget gerne uddele points til dig for din ihærdighed, så smid et svar, så er der point på vej...  :o)

Sådan her endte min løsning, og det virker i hvert fald i de nyeste udgaver af IE, FF og Chrome:

http://www.halfmen.dk/TEST/alltime/alltimestatistik.htm

:o) mcclaud
Avatar billede mcclaud Nybegynder
07. marts 2014 - 10:46 #7
Hej HBP2

Smid et svar, så er der point på vej.

:o) mcclaud
Avatar billede mcclaud Nybegynder
15. marts 2014 - 18:05 #8
Hej NBP2

Da du ikke har smidt et svar efter lang tid, lukker jeg spørgsmålet. Endnu engang tak for dit forsøg.

mvh mcclaud
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