date picker in two different browsers
i am workin on asp.net mvc in that i using partial views. i got one proble ie date picker is working properly on IE but it is not working on Mozilla Firefox. the i have used is:
<link href="<%=ResolveClientUrl("~/Scripts/Themes/ui-lightness/jquery-ui-1.7.2.custom.css")%>" rel="stylesheet" type="text/css" />
<sc开发者_Python百科ript src="../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../Scripts/ui.core.js" type="text/javascript"></script>
<script src="../Scripts/ui.datepicker.js" type="text/javascript"></script>
and the function on view page is:
<script type="text/javascript">
$(document).ready(function() {
$("#txtTransationDate").datepicker();
});
</script>
<input id="txtTransationDate" name="txtTransationDate" type="text" />
please advice me for it. Thank in advance.
The code below works every time in each browser.
<html>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" type="text/css"
rel="stylesheet">
<style>
input { width:300px; }
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#txtTransationDate").datepicker();
});
</script>
<h2>Date Picker Test</h2>
<input id="txtTransationDate" name="txtTransationDate" type="text" value="Click here to show the date picker!" />
</body>
</html>
So lets examine the differences between your code and this one.
First off, i'm using the Google CDN for my js and css files this is ensuring me in the context of the test that my files are betting loaded. It also makes it easier to test ;)
I'm also using jQuery 1.4.2 (latest version) and 1.8.2 latest jQuery UI version.
The question is which version of jQuery are you using? and are the jQuery UI and jQuery versions compatible together for each browser?
Your css version 1.7.x this tends to suggest that the jQuery UI version you picked up could also be newer than the jQuery version.
I'm using the exact same JavaScript and the same input tag (with added attributes for the purpose of this test).
It seems obvious that the problem does not reside in the js and html you provided here.
I'm also showing you my whole context. Firefox is picky, IE also but not on the same stuff. So would it be possible that other js or malformed tags are interfering in FF?
Try running my test in a static htm page. If it works the first thing I'd try would be changing the scripts in the head for the ones I'm using.
On an other note, if you don't want or can't use the Google CDN in your final app. I suggest to use these helper methods to include css and js files. Because it's hard to foresee all the possible url levels (/) a MVC application could have.
/// <summary>
/// Include a javascript file.
/// </summary>
/// <param name="path"></param>
/// <param name="url"></param>
/// <returns></returns>
public static string IncludeJavascript(this UrlHelper url, string path)
{
return "<script src=\"" + url.Content(path) + "\" type=\"text/javascript\"></script>";
}
/// <summary>
/// Include a css file.
/// </summary>
/// <param name="path"></param>
/// <param name="url"></param>
/// <returns></returns>
public static string IncludeStylesheet(this UrlHelper url, string path)
{
return "<link href=" + url.Content(path) + " rel=\"stylesheet\" type=\"text/css\" />";
}
Usage:
<%= Url.IncludeJavascript("~/Scripts/jquery.js") %>
<%= Url.IncludeStylesheet("~/Scripts/Themes/jquery.css") %>
加载中,请稍侯......
精彩评论