Solved

JQuery works in plain html but not with ASP.NET

Posted on 2012-04-03
5
213 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

737 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