Hello Renu123,
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") %>