Show Hide JavaScript Problem in Asp.net

[vinitfichadia]

Hi friend,

I've been using server control button, and on its click event i m showing or hiding the div content on the basis of its current style.

ASP code for button is:

 <asp:Button ID="btnClickMe" Text="Click Me...!" OnclientClick="HideDiv('PostNewTopic')" runat="Server" />

JavaScript Code is:

<script type="text/javascript" language="javascript" >
       function HideDiv(id)
       {
 
            if (document.getElementById(id).style.display=="none"){
                document.getElementById(id).style.display='inline';
                }
            else{
                document.getElementById(id).style.display='none';
                }
                   }
        </script>

What the problem i m facing is on clicking the button it is hiding and again showing the div content, because the page is getting refreshed

Event is getting fired two times, so the result is same i.e, div content is shown and cannot be hidden.

help would really be appreciated.

Thank you all.

[PareshRathod]

Hi Dear,

Because you are raising the server event, your client side display will be initialize once again....

I have also faced the same problem in past...
The solution is as under..

Just add the runat="server" in your div tag of which you want to hide..
than in your button's click event, you can write
we are assuming that your div's id is divID.

divID.visible=true or divID.visible=false
as you want..

Hope this will help you..

Paresh

Hi friend,

I've been using server control button, and on its click event i m showing or hiding the div content on the basis of its current style.

ASP code for button is:

<asp:Button ID="btnClickMe" Text="Click Me...!" OnclientClick="HideDiv('PostNewTopic')" runat="Server" />

JavaScript Code is:

<script type="text/javascript" language="javascript" >
function HideDiv(id)
{


if (document.getElementById(id).style.display=="none" ){
document.getElementById(id).style.display='inline' ;
}
else{
document.getElementById(id).style.display='none';
}
}
</script>



What the problem i m facing is on clicking the button it is hiding and again showing the div content, because the page is getting refreshed

Event is getting fired two times, so the result is same i.e, div content is shown and cannot be hidden.

help would really be appreciated.

Thank you all.

[Frinavale]

Hi friend,

I've been using server control button, and on its click event i m showing or hiding the div content on the basis of its current style.

ASP code for button is:

 <asp:Button ID="btnClickMe" Text="Click Me...!" OnclientClick="HideDiv('PostNewTopic')" runat="Server" />

JavaScript Code is:

<script type="text/javascript" language="javascript" >
       function HideDiv(id)
       {
 
            if (document.getElementById(id).style.display=="none"){
                document.getElementById(id).style.display='inline';
                }
            else{
                document.getElementById(id).style.display='none';
                }
                   }
        </script>

What the problem i m facing is on clicking the button it is hiding and again showing the div content, because the page is getting refreshed

Event is getting fired two times, so the result is same i.e, div content is shown and cannot be hidden.

help would really be appreciated.

Thank you all.

Try using

<asp:Button ID="btnClickMe" Text="Click Me...!" OnclientClick="HideDiv('PostNewTopic');return false;" runat="Server" />

If this does not prevent the postback (it should though..I use this on a regular bases), consider using a simple HTML button instead.

[vinitfichadia]

Thank you paresh for your kindest help, thank you very much.

Hi Dear,

Because you are raising the server event, your client side display will be initialize once again....

I have also faced the same problem in past...
The solution is as under..

Just add the runat="server" in your div tag of which you want to hide..
than in your button's click event, you can write
we are assuming that your div's id is divID.

divID.visible=true or divID.visible=false
as you want..

Hope this will help you..

Paresh