Please wait..page in Ajax

Question

singaiah39 0 Newbie Poster

13 Years Ago

Hi,
I have problem in displaying "please wait.." text when the client requests data from the server.

I have created a <div> element as below.

<DIV ID="Loading" STYLE="position:absolute;z-index:5;top:30%;left:42%;visibility:hidden">
    Please Wait....
</DIV>

I am using Ajax call, to get some table data from the server. This takes around 10-15 seconds. Client will call below function which calls the Ajax function.

function getData()
{
document.getElementById('Loading').style.visibility = 'visible';

ajaxGetData()

document.getElementById('Loading').style.visibility = 'hidden';

}

Before calling the Ajax, i am making the div element visible.

My problem is, i am not able see this <div> element.

I am making the ajax call as synchronous.So, control will wait till i get a response from the server.In this time, i want to show "Please wait.." text to the user. But, i have problem with above code.

Interestingly, if i put any alert statement before the ajax call or the ajax call fails, then i am able to see the "Please wait.." text.

Could any one help me on this issue?

Thanks,
Singu.

javascript

Edited 11 Years Ago by mike_2000_17 because: Fixed formatting

3 Contributors
14 Replies
1K Views
2 Weeks Discussion Span
Latest Post 13 Years Ago Latest Post by R0bb0b

R0bb0b 344 Posting Shark

13 Years Ago

try:
html

<DIV ID="Loading" STYLE="position:absolute;z-index:5;top:30%;left:42%;display:none;">
Please Wait....
</DIV>

javascript

function getData()
{
document.getElementById('Loading').style.display = 'block';

ajaxGetData()

document.getElementById('Loading').style.display = 'none';
}

but personally I use jQuery for all this stuff now.

R0bb0b 344 Posting Shark

13 Years Ago

well, we are going to have to debug a little. Javascript is fun in that way. I think the best way to approach this will be to have you post the rest of your code, but this time use code tags please.

R0bb0b 344 Posting Shark

13 Years Ago

Sorry, I did and then I got pulled away. I will reply this afternoon.

Akash Saikia 9 Junior Poster

13 Years Ago

Hi,
Actually many problems are there inside your HTML code

Two reasons are there that your Please Wait is not shown..

1 ) That you have put your

<DIV ID="Loading" STYLE="position:absolute;z-index:5;top:30%;left:42%;display:none;">
Please Wait....
</DIV>

inside the <DIV id="LoadStructure">,so when your data is received asynchronously from the server,your Loading div also gets refreshed with it,so it will definelty will not show anything that you wish.

So when your are putting an alert,it is shown,as the server side page is still not called.

2 ) That the HTML structure is not correct,you are closing a DIV without starting it.

Please change the code as below,only the body part...
I am pointing out the Missing or wrong inserted tags,because you must place your Loading div outside your LoadStructure,you can also put radio buttons outside.

<BODY>
<DIV id="LoadStructure"> <!-- this is your DIV start -->
<TABLE border=1>
<TR>
<TD>
This table will be filled when below radio buttons are clicked by getting data from server.
</TD>
</TR>
</DIV>  <!--  Where is the starting DIV tag here??? if not then it mistakenly
        closes your load structure,but in actual it is not doing that,
and where is the TABLE end?-->
</TABLE border=1>
<TABLE>
<TR>
<TD><INPUT TYPE=radio value=N onClick=getData(this);>Male</TD>
<TD><INPUT TYPE=radio value=N onClick=getData(this);>Female</TD>
</TR>
</TABLE>
<!-- Put below given DIV next to  NO.3 below-->
<DIV ID="Loading" STYLE="position:absolute;z-index:5;top:30%;left:42%;display:none;">
Please Wait....
</DIV>   <!-- this is your DIV end of LoadingStructure NO.3-->
<BODY>
</HTML>

And this entire problem still can be solved just by replacing Line no 66 with line 67 and vice versa from your last posted code

If you will correct your DOM structure properly,it will start working....
:)

Edited 13 Years Ago by Akash Saikia because: Added some more information

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

singaiah39 0 Newbie Poster · Answer 1 · 2011-03-25T12:27:08+00:00

