JavaScript is not working as expected.
I have the following method call (have included html and css as well). when I debug the code in a browser, JavaScript seems to work fine. Loading image is coming up, table is getting hidden. But when I close the debug and just load the page and run it, loading image is not coming up, neither the table is hidden. Not sure what is going on? I need help to understand what I am doing wrong?
XData Style
{
<style type="text/css">
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}
#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}
</style>
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen">
<html>
<div id="loading" style="display:none;">
<img id="loading-image" src="../progressindicator.gif" alt="Loading..." />
</div>
<h1 containerStyle="">Testing </h1>
</html>
<spacer height="20" />
<button onclick="zenPage.displayData()" containerStyle="padding:10px; margin-left:10px;font-size:16px;" caption="Run Test" />
<spacer height="20" />
<tablePane id="tblResults" valueColumn="ID"
tableName="UnitTest.tblMessageTypeResults"
orderByClause = "ID asc"
hidden="true" >
<column colName="ID" hidden="true" />
<column colName="MessageName" />
<column colName="MessageCode" />
<column colName="TestStatus" />
<condition colName="TestStatus"
predicate="STARTSWITH"
value="Fail"
rowStyle="color: red;"/>
</tablePane>
</page>
}
ClientMethod displayData() [ Language = javascript ]
{
//show the loader first
document.getElementById("loading").style.display = "block"
//alert("Please note that it will take 5-10 to run these tests.");
// wait for the function to respond with the message before proceeding further
zenSynchronousMode = 1;
var table = zenPage.getComponentById('tblResults');
// show the table - as initially it is hidden.
table.setProperty("hidden",true);
// call the method to run all the test and wait for it finish
var getResults = zenPage.CallRunTestMethod();
//var getResults = "";
if (getResults == ""){
// alerts works but loading image does not
alert("Test Run completed!");
table.setProperty("hidden",false)
// execute the query and show the results
table.executeQuery();
zenSynchronousMode = 0; //returns to the original value
// hide the loader.
document.getElementById("loading").style.display = "none"
}
else {
// show alert with error message
alert("Test Failed: error returned " + getResults + ". Please click on run test button again to repeat test.");
var table = zenPage.getComponentById('tblResults');
//hide the table - not sure if there is any other option
table.setProperty("hidden",true)
// hide the loader
document.getElementById("loading").style.display = "none"
}
}
}
Comments
Where you're using document.getElementById() in javascript, you're probably not getting the right element. If you right click on the element and inspect it in your web browser, you'll see that it has an id like zen13 or something similar.
Instead of document.getElementById('loading') try using just zen('loading'), for example:
zen("loading").style.display = "none"
Ok- tried it and still no luck.
I have changed the code so It is doing the following and now it seems to work.
ClientMethod displayResults() [ Language = javascript ]
{
document.getElementById("loading").style.display = "block"; // show loader image
zenPage.getComponentById('tblResults').setHidden(true); // hide the table
setTimeout(function(){zenPage.displayData();}, 1000); // run test and populate table in a second
}
ClientMethod displayData() [ Language = javascript ]
{
// wait for the function to respond with the message before proceeding further
zenSynchronousMode = 1;
var getResults = zenPage.CallRunTestMethod();// call the method to run test
if (getResults == ""){
var table = zenPage.getComponentById('tblResults');
table.setHidden(false);
table.executeQuery();// execute the query and show the results
zenSynchronousMode = 0;
document.getElementById("loading").style.display = "none"; // hide the loader.
}
else
{
alert("Test Failed: error returned " + getResults + ". Please click on run test button again to repeat test.");
zenPage.getComponentById('tblResults').setHidden(true); // hide the table
document.getElementById("loading").style.display = "none"; // hide the loader
}
}
}
thank you for looking into it. David.