JQuery works in plain html but not with ASP.NET

I have a button and div on my page. Div is not visible initially and I want to use JQuery to make it visible whenever the user clicks a button.

Below is my code that makes div invisible when the document loads and then, when the button is clicked, makes it visiable again. it works in plain html but not with ASP.NET page. On ASP.NET page, as soon as I click the button, the div appears for a second and disappears rigth away. Can someone help me fix my code?



<script type="text/javascript">
            <!--
            $(document).ready( function(){
             $('#div1').css('display', 'none');
                $('#btn1').click(function(){
                    $('#div1').css('display', 'block');
                });
            });
            //-->
            </script>
                                  1:

I tried using $('#div1').show() but it produces the same result

I also tried setting visibility to visible but to no avail
LVL 35
YZlatAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
<script type="text/javascript">
            <!--
            $(document).ready( function(){
             $('#div1').css('display', 'none');
                $('#btn1').click(function(e){
                    e.preventDefault();
                    $('#div1').show(); 
                    // return false; // if you prefer, you can use this instead preventDefault
                });
            });
            //-->
            </script>

Open in new window

0
 
Tom BeckCommented:
Is your button an asp:Button? If so, asp:Buttons automatically cause a postback. When the page posts back, the div is reset to display:none by the jquery, thus the brief visibility of the div. You can use a standard input to correct the problem.

    <input id="btn1" type="button" runat="server" value="Button 1" />
0
 
ramguntiCommented:
Dear Friend ,

  If U want the button post back and as well as u need to make the div visible true then use the fallowing Code


In aspx Page
_____________


function fncVisible()
{
   $('#div1').css('display', 'none');
                $('#btn1').click(function(){
                    $('#div1').css('display', 'block');
                });
}


and in .cs Page
________________

Protected void button_Click(object sender,Eventargs e)
{
//If U have used Update Pannels in Aspx
 ScriptManager.RegisterStartupScript(this, this.GetType(), "VisiblePopup", "fncVisible();", true);



}
0
 
dhawalsethConnect With a Mentor Commented:
If you are using asp:Button and only using the click event to show hide this div, then remove the on click event.
OR
you can try the above solution.

ALSO,
if you can do both.
I am using this code to show a check box list of subevents on click of a checkbox
Js/jquery function:
function ShowEventsList(obj) {
        var isChecked = false;
        if (obj != null) {
            if (obj.checked) {
                isChecked = true;
            }
            else {
                isChecked = false;
            }
            var subEventsList = document.getElementById("<%=pnlSubEvents.ClientID%>");
            if (subEventsList != null) {
                if (isChecked) {
                    subEventsList.style.display = "block";
                }
                else {
                    subEventsList.style.display = "none";
                }
            }
        }
        return false;
    }
-------------------
<asp:CheckBoxList ID="chkLstEventAttend" CssClass="CheckBoxList1" runat="server"
                        ToolTip="Please select the event(s) you will attend."
                        AutoPostBack="false">
                        <asp:ListItem Value="1">ITEM 1</asp:ListItem>
                        <asp:ListItem Value="2" onclick="ShowEventsList(this);">ITEM 2</asp:ListItem>
                        <asp:ListItem Value="3">ITEM 3</asp:ListItem>
                        <asp:ListItem Value="4">ITEM 4</asp:ListItem>
                    </asp:CheckBoxList>

Open in new window


We used this code to have a jquery functionality on combobox with its postpack preserved.
$(document).ready(function () 
    {
        $("#<%= ddlSessionTitle.ClientID %>").combobox(
        {
            selected: function (event, ui) {
                __doPostBack('callPostBack', '');
        }
        });
        $("#<%= ddlSessionTitle.ClientID %>").autocomplete();
    });

Open in new window


Mark as answer if helped.
Enjoy!!
0
 
YZlatAuthor Commented:
Worked like a charm!
0
All Courses

From novice to tech pro — start learning today.