admin管理员组文章数量:1427333
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
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
- Are all your JavaScript includes being loaded? You can check the firebug 'net' tab. – marto Commented Jul 25, 2011 at 9:48
- Are you sure you don't have double Ids of that TextBoxConnectedOn ? – Pehmolelu Commented Jul 25, 2011 at 9:49
- @marto All of them are being loaded, thanks for the tip I didnt know firebug can show me that. – Ferdie Commented Jul 25, 2011 at 9:54
-
Is the content dynamically loaded, after the master page? i.e. if the master page loads and runs the
$("#TextBoxConnectedOn").datepicker();, has the textbox withid="TextBoxConnectedOn"been loaded? – DaveDev Commented Jul 25, 2011 at 10:14
4 Answers
Reset to default 3As 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:
Remove the
runat="server"attribute from the control, to make it a regular HTML element (does it really need to be server generated?), orReference the correct
id
Like this:
<script type="text/javascript">
$(document).ready(function () {
$("#<%= TextBoxConnectedOn.ClientID %>").datepicker();
});
</script>
EDIT
As per @jbn's ment below, as of ASP.NET 4 you can tell server controls to use static IDs by setting their ClientIDMode to Static.
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 tab in firebug and make sure that jQuery is only being loaded once.
Hope this helps
<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.
Thats because your content page changes the id of your input type="text".
Two methods to overe 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.
本文标签： javascriptJQuery in content page not executingStack Overflow
版权声明：本文标题：javascript - JQuery in content page not executing - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745494711a2660755.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论