HTML <input> button(s) disappear on click - javascript

I am reading an XML file using JavaScript, and this part works as I am getting the data. Here is the XML file:
<bookstore>
<book category="romance">
<title lang="en">Everyday Italian</title>
<author>Giada</author>
<year>2005</year>
<price>30,00</price>
</book>
<book category="cooking">
<title lang="en">Cook Book</title>
<author>Manado</author>
<year>2012</year>
<price>44,00</price>
</book>
<book category="drama">
<title lang="en">Intrigue</title>
<author>L'amion</author>
<year>2002</year>
<price>29,99</price>
</book>
</bookstore>
Now I use JavaScript to display that data in a table. Also, I added two <input> buttons that each have an onclick attribute to call a specific function. One button calls the change() and the other calls remove().
Here is the code for the HTML page and JavaScript:
<html>
<head>
<title>Index</title>
<script type="text/javascript">
function loadXMLDoc(dname) {
if(window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else { // for IE 5/6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", dname, false);
xhttp.send();
return xhttp.responseXML;
}
// function to print all book titles
function printTitles() {
var xmlDoc = loadXMLDoc('bookstore.xml');
var elements = xmlDoc.getElementsByTagName('title')
document.write('<table border="1"><tr><th>Title</th></tr>');
for(i = 0; i < elements.length; i++) {
document.write("<tr>");
document.write(
"<td>" + elements[i].childNodes[0].nodeValue + "</td>");
document.write("</tr>")
}
document.write("</table>");
}
// function to change the first book title
function change(text) {
var xmlDoc = loadXMLDoc('bookstore.xml');
var elements = xmlDoc.getElementsByTagName('title');
var title = elements[0].childNodes[0];
title.nodeValue = text;
printTitles(elements);
}
// function to remove the first book
function remove(node) {
var xmlDoc = loadXMLDoc('bookstore.xml');
var rem = xmlDoc.getElementsByTagName(node)[0];
xmlDoc.documentElement.removeChild(rem);
printTitles(elements);
}
printTitles();
</script>
</head>
<body>
<input type="button" value="change" onclick="change('WORKS')"/>
<input type="button" value="remove" onclick="remove('book')"/>
</body>
</html>
When I click the change button, both buttons disappear.
When I click the remove button, only remove button disappears.
Here are all 3 states of my page (I cannot upload a photo because I don't have the rep):
http://postimg.org/image/5lrwf7rcz/
Now, I already searched for an answer and this question or this question answers didn't help me. I couldn't find a missing closing tag and returning false doesn't change anything.
UPDATE: I ran the debugger on Chrome and when I click the remove button, the remove() function never gets called but when I click the change button, the change() function does get called.

I found a solution so I though I might post it here in case somebody needs it.
First of all, I was missing a semicolon inside the printTitles() at document.write("</tr>") but that wasn't the main reason behind the program not working.
After taking #Teemu's advice on functions createElement, createTextNode, appendChild and reviewing other helpful comments, I changed the code a lot. I used the mentioned functions and added the window.onload check to make sure I can edit the body after the page loads.
XML file stays the same and here is my HTML file with JavaScript:
<html>
<head>
<title>Index</title>
<script type="text/javascript">
window.onload = function() {
// function that loads an XML file through an HTTP request
function loadXMLDoc(dname) {
if(window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else { // for IE 5/6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", dname, false);
xhttp.send();
return xhttp.responseXML;
}
var xmlDoc = loadXMLDoc('bookstore.xml'); // holds the loaded XML file
// builds a string from xml elements containing the HTML code for the body
function buildBody(elements) {
var body = '<table border="1"><tr><th>Title</th></tr>';
for(i = 0; i < elements.length; i++) {
body += "<tr>";
body +=
"<td id='" + i +"'>" + elements[i].childNodes[0].nodeValue + "</td>";
body += "</tr>";
}
body += "</table>";
return body;
}
// prints the input buttons
function printInputs(elements) {
document.body.innerHTML = buildBody(elements);
// button change
var inputChange = document.createElement('input');
inputChange.setAttribute('type', 'button');
inputChange.setAttribute('value', 'Change first title');
inputChange.onclick = function change() { // on click function for the button
document.getElementById(0).innerHTML = 'WORKS';
}
document.body.appendChild(inputChange); // add button to the body
// button remove
var inputRemove = document.createElement('input');
inputRemove.setAttribute('type', 'button');
inputRemove.setAttribute('value', 'Remove first title');
inputRemove.onclick = function remove() { // on click function for the button
document.getElementById(0).innerHTML = '';
}
document.body.appendChild(inputRemove); // add button to the body
}
function printTitles() {
var xmlDoc = loadXMLDoc('bookstore.xml');
var elements = xmlDoc.getElementsByTagName('title');
printInputs(elements);
}
printTitles();
}
</script>
</head>
<body>
</body>
</html>

Related

AJAX return undefined in html document

I have the following xml document
<?xml version="1.0" ?>
<result searchKeyword="Mathematics">
<video>
<title>Chaos Game</title>
<channel>Numberphile</channel>
<view>428K</view>
<link>http://www.youtube.com/watch?v=kbKtFN71Lfs</link>
<image>http://i.ytimg.com/vi/kbKtFN71Lfs/0.jpg</image>
<length>8:38</length>
</video>
<video>
<title>Australian Story: Meet Eddie Woo, the maths teacher you wish you&apos;d had in high school</title>
<channel>ABC News (Australia)</channel>
<view>223K</view>
<link>http://www.youtube.com/watch?v=SjIHB8WzJek</link>
<image>http://i.ytimg.com/vi/SjIHB8WzJek/0.jpg</image>
<length>28:08</length>
</video>
<video>
<title>Ham Sandwich Problem</title>
<channel>Numberphile</channel>
<view>557K</view>
<link>http://www.youtube.com/watch?v=YCXmUi56rao</link>
<image>http://i.ytimg.com/vi/YCXmUi56rao/0.jpg</image>
<length>5:53</length>
</video>
<video>
<title>Magic Square Party Trick</title>
<channel>Numberphile</channel>
<view>312K</view>
<link>http://www.youtube.com/watch?v=aQxCnmhqZko</link>
<image>http://i.ytimg.com/vi/aQxCnmhqZko/0.jpg</image>
<length>3:57</length>
</video>
<video>
<title>The 8 Queen Problem</title>
<channel>Numberphile</channel>
<view>909K</view>
<link>http://www.youtube.com/watch?v=jPcBU0Z2Hj8</link>
<image>http://i.ytimg.com/vi/jPcBU0Z2Hj8/0.jpg</image>
<length>7:03</length>
</video>
</result>
I have created this html file which has an AJAX call to get the xml file but it return all the values as "undefined"
<html>
<head>
<title>A7-Question2</title>
<script>
function getSearch()
{
// create an XMLHttpRequest
var xhttp = new XMLHttpRequest();
//create a handler for the readyState change
xhttp.onreadystatechange = function() {
readyStateChangeHandler(xhttp);
};
//get XML file by making async call
xhttp.open("GET", "A7.xml", true);
xhttp.send();
}
// handler for the readyState change
function readyStateChangeHandler(xhttp){
if (xhttp.readyState == 4){
// readyState = 4 means DONE
if(xhttp.status == 200){
// status = 200 means OK
handleStatusSuccess(xhttp);
}else{
// status is NOT OK
handleStatusFailure(xhttp);
}
}
}
// XMLHttpRequest failed
function handleStatusFailure(xhttp){
// display error message
var displayDiv = document.getElementById("display");
displayDiv.innerHTML = "XMLHttpRequest failed: status " + xhttp.status;
}
// XMLHttpRequest success
function handleStatusSuccess(xhttp){
var xml = xhttp.responseXML;
// print XML on the console
console.log(xml);
// parse the XML into an object
var searchResult = parseXML(xml);
// print object on the console
console.log(searchResult);
// display the object on the page
display(searchResult);
}
// parse the XML into an object
function parseXML(xml){
var resultElement = xml.getElementsByTagName("result")[0];
//create a receipt object to hold the information in the xml file
var searchResult = {};
searchResult.searchKeyword= resultElement.getAttribute("searchKeyword");
var videoElements = xml.getElementsByTagName("video");
//create an array to hold the items
searchResult.videoArray = [];
for(var i=0; i< videoElements.length; i++){
var video = {};
video.title = videoElements[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
video.channel = Number(videoElements[i].getElementsByTagName("channel")[0].childNodes[0].nodeValue);
video.view = Number(videoElements[i].getElementsByTagName("view")[0].childNodes[0].nodeValue);
video.link = Number(videoElements[i].getElementsByTagName("link")[0].childNodes[0].nodeValue);
video.image = Number(videoElements[i].getElementsByTagName("image")[0].childNodes[0].nodeValue);
searchResult.videoArray.push(video);
};
return searchResult;
}
// display the searcg result object on the page
function display(searchResult){
var html = "<p>searchKeyword: Mathematics</p>";
for(var i=0; i<searchResult.videoArray.length; i++){
var video = searchResult.videoArray[i];
html += "title: " + searchResult.title + "<br/>";
html += "channel: " + searchResult.channel + "<br/>";
html += "view: " + searchResult.view + "<br/>";
html += "link: " + searchResult.link + "<br/>";
html += "image: " + searchResult.image + "<br/>";
html += "length: " + searchResult.length + "<br/>";
}
var displayDiv = document.getElementById("display");
displayDiv.innerHTML = html;
}
</script>
</head>
<body>
<button onclick="getSearch()">Get Search Result</button>
<div id="display"></div>
</body>
</html>
Is the problem with my success function? Is it returning null because it hasn't returned all the values or something due to how AJAX runs?
Thanks heaps for any help
There's a lot of code to go over and a working snippet can't be produced because we can't put the XML file here.
This answer is making an assumption that your response from the XMLHttpRequest is null and the problem does not lie in any of your parsing functions.
It also seems that you're over complicating the request process by passing it around to many functions when it's quite simple itself.
Here is an example I made locally that correctly logged the XML to the console:
<!doctype html>
<html>
<head>
<title>A7-Questions2</title>
</head>
<body>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var xml = xhttp.responseXML;
// Logs just fine for me. You can do your parsing here.
console.log(xml);
}
};
xhttp.onerror = function() {
// Display error message.
var displayDiv = document.getElementById('display');
displayDiv.textContent = 'XMLHttpRequest failed status: ' + xhttp.status;
};
xhttp.open('GET', './path/to/xml.xml');
xhttp.send();
</script>
</body>
</html>

Apply JS onto table, which is created after page is loaded

I have got an html page, where you can put text into a textarea, click a button and then it creates an html table.
Problem is, that i am using a JS file to make my table sortable, but this JS file is not applied to tables that are created after the page itself is created.
How can i call the JS file again after the button is clicked and the table created? Or is there any other way to apply the JS file to the new table?
My problem seems to be like this problem:
Apply jquery propieties on new element created after the page is loaded
But i can't use JQuery, is there any way without it?
Example for a created table:
<div id="artikelnr2">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="table.css">
<script src="java.js"></script>
<div class="datagrid"><table class="sortable">
<thead><tr><th>Nummer</th><th>Nummer</th><th>Bezeichnung</th><th>Bemerkungen</th></tr></thead>
<tbody>
<tr><td>897-251</td><td>00.702.07803.7</td><td>5G2</td><td>-</td></tr><tr><td>897-1051</td><td>00.702.0306.7</td><td>5G1</td><td>-</td></tr><tr><td>897-1651</td><td>00.702.0307.3</td><td>5G1U</td><td>-</td></tr><tr><td>897-341</td><td>00.702.0323.9</td><td>5G2.5</td><td>-</td></tr>
</tbody>
</table></div>
</div>
I am using sorttable.js from this page:
http://www.kryogenix.org/code/browser/sorttable/
JavaScript which is called after button is clicked (pastes the content of another page into an exisiting div container):
function getOutput(url) {
var file = selectedValue()+".csv";
var value = document.getElementById("artikelnr").value;
<!---Leerzeichen entfernen-->
value = myTrim(value);
var url = url || "verarbeitung.php?eingabe="+value+"&eingabe2="+file ;
getRequest(
url, // URL for the PHP file
drawOutput, // handle successful request
drawError // handle error
);
return false;
}
// handles drawing an error message
function drawError() {
var container = document.getElementById('artikelnr2');
container.innerHTML = 'Bummer: there was an error!';
}
// handles the response, adds the html
function drawOutput(responseText) {
var container = document.getElementById('artikelnr2');
container.innerHTML = responseText;
tempResult = responseText;
}
// helper function for cross-browser request object
function getRequest(url, success, error) {
var req = false;
try{
// most browsers
req = new XMLHttpRequest();
} catch (e){
// IE
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
// try an older version
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return false;
}
}
}
if (!req) return false;
if (typeof success != 'function') success = function () {};
if (typeof error!= 'function') error = function () {};
req.onreadystatechange = function(){
if(req.readyState == 4) {
return req.status === 200 ?
success(req.responseText) : error(req.status);
}
}
req.open("GET", url, true);
req.send(null);
return req;
}
So this is a suggestion as a major part of your code is not available.
In your existing code, where you create the new table, you need to add/run the following:
sorttable.makeSortable(newTableObject);
The newTableObject reference you either can get straight from your existing code or by calling document.getElementById(idOfTheTableIJustAdded) after your added the new table to the DOM.
Src: http://www.kryogenix.org/code/browser/sorttable/
Update after question edit:
In this script function you should be able to do like this
function drawOutput(responseText) {
var container = document.getElementById('artikelnr2');
container.innerHTML = responseText;
//tempResult = responseText;
var newTableObject = container.querySelector(".sortable");
sorttable.makeSortable(newTableObject);
}

Ajax Request generates html with potential for subsequent Ajax requests. Secondary requests return [object mouseevent] as opposed to generated value

I have a page that is loaded via php. One of the elements in the page is a <li> that has an onclick event. E.g. <li onclick="dynamiccall('1');">blah</li>. After clicking the element an ajax call is issued and the html output is inserted into the page, the tag looks as follows <li onclick="getubilling('1');">blah</li>.
After clicking the generated element with the onclick function getubilling('1');, an ajax call is sent to a php script. The query parameter in the second function to getubilling is displayed as 1, but upon passing it to the ajax call, it shows up as [object mouseevent]. Why is this happening?
the dynamiccall() function is defined as follows in the ajax.js file included in the page:
function dynamiccall(uid){
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse10(xmlHttp.responseText);
console.log(uid);
var holder = uid;
document.getElementById('orgcinfo').innerHTML = '<ul id="b_action_lst2"><li onclick="getuprofile('+holder+')" name="uprofile">Account Settings</li><li onclick="getubilling('+holder+')" name="billing">Billing</li><li onclick="getuchpass('+holder+')" name="chpass">Change Password</li><li onclick="getuadduser('+holder+')" name="adduser">Add User</li></ul>';
var ullist = document.getElementById('b_action_lst2');
var links = ullist.getElementsByTagName('li');
for(var i=0;i<links.length;i++){
var link = links[i];
if(link.getAttribute('name')=="uprofile"){
link.onclick = getuprofile;
}
if(link.getAttribute('name')=="chpass"){
link.onclick = getuchpass;
}
if(link.getAttribute('name')=="billing"){
link.onclick = getubilling;
}
}
//dothis();
}
}
xmlHttp.open("GET", "ajax.php?&p=anotherreq&uid="+uid+"&n="+Math.random(), true);
xmlHttp.send(null);
}
function getubilling(uid){
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse10(xmlHttp.responseText);
console.log(uid);
var holder = uid;
document.getElementById('orgcinfo').innerHTML = '<ul id="b_action_lst2"><li onclick="getuprofile('+holder+')" name="uprofile">Account Settings</li><li onclick="getubilling('+holder+')" name="billing">Billing</li><li onclick="getuchpass('+holder+')" name="chpass">Change Password</li><li onclick="getuadduser('+holder+')" name="adduser">Add User</li></ul>';
var ullist = document.getElementById('b_action_lst2');
var links = ullist.getElementsByTagName('li');
for(var i=0;i<links.length;i++){
var link = links[i];
if(link.getAttribute('name')=="uprofile"){
link.onclick = getuprofile;
}
if(link.getAttribute('name')=="chpass"){
link.onclick = getuchpass;
}
if(link.getAttribute('name')=="billing"){
link.onclick = getubilling;
}
}
//dothis();
}
}
xmlHttp.open("GET", "ajax.php?&p=gubilling&uid="+uid+"&n="+Math.random(), true);
xmlHttp.send(null);
}
A request is issued to http://www.domain.com/ajax.php?&p=gubilling&uid=1&n=2212.32313
The problem is that the resulting UID variable when rendered in the browser results to [object mouseevent] as opposed to the literal value of 1.
I was following this example the only difference I can see is that the example doesn't provide for
passing a dynamic element to the dynamicEvent function where mine does.
What am I missing? Any advice is appreciated.
I suspect this will be the default param passed into the onclick handler, the event object.
Why don't you use addEventListener for a start, rather than inline?
How does this:
dynamiccall('uniqueid');
Know what uniqueid's value is? where does it get it from? In this case, it's taking the value of the event that occurred. My suggestion would be to change the tag to look like this:
<li onclick="dynamiccall(this);" uniqueid="1">blah</li>
then you can set dynamiccall to:
function getubilling(elem) {
var uid = $(elem).attr('uniqueid');
...

when i reached the last page, I make an AJAX call to the server for more data from my database without waiting to click my next button

I've got a big database with over 30 000 records on my server. I make a request to the server giving me the first 100 records and showing them with Googlevisualisation table paging Api - 10 records per page.
In my code here I added an event listener for the "page" event and tested the page property of the event:if I have reached the last page, I make an AJAX call for more data (another 100 records)
The problem is that if I reach the last page it just loads it for a second and it makes immediately the Ajax call without waiting to click next and for that results it doesn't change my page property! how can i make this way - when I reach the last my next button to be enabled and when i click it only then to load the next 100 records
Here my code that I tried so far:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script>
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
} else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var intRpp=100;
var intPNum;
var glPNum;
var s;
var options = {'showRowNumber': true, 'pageSize':intPageSize };
var numberOfPages;
var intPageSize=10;
function loadXMLDoc(l)
{
intPNum=l;
s=l;
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//alert(xmlhttp.responseText);
var xmlObj = xmlhttp.responseXML;
var textXML = xmlObj.documentElement.firstChild.firstChild.nodeValue;
if (window.DOMParser)
{
parser=new DOMParser();
var xmlDoc=parser.parseFromString(textXML,"text/xml");
}
else // Internet Explorer
{
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(textXML);
}
var rec = new Array();
rec[0]=['Стопански субект', 'Юрид.форма', 'Община', 'Име', 'Роля', 'Страна', 'NACE code', 'NACE text', 'Селище', 'пощ.код','Адрес', 'тел.', 'факс', 'Email', 'web', 'rid','id','activ'];
var rows = xmlDoc.getElementsByTagName("row");
rowsn = rows.length;
for (i=1;i<=rowsn;i++)
{
var cols=rows[i-1].getElementsByTagName("colunm");
colsn=cols.length;
rec[i] = new Array();
for (var j=0; j<colsn; j++)
{
rec[i][j] = cols[j].getAttribute("colvalue");
}
rec[i][j]='<input type="button" onClick="ajaxDBDelete('+rec[i][15]+');"/>';
}
tblTst = google.visualization.arrayToDataTable(rec);
options['page'] = 'event';
options['pageSize'] = intPageSize;
options['pagingSymbols'] = {prev: 'prev', next: 'next'};
options['pagingButtonsConfiguration'] = 'both';
options['allowHtml'] = 'true';
numberOfPages = intRpp/intPageSize;
visual = new google.visualization.Table(document.getElementById('table'));
google.visualization.events.addListener(visual, 'page', function (e){
options.startPage = e.page;
if (s>1)
{
glPNum = (numberOfPages * (s-1)) + (e.page+1);
document.getElementById('txbNumPage').value = glPNum;
options['pagingButtonsConfiguration']='both';
}
else
{
glPNum = e.page+1;
if (glPNum==1) options['pagingButtonsConfiguration']='next';
else options['pagingButtonsConfiguration']='both';
}
document.getElementById('txbNumPage').value = glPNum;
visual.draw(tblTst, options);
if (e.page == numberOfPages-1)
{
loadXMLDoc(s+1);
options.startPage = 0;
}
else
{
if((e.page==0)&&(s>1))
{
loadXMLDoc(s-1);
options.startPage=numberOfPages-1;
}
}
});
visual.draw(tblTst, options);
}
}
//alert (intRpp);
var url = "http://78.130.187.38:8080/axis2/services/bucat2/SelectFromDB?intRpp=" +intRpp + "&pageNum="+intPNum;
//alert (url);
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
</script>
</head>
<body onload= "loadXMLDoc(1);">
<br>
<br>
<div id="table"></div>
<br/>
<button type="button" name="btnFP" onClick="loadXMLDoc(1);">FIRST PAGE</button>
<input type="input" id="txbNumPage" value=1 />
<button type="button" name="btnLP" onClick="ajaxDBLast();">LAST PAGE</button>
<br>
<div id='proba'>
</div>
</body>
</html>
how can i make this way - when I reach the last my next button to be enabled and when i click it only then to load the next 100 records
Put your logic into a generic function
Set loadXMLDoc as a pointer to that function
Pass the page number as part of the query string to the AJAX URL
If the page number is the last one, then reassign loadXMLDoc to an empty function

