show/hide the <div> tag is not working

I have one hyperlink in that i call 3 functions one by one in onclick event.

<form name = "bulkcontactfrm" method="POST" action="<%= servletPath %>>
    <div id="saveDiv" layoutAlign="top" style="display:block;"> 
	    <table id=""  align="left"  border="0" cellpadding="0" cellspacing="0">
			<a href="javascript:void(0);" onclick="isAllowedToResubscribe(document.bulkcontactfrm); manipulateDIV(document.bulkcontactfrm); resubscribeCall(document.bulkcontactfrm);">&#160;Re-Subscribe</zoniac:roundrect>&#160;</a>
    <div id="loadingDiv" class="cellWhiteBGFont" layoutAlign="top" style="display: block;"><p><img src="<%=ImageMappingManager.getImageName("imgLoading")%>" name = "b1">&nbsp;&nbsp;<font size='3'><b>Please wait...<b></font></p>

Open in new window

Functionality flow

First function validate the data using ajax call
function isAllowedToResubscribe(form) {
	//Client validation takes here 

Open in new window

Second function hide the content in UI and show the Processing image in <DIV> tag
function manipulateDIV(form) {

function hideSaveDiv() {
	//hide the Re-Subscribe hyperlink 
function showLoadingDiv() {
	//show the Processing image 

Open in new window

Third function is for form submit using ajax call
function resubscribeCall(form) {

Open in new window

After click the hyperlink validation function calls and get succeed, conformation message appear click OK on the conformation.

My Objective:
Hide the hyperlink <DIV> tag and show the Progress <DIV> tag.

My Problem
The hyperlink <DIV> tag has not been hide so Progress image not getting loaded.

Thanks in Advance
Who is Participating?
Sathish David Kumar NArchitectCommented:
And i founfd one more issue is ...

your not close form action

>>>>>> action="<%= servletPath %>>  
Are you sure that onClick would work this way - do you mean that you click it once
and one function executes, then second time - another function, and third time - third function?
Or maybe I misunderstood you?
ZoniacAuthor Commented:
Hi for_yan,

YES, you're right.
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

You mean I'm right that it should operate this way?
But i have some doubts about it, I was asking are you sure that
it should operate this way?
If it would where would it store the current state - say i clcked the first time, then
some time later the second time - so it remembers  somewhere that it need to
execute say second part or third part?
ZoniacAuthor Commented:
Hi for_yan,

In fact, my original code was a single JavaScript function call.  For sake of clarity, I've just shown it in 3 JavaScript calls.  But even then in a single JavaScript function call, this is not working.

Do you have a different idea/approach for me to try out?
when you leave only the second function - does it still not function?
ZoniacAuthor Commented:
I also tried out the following:

If I introduce a JavaScript alert() just before the AJAX call as shown below, then it is working as I expected:

function resubscribeCall(form)

Open in new window


when you leave only the second function does it show/no show div ?
If the response to my question is positive, then
I think we need to have one function which within itself should take care
of switching between options and monitoring state - where to switch next.

ZoniacAuthor Commented:
> when you leave only the second function does it show/no show div ?

Yes, on leaving the second function, I could see saveDiv becoming hidden and loadingDiv becoming visible. I tried out this by removing the 3rd function call in anchor <a>  tag.
Then I think you should call one function, but inside this function you should
determine which of the three methods to call. I'm not quite sure waht is the bet way
to preserve state in JavaScript - so we need to know are we clicking first time, second time
or third time. One thing which comes to my mind is that we can have hidden
text elment in the form and it can be accessed from java script and we'll
increment its value up to three times and then make it zero again.
maybe you can do it simpler, but this should also work
Sathish David Kumar NArchitectCommented:
The real pblm i check in code iss ...
  >>>>>>>>>>>>>>>    <div id="loadingDiv" class="cellWhiteBGFont" layoutAlign="top" style="display: block;"><p>
<img src="<%=ImageMappingManager.getImageName("imgLoading")%>" name = "b1">&nbsp;&nbsp;<font size='3'><b>Please wait...<b></font></p>  

Ur image  tag ...
here your starting the image tag ... with double qutoe
>>="<%=ImageMappingManager.getImageName(" --------> end  here  so that only its not working propely

change that as single qutoe

ZoniacAuthor Commented:
I solved this problem through form submit insted of ajax call.......Its working fine
ZoniacAuthor Commented:
Thanks for your suggestions.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.