CODEWITHSUNDEEP
javascriptjqueryasp.netmaster-pages
Ferdie
Ferdie

Reputation: 47

JQuery in content page not executing

I have been trying to make jquery datepicker plugin work on a content page but have been unable to make the page execute any jquery at all. I managed to get the datepicker working on my masterpage but not the content page. Also the firebug tool for firefox didnt pick up any javascript errors. If anyone has a solution for making the datepicker work on my content page that would be great. Thanks in advance.

.ASPX: 

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
  <script type="text/javascript">
    $(document).ready(function () {
      $("#TextBoxConnectedOn").datepicker();
    });
  </script>
</asp:Content> 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <input type="text" name="TextBoxConnectedOn" id="TextBoxConnectedOn" 
  runat="server" MaxLength="10"/>  
</asp:Content>

Masterpage head: 

<head runat="server">
  <link type="text/css" href="pages/scripts/themes/ui-darkness/jquery.ui.all.css"
  rel="stylesheet" />
  <script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="scripts/ui/jquery.ui.core.min.js"></script> 
  <script type="text/javascript" src="scripts/ui/jquery.ui.datepicker.min.js"></script>
  <asp:ContentPlaceHolder ID="HeadContent" runat="server">
  </asp:ContentPlaceHolder>
</head>

EDIT
I changed "#TextBoxConnectedOn" to "#<%= TextBoxConnectedOn.ClientID %>" and now firebug shows that its loading the needed pictures once i click on the input but still it doesnt show the datepicker. My question topic and main source of frustration was the jquery not executing though so I suppose this post is answered, thanks for all the info, Ill see if i can find out why it doesnt display

Upvotes: 2

Views: 6477

Answers (4)

James McCormack
James McCormack

Reputation: 9934

As a server-generated control the id of the input box won't actually be TextBoxConnectedOn; ASP.NET will have generated an id for you. View the source of the page in your browser to verify this.

You have two choices:

  1. Remove the runat="server" attribute from the control, to make it a regular HTML element (does it really need to be server generated?), or

  2. Reference the correct id

Like this:

 <script type="text/javascript">
   $(document).ready(function () {
     $("#<%= TextBoxConnectedOn.ClientID %>").datepicker();
   });
 </script>

EDIT

As per @jbn's comment below, as of ASP.NET 4 you can tell server controls to use static IDs by setting their ClientIDMode to Static.

Upvotes: 3

codeandcloud
codeandcloud

Reputation: 55200

Thats because your content page changes the id of your input type="text".

Two methods to overcome this.

(a) Give a class to input type and call it using that.

<input type="text" name="TextBoxConnectedOn" id="TextBoxConnectedOn" 
  runat="server" MaxLength="10" class="mypicker/>

Now call it like

$(document).ready(function () {
  $(".mypicker").datepicker();
});

(b) Make the HTMLControl an ASP.NET Control and set ClientIDMode="static" 

<asp:TextBox ID="TextBoxConnectedOn"  runat="server" 
        ClientIDMode="Static"
        Width="240">
</asp:TextBox>

Then there is no need to change your script.

Upvotes: 0

ek_ny
ek_ny

Reputation: 10233

 <script type="text/javascript" src='<%=Url.Content("~/scripts/ui/jquery.ui.core.min.js")%>'></script>

This is usually a result of the js file not loading because of how the routing works. Try using the Url.Content() method as shown above.

Upvotes: 0

BenW
BenW

Reputation: 1312

I've had a similar problem before, where jQuery was being loaded on the master page, and then also the content page, this caused the jQuery on the content page to not work, so check the .net tab in firebug and make sure that jQuery is only being loaded once.

Hope this helps

Upvotes: 0

Related Questions