New post
Question
· Jun 6, 2023

JavaScript is not working as expected.

#JavaScript #ObjectScript #Other

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"

    }

}

 

}

Discussion (3)1
Log in or sign up to continue
David Hockenbroch · Jun 7, 2023

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"      

0 0
Erum Ahsan · Jun 7, 2023

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 } } }

0 0