try:
html

<DIV ID="Loading" STYLE="position:absolute;z-index:5;top:30%;left:42%;display:none;">
Please Wait....
</DIV>

javascript

function getData()
{
document.getElementById('Loading').style.display = 'block';

ajaxGetData()

document.getElementById('Loading').style.display = 'none';
}

but personally I use jQuery for all this stuff now.

Thanks for the reply Rob.

I will try this..

But there is a mistake in my code..

actually, i meant..

document.getElementById('Loading').style.visibility= 'visible';

and not

document.getElementById('Loading').style.display= 'visible';

I will tyr display option.

Thanks.

singaiah39 0 Newbie Poster · Answer 2 · 2011-03-25T17:26:35+00:00

Thanks for the reply Rob.
I will try this..
But there is a mistake in my code..
actually, i meant..
document.getElementById('Loading').style.visibility= 'visible';
and not
document.getElementById('Loading').style.display= 'visible';
I will tyr display option.
Thanks.

Hi Rob,
I tried to implement the solution. But i am getting the same result. I am not able to see the <DIV> data.

I have a radio button which when clicked, getData() function will be called.

When i click on this radio button, it is not selected immediately. It gets selected only after receiving the response from the server.

I have given an alert statement as below:

function getData()
{
document.getElementById('Loading').style.display= 'block';
alert("display");
ajaxGetData();
document.getElementById('Loading').style.display= 'none';

In this case, when i get the alert statement, i can see the <DIV> element and also, the radio button is selected.

Could you please let me know what the issue is?

}

singaiah39 0 Newbie Poster · Answer 3 · 2011-03-29T12:06:29+00:00

well, we are going to have to debug a little. Javascript is fun in that way. I think the best way to approach this will be to have you post the rest of your code, but this time use code tags please.

Hi Rob,
Please check below sample code.

<HTML>
<head>
	<script language="JAVASCRIPT">

	function getData(input)
	{
		var selectedValue = input.value ;

		document.getElementById('Loading').style.display = 'block';

		ajaxGetData(selectedValue);

		document.getElementById('Loading').style.display = 'none';

		return;
	}
	function ajaxGetData(slectedVal)
	{

		var xmlReq = new getXMLObject();
		var servletURL = "my.getServlet"
		var req = "SECLEDVAL="+slectedVal ;

		if ( xmlReq )
		{
			xmlReq.open("POST", servletURL,false);
			xmlReq.onreadystateChange = "sendRequest";
			xmlReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xmlReq.send(req);
		}
	}

	function sendRequest()
	{
		if ( xmlReq.readyState == 4 )
		{
			if ( xmlReq.status != 200 )
			{
				alert("Ajax failed");
			}
			else
			{
				// Response text will have the table containing data...

				document.getElementById("LoadStructure").innerHTML = xmlReq.responseText ;
			}
		}
	}

	function getXMLObject()
	{
		var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		return xmlHttp;
	}

	</script>
</head>
<BODY>
<DIV id="LoadStructure">
<TABLE border=1>
<TR>
<TD>
This table will be filled when below radio buttons are clicked by getting data from server.
</TD>
</TR>
</DIV>
</TABLE border=1>
<TABLE>
<TR>
<TD><INPUT TYPE=radio value=N onClick=getData(this);>Male</TD>
<TD><INPUT TYPE=radio value=N onClick=getData(this);>Female</TD>
</TR>
</TABLE>
<DIV ID="Loading" STYLE="position:absolute;z-index:5;top:30%;left:42%;display:none;">
Please Wait....
</DIV>
<BODY>
</HTML>

Let me know if you need any other information..

singaiah39 0 Newbie Poster · Answer 4 · 2011-03-31T17:56:43+00:00

Hi Rob,
Did you happen to see the code?

Thanks.

R0bb0b 344 Posting Shark · Answer 5 · 2011-04-01T18:43:04+00:00

