Unable to get jquery.jqgrid 4.4.1 working in ASP.NET MVC - jqgrid
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>
Related
Type Error in JqGrid in ASP.Net MVC3 Razor
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.
two jqgrid no data loaded
When I duplicate a working grid with a different id, data are not loaded in both grid.
Both grids are shown and they both query the same url. Json data is sent from php but data is not loaded into grid.
If i comment any of the grids, the other one loads data properly.
Any help greatly appreciated. I'm using jqgrid 4.4.1
Here is my code
<div class="row-fluid">
<script type="text/javascript" language="javascript">
function LoadgridInput () {
jQuery('#gridInput').jqGrid({
height:100,
hoverrows:false,
viewrecords:true,
caption:" ",cellEdit: true,rowNum:10000,
scroll:1,
rowList:[30,100,500],
datatype:"json",
url:"grid.php?sec=Agility&fn=gcSandFInput_V1",
cellurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
editurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
sortname:"default",
autowidth:true,
shrinkToFit:true,
gridview:false,
pager:"#gridInputPager",
postData:{oper:"grid"},
jsonReader:{repeatitems:false,root: "rows",page: "page",total: "total",records: "records",repeatitems: true,cell: "cell",id: "id",userdata: "userdata"},
colModel:[
{name:" ",index:"nope",align:"left",search:true,editable:false,width:60},{name:"04-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"11-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"12-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"01-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"02-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"03-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"04-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2013",index:"nope",align:"left",search:true,editable:false,width:60 }]})
jQuery('#gridInput').jqGrid('navGrid','#gridInputPager',{refresh:true,edit:false,add:false,del:false,search:true,view:false,"excel":true,"pdf":false,"csv":false,"columns":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"errorTextFormat":function(r){ return r.responseText;}}, {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"closeAfterSearch":true,"multipleSearch":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});
};
</script>
<script type="text/javascript" language="javascript"> runOnLoad(LoadgridInput); </script>
<div id="gridInputWrapper">
<table id="gridInput"></table> <div id="gridInputPager"></div>
<div class="gridInputFooter"></div>
</div>
</div>
<div class="row-fluid">
<script type="text/javascript" language="javascript">
function LoadgridList () {
jQuery('#gridList').jqGrid({
height:100,
hoverrows:false,
viewrecords:true,
caption:" ",cellEdit: true,rowNum:10000,
scroll:1,
rowList:[30,100,500],
datatype:"json",
url:"grid.php?sec=Agility&fn=gcSandFInput_V1",
cellurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
editurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
sortname:"default",
autowidth:true,
shrinkToFit:true,
gridview:false,
pager:"#gridListPager",
postData:{oper:"grid"},
jsonReader:{repeatitems:false,root: "rows",page: "page",total: "total",records: "records",repeatitems: true,cell: "cell",id: "id",userdata: "userdata"},
colModel:[
{name:" ",index:"nope",align:"left",search:true,editable:false,width:60},{name:"04-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"11-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"12-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"01-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"02-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"03-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"04-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2013",index:"nope",align:"left",search:true,editable:false,width:60 }]})
jQuery('#gridList').jqGrid('navGrid','#gridListPager',{refresh:true,edit:false,add:false,del:false,search:true,view:false,"excel":true,"pdf":false,"csv":false,"columns":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"errorTextFormat":function(r){ return r.responseText;}}, {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"closeAfterSearch":true,"multipleSearch":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});
};
</script>
<script type="text/javascript" language="javascript">runOnLoad(LoadgridList);</script>
<div id="gridListWrapper">
<table id="gridList"></table> <div id="gridListPager"></div>
<div class="gridListFooter"></div>
</div>
</div>
error $("#list").jqGrid is not a function in mvc3 razor
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
Default values in ko.observable property not showing
I am trying out knockoutjs at the moment, with my fairly rudimentary knowledge of javascript. I have set up a basic ASP.NET MVC 3 app for this purpose. Here's the snippet I set up in the Home/Index.cshtml view:
#if(false)
{
<script src="../../Scripts/jquery-1.6.3.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
}
#{
ViewBag.Title = "Home Page";
}
<script type="text/javascript">
var entryDataViewModel = {
registration: ko.observable("Registration"),
registeredName: ko.observable("Name"),
entryClass: ko.observable("Junior")
};
ko.applyBindings(entryDataViewModel);
</script>
<h2>#ViewBag.Message</h2>
<p>
Registration: <span data-bind="text: registration"></span><br />
Name: <span data-bind="text: registeredName"></span><br />
Class: <span data-bind="text: entryClass"></span><br />
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
For some weird reason nothing is showing, not even the default values. If I debug through Firebug the ViewModel is showing the properties as being empty too. Have I missed something here?
Many thanks,
Dany.
ADDED: the content of the _Layout.cshtml - it's all stock standard stuff, except for the addition of knockout, and using jquery 1.6.3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/knockout-1.3.0beta.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.6.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
The answer I voted above only worked when I tried it in a plain webpage - not when I tried it in my MVC view. As it turned out I put the script block in the wrong position. I moved it to the end of the view, after the page elements have been processed. The other option is to wrap it within $(document).ready() then you can put the script block containing ViewModel and call to ko.applyBindings() anywhere you want...
use $(document).load(function(){:
<script type='text/javascript'>
//<![CDATA[
$(document).load(function(){
var entryDataViewModel = {
registration: ko.observable("Registration"),
registeredName: ko.observable("Name"),
entryClass: ko.observable("Junior")
};
ko.applyBindings(entryDataViewModel);
});
//]]>
</script>
Have a look: http://jsfiddle.net/S8Rh5/ - it works just fine.
textfield not displaying date picked from jquery datepicker in mvc3?
<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>