No data in callback : how to pause load of a javascript function

We are having an issue in the following javascript code.
doCallback function is happening before doMainProcess gets finished.
So every time we get result = null in the doCallback.
Is there a way to pause load of the doCallback to wait until we get the result ?
Edit: setResult is happening multiple times and is asynchronous via iframe, and we don't know timing. Also callback only happens some of the time decided by another process.
So we can not simply change the position of doCallback.
<html>
<head>
<script>
var result;
var callback = "callback";
var url = "http://www.example2.com/getResponse/";
function iframeCallback() {
var iframe = document.createElement('iframe');
iframe.style.border='0px';
iframe.style.width ='0px';
iframe.style.height='0px';
document.body.appendChild(iframe);
var iDocument;
if (iframe.contentDocument) {
iDocument = iframe.contentDocument;
} else if (iframe.contentWindow) {
iDocument = iframe.contentWindow.document;
} else if (iframe.document) {
iDocument = iframe.document;
}
var content = "<script type='text/javascript'>";
content += "var jsText = \"<script type='text/javascript' src='" + url + "'></\" + \"script>\";";
content += "document.write(jsText);";
content += "</"+"script>";
content += "<script type='text/javascript'>";
content += "var data = eval('"+callback+"');";
content += "window.parent.setResult(data);";
content += "</"+"script>";
iDocument.open();
iDocument.write(content);
iDocument.close();
}
function setResult(data) {
result = data;
}
function doMainProcess() {
iframeCallback()
}
function doCallback() {
//we need to wait here until we get the result.
alert(result);
}
</script>
</head>
<body>
<script>
doMainProcess();
</script>
<script>
doCallback();
</script>
</body>
<html>
Yes,
delete this:
<script>
doCallback();
</script>
Change this:
function setResult(data) {
result = data;
}
to this:
function setResult(data) {
result = data;
doCallback();
}
A clunky solution (that doesn't involve my having to read your code carefully):
var readyForCallback = false;
function doMainProcess() {
// your code here
readyForCallback = true;
}
function doCallback(arg1,arg2,arg3,etc) {
if (!readyForCallback) {
// anonymous function as way to keep the original callback
// argument(s) with a timeout
setTimeout(function(){doCallback(arg1,arg2,arg3,etc);},20);
return;
}
// your code here
}
Note: within your timeout function you could also use doCallback.apply() with the arguments object to automatically handle any number of arguments, but I didn't include this in my code because off-hand I forget whether you can just use the arguments object directly or if you'd have to first create a proper array populated from arguments.

Categories

Resources