JQuery not working

Question

I am trying to implement JQuery in my web page but i am not been able to implement it successfully.

I have a master page

where i added one script for menu bar that is already using jquery hosted by Google

This is coded in master page itself

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

Now i want to implement a Jquery to set the css visibility property to true or false. into my content page of same master page.

    <script type="text/javascript">
            $(document).ready(function(){  
                $("#lnkAddMore").click(function(){
                 alert();
                  }
                  );
            });
        </script>

This html control is under my UpdatePanel. I dont know why it is not working ? I am using this control under UpdatePanel.

<input type="button" id="lnkAddMore" value="Add More" />

I tried to use it outside my update panel it is running successfully but not in UpdatePanel

I think there is a problem using it with an UpdatePanel

HERE IS MY PAGE SOURCE

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 


    <link href="../../Css/Domain.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript"> 
        $(document).ready(function(){  
            $("#lnkAddMore").click(function(){alert();$('#h').hide(100);});
            $('#h').show(100);
        });
    </script> 


       <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="divDomain" runat="server">
<asp:gridview/>
                <div style="text-align:right;">
                    <input type="button" id="lnkAddMore" value="Add More" />
                </div>
            </div>

        </ContentTemplate>
    </asp:UpdatePanel>

where are the definitions of ddmenu_open and ddmenu_timer functions? — curtisk, Mar 24 '10 at 19:49
@curtisk: their defination are within the same script tag. I just removed it here to make code more readable. That part of JQuery is running fine — Shantanu Gupta, Mar 24 '10 at 19:51
Are you trying to add the click event to an element that was loaded dynamically by the update panel? — Roman, Mar 24 '10 at 19:52

hunter · Answer 1 · 2010-03-24T19:53:13.983

4

Do you really have nested <script> tags or was it a typo?

<script type="text/javascript">

<script type="text/javascript">

If that's not a typo, then that's probably the issue.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {  
        $('#ddmenu > li').bind('mouseover', ddmenu_open)
        $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
    });

    $(document).bind('click', ddmenu_close); // do you really want to close on any click?
</script>

edited Mar 24 '10 at 19:53

answered Mar 24 '10 at 19:46

hunter

62,308
19
113
113

I used it like this – Shantanu Gupta Mar 24 '10 at 19:48
1

In your code above you have a – hunter Mar 24 '10 at 19:50

score 1 · Answer 2 · answered Mar 24 '10 at 19:59

1

Check that the ID of your button isn't actually getting changed to something like

ctl00_ContentPlaceHolder1_lnkAddMore

since it's residing in a content placeholder for the master page.

If it is, you'd have to adjust your JQuery.

answered Mar 24 '10 at 19:59

LesterDove

3,014
1
23
24

@Lester No its name is not changing. I have taken button as an HTML control – Shantanu Gupta Mar 24 '10 at 20:03
is it there some other way to call JQuery when using with UpdatePanel – Shantanu Gupta Mar 24 '10 at 20:04
This is being displayed in source. ID is same there

– Shantanu Gupta Mar 24 '10 at 20:07

score 1 · Accepted Answer · edited May 23 '17 at 12:01

I have used two approaches with jQuery and UpdatePanels.

The first is this: jQuery $(document).ready and UpdatePanels?

The other approach I found on Rick Strahl's blog (http://www.west-wind.com/Weblog/posts/154797.aspx) Which is to do something like this in the code behind:

ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "alertScript", 
    @" $(document).ready(function(){  
            $("#lnkAddMore").click(function(){
             alert();
              }
              );
        });", true);

Check this out for another example: Problem with ScriptManager.RegisterClientScriptBlock and jQuery in Internet Explorer 8

Also have a look at jQuery's live() event subscriber.

score 0 · Answer 4 · answered Mar 24 '10 at 19:53

0

When you're loading code in under an UpdatePanel, try not wrapping it in $(document).ready();. Ready isn't fired on document for AJAX events.

answered Mar 24 '10 at 19:53

Jess

42,368
6
37
51

I edited my page code to . But still it is not working – Shantanu Gupta Mar 24 '10 at 20:06

JQuery not working

4 Answers4

Linked