[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 277
  • Last Modified:

Disapearing div

I have 2 divs. When page loads, neither is displaying. I have 2 buttons. User clicks on one and i need to display that div (there's a user control inside it).
User clicks on the other button. I want to hide whatever is displayed and display the other one.

I have an alert button. I see the correct div. It displays, then after the alert...it disappears. I even wrapped the entire page in an UpdatePanel but still...i see it displayed and then disappear. What am I missing?? Never gets to "else" part
<table>
     <tr>
       <td>
              <div style="display:none" id="divProvider">
               <uc1:providerSearch runat="server"  ID="ucProvider" />
            </div>

            <div  style="display:none"  id="divSpecialty">
               <uc1:providerSpecialty runat="server" ID="ucSpecialty" />
            </div>
       </td>
     </tr>
    </table>

-------

 function ShowHidediv(divId) {
            
            alert(divId);
            if (document.getElementById(divId).style.display == "none") {
                document.getElementById(divId).style.display = "block";
                alert("after display");
            }
            else {
                document.getElementById(divId).style.display = "none";
                alert("in else");
            }
        }
---------------

<asp:Button ID="lbSearchSpecialty"  OnClientClick ="ShowHidediv('divSpecialty');ShowHidediv('divProvider');" CausesValidation="false"  runat="server" Text="Search by Specialty" ></asp:Button>

Open in new window

0
Camillia
Asked:
Camillia
  • 9
  • 3
  • 2
1 Solution
 
stergiumCommented:
try alerting the comparison that you are making like this
alert(document.getElementById('one').style.display=="none");
i made two divs and one of them is hidden. when i write the above i get a true and the other one gives me false...

hope that helps
0
 
CamilliaAuthor Commented:
not sure what you mean...how is that going to show what's wrong??
0
 
CamilliaAuthor Commented:
trying it now. I'll post back
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
CamilliaAuthor Commented:
Both divs show "true" with that line. Which is correct because both divs are display=none when i click on the button. I just dont get this. I'm not a good Javascripter. Been at this for 2 days now :(
0
 
stergiumCommented:
this will show you what is happening in each case. (thus know why else is not happening)
My advice would be to install a firebug in a firefox (or chrome or ie) and check your code.
i created a page with only two divs (one hidden) and wrote in java console what you wanted to do .
i could get the true or false when a div was hidden.
0
 
tring_tringCommented:
Code your function to return false like below:-

 function ShowHidediv(divId) {
           
            alert(divId);
            if (document.getElementById(divId).style.display == "none") {
                document.getElementById(divId).style.display = "block";
                alert("after display");
            }
            else {
                document.getElementById(divId).style.display = "none";
                alert("in else");
            }
            return false;
        }

And finally replace
onclientClick ="ShowHidediv('divSpecialty');ShowHidediv('divProvider');"

with
onclientClick ="ShowHidediv('divSpecialty'); return ShowHidediv('divProvider');"

Your page is getting postback and hence it reloads everytime you click the button. In simple terms the div display is never set to "block" apart for a very brief period of time when page is posted back.
0
 
CamilliaAuthor Commented:
let me try tring's method. Seems like the post back is doing it. let me see.
0
 
CamilliaAuthor Commented:
Getting close, that worked. I see the div displayed correctly. So, i click on the first button and div1 is displayed. Now, i click on the second button...div2 is displayed BUT div1 doesnt get hidden... they both show up. I click on the button again and that's when it gets hidden...something is off with that if - else...

this is how I have it calling the fucntion now:

 <asp:Button runat="server" onclientClick ="return ShowHidediv('divProvider'); return ShowHidediv('divSpecialty');"  Text="Search by Provider" ID="lbSearchProvider"   CausesValidation="false"   />
0
 
CamilliaAuthor Commented:
I see it go to "else" part but i have to click twice
0
 
tring_tringCommented:
I thought there is only one button on click of which you wish to toggle the divs.
Are there two buttons one for each div?

Also the code you posted works on the display basis , if it is block the display is set to none and vice versa. In order to achieve one div visible and other not you have to start with one div's display set to block and others set to none.

Please post the exact output needed.
0
 
CamilliaAuthor Commented:
I apologize. Yes, there are 2 buttons. There are 2 divs. On page load, both divs are set to display:none. Then user clicks on one button...a div appears. Clicks on the other button...the one that was displaying should disappear and the one corresponding to the div should display..

I cant do that?? one of the divs must be set to "block" on page load??
0
 
CamilliaAuthor Commented:
I forgot the buttons:

 <asp:Button ID="lbSearchSpecialty"  onclientClick ="return ShowHidediv('divSpecialty'); return ShowHidediv('divProvider');"
                                         CausesValidation="false"  runat="server" Text="Search by Specialty" ></asp:Button>

AND

 <asp:Button runat="server"  onclientClick ="return ShowHidediv('divProvider'); return ShowHidediv('divSpecialty');"  Text="Search by Provider" ID="lbSearchProvider"   CausesValidation="false"  CommandName="Select" />
0
 
tring_tringCommented:
Well that can be done...
You need to initialize the toggle when the first button is clicked. This is done with the help of the variable divdisplay.

The javascript is as below:-

 var divdisplay = 0;

 function ShowHidediv(divId) {
      //alert(divId);
     if (divdisplay == 0) {
         document.getElementById(divId).style.display = "block";
         divdisplay = 1;
     }
     else if (divdisplay == 1) {
         document.getElementById(divId).style.display = "none";
         divdisplay = 2;
     }
     else {
         if (document.getElementById(divId).style.display == "none") {
             document.getElementById(divId).style.display = "block";
             //alert("after display");
         }
         else {
             document.getElementById(divId).style.display = "none";
             //alert("in else");
         }
     }
     return false;
}

Open in new window



The buttons code will be:-

<asp:Button ID="Button1"  onclientClick ="ShowHidediv('divSpecialty'); return ShowHidediv('divProvider');"  CausesValidation="false"  runat="server" Text="Search by Specialty" ></asp:Button>
<asp:Button runat="server"  onclientClick ="ShowHidediv('divProvider'); return ShowHidediv('divSpecialty');"  Text="Search by Provider" ID="lbSearchProvider"   CausesValidation="false"  CommandName="Select" /> 

Open in new window


Please notice that on command click the we do not expect the return from first function but we take the return value from second function. This is necessary to allow both functions to execute. And we accept return function from the second one to stop post back.

The same effect can also be achieved using following javascript function and button code:-
function ShowHidediv(divId1, divId2,trigger) {
     if (trigger == 'block') {
         document.getElementById(divId1).style.display = "block";
         document.getElementById(divId2).style.display = "none";
     }
     else {
         document.getElementById(divId1).style.display = "none";
         document.getElementById(divId2).style.display = "block";
     }
     return false;

Open in new window


button code
 <asp:Button ID="Button1"  onclientClick ="return ShowHidediv('divSpecialty','divProvider','block');"  CausesValidation="false"  runat="server" Text="Search by Specialty" ></asp:Button>
<asp:Button runat="server"  onclientClick ="return ShowHidediv('divSpecialty','divProvider','none');"  Text="Search by Provider" ID="lbSearchProvider"   CausesValidation="false"  CommandName="Select" /> 

Open in new window

0
 
CamilliaAuthor Commented:
thanks, let me try and will post back. Thanks for sticking with this.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 9
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now