Menu
Is there an accepted way to guarantee that an ajax function has
finished loading information from a file. I appears that the script continues
processing without having the information available to process. 😮
The sequence in my script starting at the <body onload=> is:
1. Load contents of an external text file into a <textarea>
2. Form an array of the lines of the file loaded (splitting at the ‘n’)
3. Display the contents of the processed array using a <select>.
I used the idea (without the ajax function) from another forum post.
See: [url]http://www.webdeveloper.com/forum/showthread.php?t=182985
Here is my attempt.
Note, if you try it, that the select box will work correctly after you click the top button
(process data) to re-process the textarea information, but not before.
But it just repeats what part of the onload did, so there should be no difference. ???
[code=php]
<html>
<head>
<title>SKU database</title>
<script type=”text/javascript”>
var SKUhash = {}; // pseudo-hash
// From: http://www.w3schools.com/ajax/ajax_serverscript.asp
function ajaxFunction(filename, ids) {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) { // Internet Explorer
try { xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”); }
catch (e) {
try { xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”); }
catch (e) {
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
xmlHttp.onreadystatechange=function() {
if (xmlHttp.readyState==4) {
document.getElementById(ids).value=xmlHttp.responseText;
}
}
xmlHttp.open(“GET”,filename,true);
xmlHttp.send(null);
}
/* next function made no difference if a delay was inserted before processing
function pausecomp(millisec) { // attempt to wait before more processing
var date = new Date();
var curDate = null;
do { curDate = new Date(); } while (curDate-date < millisec);
}
*/
function LoadData(fname) {
var SKUs = new Array();
ajaxFunction(‘SKU.txt’,’Info’);
}
function ReadData() {
// pausecomp(1000);
var RecStr = document.getElementById(‘Info’).value;
SKUs = RecStr.split(“n”);
str = SKUs.shift(); // drop comment record
for (i=0; i<SKUs.length-1; i++) {
str = SKUs[i];
var A=str.split(‘,’);
SKUhash[A[0]]=A.join(‘,’); // form pseudo-hash record with same contents as string input
}
// alert(SKUs.join(‘n’));
}
</script>
<script type=”text/javascript” language=”javascript”>
// From: http://www.webdeveloper.com/forum/showthread.php?t=182985
/*
// (and modified format in ScriptSKUs.txt)
# Contents of SKUselect.js === (posting,) sku,title,industry,nsn,industry,msrp
BLK-30-7,M.O.D. Keating Hornet Automatic Folding Knife,TLE, ,0,249.99
BLK-30-8,M.O.D. Keating Hornet Serrated Edge Automatic Folding Knife; Black Finish, , ,0,249.99
*/
function showValue(box, outputID) {
if (box == ”) { return; }
var dataString = SKUhash[box];
document.getElementById(‘itembuybox2’).innerHTML=dataString;
}
</script>
</head>
<body onload=”LoadData(‘SKU.txt’);ReadData()”>
<form name=”GetItem” method=”post” action=”#”>
Item:
<select name=”Items” id=”ItemSelect” class=”select” onchange=”showValue(this.value,’itembuybox2′);”>
<option value=”” selected=”selected”>Choose an item</option>
<option value=”BLK-30-7″>M.O.D. Keating Hornet Automatic Folding Knife</option>
<option value=”BLK-30-8″>M.O.D. Keating Hornet Serrated Edge Automatic</option>
</select>
</form>
<div id=”itembuybox2″>
</div>
<p>
<button onClick=”ReadData()”>Process textarea</button><br />
<textarea id=”Info” rows=”10″ cols=”120″></textarea>
<button onClick=”LoadData(‘SKU.txt’)”>Reload SKU.txt</button><br />
</body>
</html>
External ‘SKU.txt’ file looks like this:
[code]
# Contents of SKUselect.js === sku,title,industry,nsn,industry,msrp
BLK-30-7,M.O.D. Keating Hornet Automatic Folding Knife,TLE, ,0,249.99
BLK-30-8,M.O.D. Keating Hornet Serrated Edge Automatic Folding Knife; Black Finish, , ,0,249.99
Thanks in advance for any thought about my problem.
?