Display / Hide Table based on output

[riya das]

Hi,

I have the following requirement:
I have a servlet that calls an ajax script and accordingly displays the result in a table. When I first load the page , I need to hide the table and once I click on a button 'Charge' I need to call the ajax function and display the result in the table by making it visible ? How do i achieve this ? Any help is appreciated.

Following is snipped of my existing code

..
..
  out.println("<td class=\"footer\" colspan=\"5\"><div class=\"center\"><button type=\"button\" onclick=\"message()\">Charge Account</button>"); //message is the function in the ajax script
            
           out.println("<table name=\"resultTable\" class=\"style1\">");
            out.println("<tr>");
            out.println("<td class=\"header\"></td>");
            out.println("</tr>");
            out.println("<tr>");
            out.println ("<td class=\"rows\" colspan=\"5\"><div id=\"results\"</div></td>");            
            out.println("</tr>");
            out.println("<tr>");  

My ajax script:

function message() {
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null) {
        alert ("Browser does not support HTTP Request");
        return;
    } 
...
...

    xmlHttp.open("GET",hurl,true);
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.send(null);
} 


function stateChanged() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") { 
        var firstName = xmlHttp.responseXML.getElementsByTagName("FirstName")[0].childNodes[0].nodeValue;
        var lastName = xmlHttp.responseXML.getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
..
...

        var message = "Name: " + firstName ;

        if(Status == "Unstable") {
            var error="<h1>You Do Not Have Sufficient Funds! </h1><br>";
        } else {
            var NewBalance = xmlHttp.responseXML.getElementsByTagName("NewBalance")[0].childNodes[0].nodeValue;
            NewBalance = parseFloat(NewBalance);
            NewBalance = NewBalance.toFixed(2);
            var error="<h1>Thank you for your purchase! Your new balance is shown below.</h1></br>New Balance: $" + NewBalance + "<br>";
        }
    
     document.getElementById("results").innerHTML= message+error;
    } else {
    }
} 

[Bear Bibeault]

CSS. Make the table hidden until script makes it visible.

Why are you building up HTML in servlet? Gather the data in the servlet then forward to a JSP to format the table HTML.

[Miku Ranjan]

Hi,
You can use jstl tag, jsp scriptlet or javascript to achieve it.

[Bear Bibeault]

Miku Ranjan wrote:Hi,
You can use jstl tag, jsp scriptlet or javascript to achieve it.

No, you can't. Not when using Ajax to fetch the new table.

[Miku Ranjan]

Hi,
Yes Bear is right if you are using ajax that simply you can use some javascript to change the css to hide /show.