Hi,
Actually many problems are there inside your HTML code
Two reasons are there that your Please Wait is not shown..
1 ) That you have put your
<DIV ID="Loading" STYLE="position:absolute;z-index:5;top:30%;left:42%;display:none;">
Please Wait....
</DIV>
inside the <DIV id="LoadStructure">,so when your data is received asynchronously from the server,your Loading div also gets refreshed with it,so it will definelty will not show anything that you wish.
So when your are putting an alert,it is shown,as the server side page is still not called.

2 ) That the HTML structure is not correct,you are closing a DIV without starting it.

Please change the code as below,only the body part...
I am pointing out the Missing or wrong inserted tags,because you must place your Loading div outside your LoadStructure,you can also put radio buttons outside.
<BODY>
<DIV id="LoadStructure"> 
<TABLE border=1>
<TR>
<TD>
This table will be filled when below radio buttons are clicked by getting data from server.
</TD>
</TR>
</DIV>  
</TABLE border=1>
<TABLE>
<TR>
<TD><INPUT TYPE=radio value=N onClick=getData(this);>Male</TD>
<TD><INPUT TYPE=radio value=N onClick=getData(this);>Female</TD>
</TR>
</TABLE>

<DIV ID="Loading" STYLE="position:absolute;z-index:5;top:30%;left:42%;display:none;">
Please Wait....
</DIV>   
<BODY>
</HTML>
And this entire problem still can be solved just by replacing Line no 66 with line 67 and vice versa from your last posted code
If you will correct your DOM structure properly,it will start working....
:)

Agreed. And there really is nothing wrong with moving the id="LoadStructure" into your table cell itself so you have <td id="LoadStructure"> instead of <div id="LoadStructure"> so you can completely remove the loadstructure div at that point. Either that or just get rid of the table and go with <div id="LoadStructure">. By having both the div and the table structure you are actually just making it more complicated than it has to be.

singaiah39 0 Newbie Poster · Answer 6 · 2011-04-05T15:39:25+00:00

Hi Akash/Robb,
I had my "Loading" <DIV> structure outside the "LoadStructure" <DIV> only.
Actually, there is small mistake in my code. My code looks like as below.

</head>
<BODY>
<DIV id="LoadStructure"> <!--This is first DIV start-->
<TABLE border=1> <!--First table start-->
<TR>
<TD>
This table will be filled when below radio buttons are clicked by getting data from server.
</TD>
</TR>
</TABLE> <!--This is table end and it was wrongly coded in my previous post.First table end-->
</DIV> <!--First DIV end-->
<TABLE border=1> <!--Second table Satrt-->
<TR>
<TD><INPUT TYPE=radio value=N onClick=getData(this);>Male</TD>
<TD><INPUT TYPE=radio value=N onClick=getData(this);>Female</TD>
</TR>
</TABLE> <!--Second table end-->
<DIV ID="Loading" STYLE="position:absolute;z-index:5;top:30%;left:42%;display:none;"> <!--Second DIV start-->
Please Wait....
</DIV> <!--Second DIV end>
<BODY>
</HTML>

My structure looks as above. But, still i am unable to see the DIV.

Is there anything wrong here?

Thanks,
Singu.

Akash Saikia 9 Junior Poster · Answer 7 · 2011-04-05T15:54:10+00:00

Hey,still you have to change the code for your radio button

<TD><INPUT TYPE='radio' name='sexGroup' value='N' onClick=getData(this);>Male</TD>
<TD><INPUT TYPE='radio' name='sexGroup' value='N' onClick=getData(this);>Female</TD>

Try this...

R0bb0b 344 Posting Shark · Answer 8 · 2011-04-07T10:14:17+00:00

One thing that is bothering me. Just to eliminate it as an issue, can you change the z-index on your loading div to 100?

singaiah39 0 Newbie Poster · Answer 9 · 2011-04-11T20:39:08+00:00

Hi Rob/Akash,
I have done the suggested changes, but i could not see "Please wait" text.
One more this is, i have this html in one of the frame of html table.
My HTML page has two frames and in one frame i have above data and in another frame i have different set of data.

Is this an issue?

Thanks,
Singu.

R0bb0b 344 Posting Shark · Answer 10 · 2011-04-12T19:15:19+00:00

that could be an issue.

try moving your loading div to the parent document and addressing it using parent.document.getElementById('Loading').