Vraag over array vullen en lezen mbv jquery

Status
Niet open voor verdere reacties.
B

BrouwerB

Gebruiker
Lid geworden
24 jan 2012
Berichten
8
Wie kan mij helpen met het volgende

In het volgende stuk javascript code vul ik eerst de array : testarray met functie haaldata().
Deze wordt vanuit een xml file gevuld. Dit gaat goed

Vervolgens wordt met functie schrijfdata() de inhoud op het scherm getoond.

Ik krijg met geen mogelijkheid de data in testarry op het scherm getoond.

Het lijkt erop dat de inhoud van deze array alleen bestaat binnen functie haaldata().

Graag jullie hulp hierbij.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<script type="text/javascript" src="jquere/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

function initialize(){

var Windsterkte;
var testarray = [];

document.myform.outputtext.value += ( "Data uit XML file positie.xml " + " \n");
haaldata();
schrijfdata();

function haaldata(){
$.get("positie.xml",{},function(xml){

$('Positie',xml).each(function(i) {
Windsterkte = $(this).find("Wind").text();
testarray = Windsterkte;
document.myform.outputtext.value += ( i + " " + Windsterkte + " " + testarray + " \n" );
});
});
};
} // einde haaldata


function schrijfdata() {
for (var i1 = 0; i1 < testarray.length; i1++) {
document.myform.outputtext.value += ( i1 + " " + testarray[i1] + " \n" );
} // einde schrijfdata

} // einde initialize

</script>
</head>

<body onload="initialize()">
<form name="myform">
<td width="448" height="180"> <td><textarea name="outputtext" rows="10"></textarea></td>
</body>
</html>

met de xml file positie.xml

<?xml version="1.0" encoding="utf-8"?>
<Posities>
<Positie>
<Wind>13.0</Wind>
</Positie>
<Positie>
<Wind>12.0</Wind>
</Positie>
</Posities>
 
't Lijkt erop dat je met een callback werkt (Asynchronous JavaScript And XML). Dat houdt in: zodra de request naar positie.xml klaar is, wordt die callback uitgevoerd. Tot de request klaar is gaat 't script alvast verder. In jouw code: haaldata start de request, maar schrijfdata begint al voordat de data daadwerkelijk opgehaald is. Hieronder heb ik de aanroep van schrijfdata verplaatst naar het einde van de callback (r. 17).
[JS]function initialize() {

var Windsterkte;
var testarray = [];

document.myform.outputtext.value += ( "Data uit XML file positie.xml " + " \n");
haaldata();
//schrijfdata(); //staat op de verkeerde plek

function haaldata() {
$.get("positie.xml", {}, function(xml) { //start callback
$('Positie', xml).each(function(i) {
Windsterkte = $(this).find("Wind").text();
testarray = Windsterkte;
document.myform.outputtext.value += ( i + " " + Windsterkte + " " + testarray + " \n" );
});
schrijfdata(); //Hier is de callback klaar en staat de data in testarray.
}); //einde callback
} //einde haaldata

function schrijfdata() {
for (var i1 = 0; i1 < testarray.length; i1++) {
document.myform.outputtext.value += ( i1 + " " + testarray[i1] + " \n" );
}
} //einde schrijfdata

} //einde initialize[/JS]
 
Ok ik begrijp wat je bedoeld. Ik was hier al bang voor dat dit het probleem was.
Is er wellicht een mogelijkheid binnen om het script niet door te laten lopen. Maar eerst de haaldata() function eerst helemaal af te ronden zo dat ik de function schrijfdata () ook elders in mijn programma kan gebruiken.
Ik heb schrijfdata() als simpel voorbeeld gebruikt. Maar wil eigenlijk de inhoud van array tetsarray[] ook in een andere function gebruiken.
Op het www kom ok ook het volgende tegen


$(document).ready(function(){

}

Is dit wellicht een manier om er zeker van te zijn dat het script niet door loopt.

Ik ben zelf geen expert in javascript. Komt allemaal voor mij een beetje onlogisch over, maar vind het leuk om te proberen.
 
Ja, dat kan ook. Je moet dan aangeven (in dit geval aan jQuery) dat je de request synchroon wil uitvoeren.
In je code gebruik je deze syntax:
[JS]jQuery.get( url /*[, data] [, success(data, textStatus, jqXHR)] [, dataType]*/ );[/JS]

Dat is kort voor:
[JS]jQuery.ajax({
url: url,
data: data,
success: success,
dataType: dataType,
async: true //default
});[/JS]
Bron: http://api.jquery.com/jQuery.ajax/

Als je het dus omschrijft naar die tweede manier, kun je aangeven dat het script moet wachten tot de request klaar is (zet async op false).
Zie ook: http://stackoverflow.com/questions/...-synchronous-rather-than-asynchronous-ajax-re

$(document).ready(function(){}) gebruik je om eerst de HTML in je pagina te laden, en dan pas de functie uit te voeren die je meegeeft. Dat is handig wanneer je elementen in je HTML gaat manipuleren (dat gaat immers niet als ze niet geladen zijn ;)).
 
Laatst bewerkt:
Dit begrijp ik, bedankt zover.

Maar waar moet je de code : jQuery.get( url /*[, data] [, success(data, textStatus, jqXHR)] [, dataType]*/ );

precies plaatsen.
 
Dat is wat je al hebt, maar met die syntax wordt de request asynchroon uitgevoerd.

Dit is nu je haaldata:
[JS]function haaldata() {
$.get("positie.xml", {}, function(xml) {
$('Positie', xml).each(function(i) {
Windsterkte = $(this).find("Wind").text();
testarray = Windsterkte;
document.myform.outputtext.value += ( i + " " + Windsterkte + " " + testarray + " \n" );
});
schrijfdata();
});
}[/JS]

Dit wil je ervoor in de plaats hebben:
[JS]function haaldata() {
$.ajax({
url: "positie.xml",
success: function(xml) {
$('Positie', xml).each(function(i) {
Windsterkte = $(this).find("Wind").text();
testarray = Windsterkte;
document.myform.outputtext.value += ( i + " " + Windsterkte + " " + testarray + " \n" );
});
},
async: false //Dit gaat niet met $.get
});
}[/JS]
 
Het werkt, bedankt voor je hulp, was hier niet zelf uitgekomen. Blijft lastige materie.:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan