In my ASP.Net MVC3 Razor project.I have to implement Jqgrid to list my employee details. So from the tutorial Using jQuery Grid With ASP.NET MVC i have created action for my Employee Class.Now the problem is that,my View page is not rendering the jqgrid Script file.Form the chrome browser file it is found that the error is
uncaught typeerror object has no method jqgrid
I am attaching my browser output.
My Controller Code
[HttpGet]
public ActionResult ViewEmployeeData()
{
return View();
}
[HttpPost]
public ActionResult ViewEmployeeData(string Eord, string Empid, int page, int rows)
{
ElixirERPContext empdata = new ElixirERPContext();
var query = from emp in empdata.EmpData
select emp;
var count = query.Count();
var resultquery = new
{
tottal = 1,
page = page,
records = count,
rows = query.Select(x => new { x.EmpId, x.FirstName, x.MiddleName, x.LastName, x.Address, x.DateOfJoining, x.Department, x.Position }).ToList()
.Select(x => new { id = x.EmpId,Date=x.DateOfJoining, cell = new string[] { x.EmpId.ToString(), x.FirstName, x.MiddleName, x.LastName, x.Address, x.DateOfJoining.ToString(), x.Department, x.Position } }).ToArray(),
};
return Json(resultquery, JsonRequestBehavior.AllowGet);
//return View();
}
When i am using debugger it not entering ito the script section.ie,just rendering only the view page.
Layout Page
<!DOCTYPE html>
<html>
<head>
<META Http-Equiv="Cache-Control" Content="no-cache">
<META Http-Equiv="Pragma" Content="no-cache">
<META Http-Equiv="Expires" Content="0">
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/ui.multiselect.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/datepicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/daterangepicker.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/font-alpona.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/prettify.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/styles.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/bootstrap-reset.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/ico/favicon.ico")" rel="SHORTCUT ICON" type="image/ico" />
<link href="#Url.Content("~/Content/ico/apple-touch-icon-144-precomposed.png")" rel="apple-touch-icon-precomposed" sizes="144x144" type="image/png" />
<link href="#Url.Content("~/Content/ico/apple-touch-icon-114-precomposed.png")" rel="apple-touch-icon-precomposed" sizes="114x114" type="image/png" />
<link href="#Url.Content("~/Content/ico/apple-touch-icon-72-precomposed.png")" rel="apple-touch-icon-precomposed" sizes="72x72" type="image/png" />
<link href="#Url.Content("~/Content/ico/apple-touch-icon-57-precomposed.png")" rel="apple-touch-icon-precomposed" type="image/png" />
<script src="#Url.Content("~/Scripts/jquery-1.5.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/i18n/grid.locale-en.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.js")" type="text/javascript"></script>
#*<script src="#Url.Content("~/Scripts/js/jbootstrap.min.js")" type="text/javascript"></script>*#
<script src="#Url.Content("~/Scripts/js/jquery-ui-1.10.3.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/bootstrap.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/prettify.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.nicescroll.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.cookie.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.hoverIntent.minified.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.dcjqaccordion.2.7.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/jquery.sparkline.min.js")" type="text/javascript"></script>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/js/common-script.js")" type="text/javascript"></script>
</head>
<body>
<div class="main-wrapper">
<div class="scroll-top">
<i class="icon-arrow-up"></i>
</div>
#*Top Bar*#
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<i class="icon-menu-2 "></i>
<!-- LOGO -->
<div class="branding">
<a href="#">
<img src="#Url.Content("~/Content/images/alpona-logo.png")" alt="Alpona Logo"></a>
</div>
</div>
<div class="col-sm-4 col-md-4 responsive-notification-mnu">
<!---Edited Content Folder Id Top bar Notice-->
</div>
<div class="col-sm-4 col-md-4 clearfix responsive-log-mnu">
<!-- ADMIN DRODOWN MENU -->
<div class="loged-nav pull-right">
<ul class="clearfix">
<li class="log-nav dropdown pull-right"><a class="dropdown-toggle clearfix" data-toggle="dropdown">
<span class="pull-left loged-user-name">Admin</span><span class="logged-user-thumb pull-right"><img class="img-circle" src="#Url.Content("~/Content/images//admin-avatar.jpg")" alt="Admin"></span></a>
<div class="dropdown-menu">
<ul class="pull-right">
<li>kjamanebr#gmail.com</li>
<li>Edit Profile</li>
<li>Inbox</li>
<li class="divider"></li>
<li><i class="icon-lock-3"></i>#Html.ActionLink("Logout", "Logout", "Home", new {#class="logout-link" })</li>
</ul>
</div>
#*<li><i class="icon-user"></i>#Html.TextBoxFor(Model => Model.UserName, new { #class = "login-user-input", autocomplete = "off",placeholder="User Name" })</li>*#
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
#*Left-Nav-Menu*#
<div class="left-bar merge-left">
<div class="left-nav">
#RenderSection("leftnav",required:false)
</div>
</div>
<div class="main-container">
<div class="container">
#RenderBody()
</div>
</div>
</div>
</body>
</html>
Employee Data Vew Page
#{
ViewBag.Title = "ViewEmployeeData";
Layout = "~/Views/Shared/_LayoutUser.cshtml";
}
#* Script For Jqgrid*#
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/Home/ViewEmployeeData',
datatype: 'json',
mtype: 'GET',
colNames: ['EmpId', 'FirstName', 'MiddleName', 'LastName', 'Address', 'DateOfJoining', 'Department', 'Position'],
colModel: [
{ name: 'EmpId', index: 'EmpId', width: 40, align: 'left' },
{ name: 'FirstName', index: 'FirstName', width: 40, align: 'left' },
{ name: 'MiddleName', index: 'MiddleName', width: 200, align: 'left'},
{ name: 'LastName', index: 'LastName', width: 200, align: 'left'},
{ name: 'Address', index: 'Address', width: 200, align: 'left'},
{ name: 'DateOfJoining', index: 'DateOfJoining', width: 200, align: 'left'},
{ name: 'Department', index: 'Department', width: 200, align: 'left'},
{ name: 'Position', index: 'Position', width: 200, align: 'left'}],
pager: jQuery('#pager'),
width: 660,
height: 'auto',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'EmpId',
sortorder: "desc",
viewrecords: true,
caption: 'Employee Information'
});
});
</script>
<h2>ViewEmployeeData</h2>
<table id="list" ></table>
<div id="pager"></div>
Well from you sources i can see that you have referenced multiple jquery versions, try to simplify all of that include jquery script, then jqGrid.
Related
I receive data from io.socket and I would like to put the data in an array of object so this can be displayed in the slickgrid. For some reason the data pushed in the info is empty. Could somebody help me with this?
Thanks!!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid</title>
<link rel="stylesheet" href="/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="/examples/examples.css" type="text/css"/>
</head>
<body>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:600px;height:500px;"></div>
</td>
<td valign="top">
<h2>Demonstrates:</h2>
<ul>
<li>basic grid with minimal configurations</li>
</ul>
<h2>View Source:</h2>
<ul>
<li> View the source for this example on Github</li>
</ul>
</td>
</tr>
</table>
<script src="/lib/jquery-1.7.min.js"></script>
<script src="/lib/jquery.event.drag-2.2.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/slick.core.js"></script>
<script src="./slick.grid.js"></script>
<script>
var grid;
var info;
var info= [];
var columns = [
{id: "completed", name: "completed", field: "completed"},
{id: "createdAt", name: "createdAt", field: "createdAt"},
{id: "id", name: "id", field: "id"},
{id: "title", name: "title", field: "title"},
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
jQuery(function($){
var socket = io.connect();
socket.on('new message', function(data){
$.each(data, function(idx, obj) {
info.push(obj);
});
})
});
grid = new Slick.Grid("#myGrid", info, columns, options);
</script>
</body>
</html>
When you update the data behind slickgrid you need to tell the grid to redraw with the new data:
socket.on('new message', function(data){
$.each(data, function(idx, obj) {
info.push(obj);
});
grid.invalidate(); // not 100% sure this is needed....
grid.render();
})
I have been struggling to get jquery.jqgrid 4.4.1 working in my ASP.NET MVC 4 solution. I used NuGet to get jquery.jqgrid 4.4.1 installed into my project. I am attempting to insert a very simple grid into my page, just to make sure that my includes are all setup correctly. Here is what I have in my View file.
#{
ViewBag.Title = "Index";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<h2>Index</h2>
<script type="text/javascript">
$(document).ready(function() {
$("#myGrid").jqGrid({
url:'#Url.Action("GetJqGridData")',
datatype:'json',
myType:'GET',
colNames:['Id', 'Name'],
colModel:[
{ name: 'Id', index: 'Id'},
{ name: 'Name', index: 'Name'}
],
jsonReader: {
root: 'Data',
id: 'id',
repeatitems: false
},
pager: $('#myPager'),
rowNum:5,
rowList: [2, 5, 10],
width:600,
viewrecords:true,
caption: 'Jqgrid MVC Tutorial'
});
});
</script>
<table id="myGrid"></table>
<div id="myPager"></div>
Here is the Javascript error that I am receiving when running the solution.
Unhandled exception at line 54, column 5 in site/Grid
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'jqGrid'
The View never even gets to the point of calling the controller for the data.
Any help would be greatly appreciated.
Updated
Here is the HTML that is sent to the browser for additional detail.
Index - My ASP.NET MVC Application
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">your logo here</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Grid Test</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<link href="/Content/Site.css" rel="stylesheet" />
<link href="/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<h2>Index</h2>
<script type="text/javascript">
$(document).ready(function() {
$("#myGrid").jqGrid({
url:'/Grid/GetJqGridData',
datatype:'json',
myType:'GET',
colNames:['Id', 'Name'],
colModel:[
{ name: 'Id', index: 'Id'},
{ name: 'Name', index: 'Name'}
],
jsonReader: {
root: 'Data',
id: 'id',
repeatitems: false
},
pager: $('#myPager'),
rowNum:5,
rowList: [2, 5, 10],
width:600,
viewrecords:true,
caption: 'Jqgrid MVC Tutorial'
});
});
</script>
<table id="myGrid"></table>
<div id="myPager"></div>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2012 - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-1.7.2.js"></script>
</body>
</html>
I fired up a new project and installed the grid via the nuGet package and it looks to me is that you are causing a conflict with the default resource bundler that is setup with MVC4 projects by default now. You will either need to remove the following line from the Views/Shared/_Layout file:
#Scripts.Render("~/bundles/jquery")
Which will remove the bundled scripts.
Or add your jqGrid script references to the bundle config in the App_Start folder, and then remove the script tags from your view.
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/i18n/grid.locale-en.js",
"~/Scripts/jquery.jqGrid.min.js"));
<!----Remove These From your view-------!>
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
I have written a function in javascript for JQgrid.I checked it in JSFiddle and in JSfiddle it tells me that "your javascript code is valid".But when I run it in mvc3 razor, view grid is not display and it gives me an error in firebug that
TypeError: $("#list").jqGrid is not a function
below is my view file code
#model CBS.Models.Gledg
#{
ViewBag.Title = "JV";
}
<h2>JV</h2>
<link href="/Content/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="/Content/site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.7.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.multiselect.js")"type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tmpl.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqGrid.locale-en-4.1.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqGrid-4.1.2.min.js")" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$("#list").jqGrid({
url: '/Home/GetJVLedg()/',
datatype: 'json',
mtype: 'GET',
colNames: ['Code', 'Remarks', 'Debit'],
colModel: [
{ name: 'Code', index: 'Code', width: 40, align: 'left' },
{ name: 'Remarks', index: 'Remarks', width: 240, align: 'left' },
{ name: 'Debit', index: 'Debit', width: 200, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Code',
sortorder: "desc",
viewrecords: true,
//imgpath: '/scripts/themes/coffee/images',
caption: 'Gledg'
});
});
});
</script>
<fieldset>
<legend> Journal Voucher</legend>
<div id="txtArea">
<label>
Voucher NO
</label>
<input type="text" id="" name="VID" maxlength="20" PlaceHolder="Voucher No..." />
<label>Remarks</label>
<input type="text" id="" name="Rem" maxlength="150" PlaceHolder="Remarks..." />
<label>Voucher Date</label>
<input type="Text" id="datepicker" name="VDate" />
</div>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</fieldset>
I searched a lot but no solution is found which can solve my problem. help me
Place your code inside
$(document).ready(function (){})
then it will work.
And make sure that you have mentioned all your script&css reference links to get JQGrid in head section
I was testing out this demo on query-ui-maps:
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map
Everything is the same except for the head section of my index.html file:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.css" />
<link href="css/jquery.mobile-swatch.css" rel="stylesheet" type="text/css"/>
<link href="css/custom-icons.css" rel="stylesheet" type="text/css"/>
<link href="css/mapapp.css" rel="stylesheet" type="text/css"/>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script src="js/jquery.js"></script>
<script src="jquery-mobile/jquery.mobile.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-iphone.js"></script>
<script type="text/javascript" src="ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="js/jquery-ui-autocomplete-1-8-15.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
The demo works in safari on my desktop but loads the screen attached whether I test in an ios5 simulator or an ios5 phone. No errors are logged to the console. I am testing in Xcode and using phone gap.
Please help.
This is the code:
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#directions_map').live('pageinit', function() {
demo.add('directions_map', function() {
$('#map_canvas_1').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.set('getCurrentPosition', function() {
self.refresh();
self.getCurrentPosition( function(position, status) {
if ( status === 'OK' ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
self.get('map').panTo(latlng);
self.search({ 'location': latlng }, function(results, status) {
if ( status === 'OK' ) {
$('#from').val(results[0].formatted_address);
}
});
} else {
alert('Unable to get current position');
}
});
});
$('#submit').click(function() {
self.displayDirections({ 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(response, status) {
( status === 'OK' ) ? $('#results').show() : $('#results').hide();
});
return false;
});
}});
}).load('directions_map');
});
$('#directions_map').live('pageshow', function() {
demo.add('directions_map', $('#map_canvas_1').gmap('get', 'getCurrentPosition')).load('directions_map');
});
</script>
</head>
<body>
<div id="directions_map" data-role="page">
<div data-role="header">
<h1>jQuery mobile with Google maps v3</h1>
<!--<a data-rel="back">Back</a>-->
</div>
<div data-role="content">
<div class="ui-bar-f ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas_1" style="height:300px; width:100%;"></div>
<p>
<label for="from">From</label>
<input id="from" class="ui-bar-f" type="text" value="Göteborg, Sweden" />
</p>
<p>
<label for="to">To</label>
<input id="to" class="ui-bar-f" type="text" value="Stockholm, Sweden" />
</p>
<a id="submit" href="#" data-role="button" data-icon="search">Get directions</a>
</div>
<div id="results" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" style="display:none;">
<div class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-top ui-btn-up-undefined">Results</div>
<div id="directions"></div>
<div class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-bottom ui-btn-up-undefined"></div>
</div>
</div>
</div>
</body>
After much searching, this has proved to be the best answer:
http://code.google.com/p/jquery-ui-map/wiki/Examples#Example_get_user_position
<script type="text/javascript">
$(document).ready(function ()
{
$('.date').datepicker
({
dateFormat: 'mm/dd/yyyy',
showStatus: true
}
});
});
</script>
<div>
Date: <input type="text" id="datepicker"/>
</div>
<div>
#Html.TextBox("toDate", Model.toDate.ToString("dd/MM/yyyy"), new { #class = "date" })
</div>
The above is cshtml page.. I am clueless why the date that i click on the datepicker wont show up on the texbox/input .. Can you help?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>WeeklyReport</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<link href="//Content/Site.css" rel="stylesheet" type="text/css" />
<script src="//Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery.infieldlabel.min.js" type="text/javascript"></script>
</head>
<body>
</div>
<div class="content">
<div class="topSpacer">
</div>
<div class="maincontent">
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker
({
dateFormat: 'mm/dd/yyyy',
showStatus: true,
highlightWeek: true,
showAnim: "scale",
firstDay: 6,
showOptions: {
origin: ["top", "left"]},
onSelect: function() {
}
});
});
$(function() {
$("#datepicker").datepicker();
});
</script>
<div>
Enter search criteria
</div>
<div style="float: left">
<p>Date: <input type="text" id="datepicker"/></p>
</div>
<div style="float: left; padding-left: 30px">
<input class="date" id="toDate" name="toDate" type="text" value="15/12/2011" /> 
EndDate
</div>
</div>
</div>
</body>
</html>
`
What is this mess? What are you asking? In your question you didn't show how your code look like so we can only be guessing here. Normally when you ask a question you should show precisely how your code looks.
So here's a guess I can make to improve your code with a working example:
View:
#model AppName.Models.SomeViewModel
<script src="#Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.date').datepicker({
showStatus: true,
highlightWeek: true,
showAnim: 'scale',
firstDay: 6,
showOptions: {
origin: [ 'top', 'left' ]
},
onSelect: function () {
}
});
$('#datepicker').datepicker();
});
</script>
<div>
Date: <input type="text" id="datepicker"/>
</div>
<div>
#Html.TextBox(
"toDate",
Model.toDate.ToString("dd/MM/yyyy"),
new { #class = "date" }
)
</div>