I've designed a web page in asp. And in that page i placed html control too like <a> & <div>. I have written one java script function which is hiding the <div> when i'm clicking on the <a> tag. Its working fine. But when i'm clicking on the asp button then page refresh occur again. And it is loading my previous design of the page. I set the display:none of the <div> at the design time. so it is hiding my <div> again when occuring any other server side event. And i don't want let it happen.

Javascript function-

<script language="javascript" type="text/javascript">
       function toggle5(showHideDiv, switchTag) {
           try {
               '<%Session["temp"] = "'+more+'"; %>';
               var ele = document.getElementById(showHideDiv);
               var imageEle = document.getElementById(switchTag);
               if (ele.style.display == "block") {
                   ele.style.display = "none";
                   imageEle.innerHTML = 'More';
               }
               else {
                   ele.style.display = "block";
                   imageEle.innerHTML = 'Less';

               }
           }
           catch (err) {
               alert("Error");
           }
       }
</script>

html code is-

<div id="divSearch" style="float:left;height:100%;width:100%;">
<span style="float:right;height:27px;"><a id="displayText" href="#" onclick="javascript:toggle5('toggleText', 'displayText');">More</a></span>
</div>
<div id="toggleText" style="display:none;height:100%;width:100%;">
<div id="divCalls" style="width:24%;float:left;height:30%;">
<span style="float:left;width:100%;color:#3b5998;">
            <asp:CheckBox ID="chkNoCall" runat="server" Text="No call made in " 
        AutoPostBack="True" oncheckedchanged="chkNoCall_CheckedChanged"/>
    <asp:TextBox ID="txtNoCall" runat="server" Width="12%" Enabled="False"></asp:TextBox><span> days</span></span>
</div>
</div>

C# code of the Checkbox-

protected void chkNoCall_CheckedChanged(object sender, EventArgs e)
    {
        if (chkNoCall.Checked == true)
        {
            txtNoCall.Enabled = true;
        }
        else
        {
            txtNoCall.Enabled = false;
            txtNoCall.Text = "";
        }

    }

How to solve this problem?

thanks

I've designed a web page in asp. And in that page i placed html control too like <a> & <div>. I have written one java script function which is hiding the <div> when i'm clicking on the <a> tag. Its working fine. But when i'm clicking on the asp button then page refresh occur again. And it is loading my previous design of the page. I set the display:none of the <div> at the design time. so it is hiding my <div> again when occuring any other server side event. And i don't want let it happen.

Javascript function-

<script language="javascript" type="text/javascript">
       function toggle5(showHideDiv, switchTag) {
           try {
               '<%Session["temp"] = "'+more+'"; %>';
               var ele = document.getElementById(showHideDiv);
               var imageEle = document.getElementById(switchTag);
               if (ele.style.display == "block") {
                   ele.style.display = "none";
                   imageEle.innerHTML = 'More';
               }
               else {
                   ele.style.display = "block";
                   imageEle.innerHTML = 'Less';

               }
           }
           catch (err) {
               alert("Error");
           }
       }
</script>

html code is-

<div id="divSearch" style="float:left;height:100%;width:100%;">
<span style="float:right;height:27px;"><a id="displayText" href="#" onclick="javascript:toggle5('toggleText', 'displayText');">More</a></span>
</div>
<div id="toggleText" style="display:none;height:100%;width:100%;">
<div id="divCalls" style="width:24%;float:left;height:30%;">
<span style="float:left;width:100%;color:#3b5998;">
            <asp:CheckBox ID="chkNoCall" runat="server" Text="No call made in " 
        AutoPostBack="True" oncheckedchanged="chkNoCall_CheckedChanged"/>
    <asp:TextBox ID="txtNoCall" runat="server" Width="12%" Enabled="False"></asp:TextBox><span> days</span></span>
</div>
</div>

C# code of the Checkbox-

protected void chkNoCall_CheckedChanged(object sender, EventArgs e)
    {
        if (chkNoCall.Checked == true)
        {
            txtNoCall.Enabled = true;
        }
        else
        {
            txtNoCall.Enabled = false;
            txtNoCall.Text = "";
        }

    }

How to solve this problem?

thanks

• javascript
• asp
• html

• 1 Some JS and HTML would be helpful. I'm not sure what you're hiding and handling. – kasimir Commented Nov 18, 2011 at 8:49
• So basically you want to avoid having the asp button do a postback? – AndersDaniel Commented Nov 18, 2011 at 8:52
• @AndersDaniel : It should only execute the button event. Because i want to handle other asp events too. – Priyanka Commented Nov 18, 2011 at 8:58

4 Answers 4

put this data inside the updatepanel like this

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <span style="float:left;width:100%;color:#3b5998;">
            <asp:CheckBox ID="chkNoCall" runat="server" Text="No call made in " 
        AutoPostBack="True" oncheckedchanged="chkNoCall_CheckedChanged"/>
    <asp:TextBox ID="txtNoCall" runat="server" Width="12%" Enabled="False"></asp:TextBox><span> days</span></span>

    </ContentTemplate>
    </asp:UpdatePanel>

hope this help

In your button click event, return false. this will prevent postback.

Use ajax to get the server side data instead of submitting the page.

Try one of the following:

1. remove runat=server from the ponent (a ponent with runat=Server always submits a form.
2. use standard html controls
3. use javascript for html controls
4. it it's a ponent with autopostback feature; make autopostback=false