Solved

JQuery works in plain html but not with ASP.NET

Posted on 2012-04-03
5
197 Views
Last Modified: 2012-08-14
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
0
Comment
Question by:YZlat
5 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37802580
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 450 total points
ID: 37804247
<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
 

Expert Comment

by:ramgunti
ID: 37804684
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
 
LVL 7

Assisted Solution

by:dhawalseth
dhawalseth earned 50 total points
ID: 37804726
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
 
LVL 35

Author Closing Comment

by:YZlat
ID: 37805838
Worked like a charm!
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now