In this blog it should be explained how to implement the jquery datepicker for all DateTime inputs. I fail miserably however when I try to follow the steps taken. I suspect that I am setting the references wrong somewhere, as there are now already newer (and diffverently named) .js files in my VS project than those mentioned in the blog. Is there a place where the implementation is spoon fed for the absolute jquery NOOB?
EDIT:
I also found this link. After copying in the code as mentioned I am greeted by an exception in jquery 1.5.1-min.js that says that the object doest not support that property or method...
EDIT(2)
I am at my wits' end wth this one, I tried to add the references Tridus suggested, but I have different versions and of some versions I have a .min.js alternative. All the relevant code:
In StandIn.cs:
[DisplayName("Available from")]
[DisplayFormat(DataFormatString="{0:d}",ApplyFormatInEditMode=true,NullDisplayText="(not specified")]
public DateTime? From { get; set; }
In Edit.cshtml:
<div class="editor-field">
#Html.EditorFor(model => model.Standin.From)
#Html.ValidationMessageFor(model => model.Standin.From)
</div>
In _Layout.cshtml:
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
In \Shared\EditorTemplates\DateTime.cshtml
#model Nullable<System.DateTime>
#if (Model.HasValue)
{
#Html.TextBox("", Model.Value.ToShortDateString(), new { #class = "date" })
}
else
{
#Html.TextBox("",string.Empty)
}
<script type="text/javascript">
$(document).ready(function () { $('.date').datepicker({ dateFormat: "dd/mm/yy" }); });
</script>
Mind: all the code performs without problems until I add the script tags: then on showing Edit.cshtml jquery-1.5.1.min.js throws an exception about a property or method not being supported.
This is a good place to start: http://jqueryui.com/demos/datepicker/
What you're almost certainly missing is just the script references to the right jQuery libraries. These need to be somewhere in the resulting HTML (either in the template for the DateTime object itself, or in your _layout.cshtml so it's just included everywhere). Adjust paths and versions accordingly for what you have in your project.
<script src="#Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.14.min.js")" type="text/javascript"></script>
If you have it, you probably also need a jQuery UI theme:
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
That's the only thing I didn't see in the blog post. Everything else really is as direct as they say.
I am getting more and more convinced that the problem lays with the .js files that are included with a default MVC3 project in Visual Studio 2010: they must lack some of the requiered dependent .js files. I went to the jquery ui site as suggested by Erik, downloaded the full jquery ui package and used the references and .js files from the default.html in the development-bundle/demo/datepicker folder. That works! However, as a VS MVC3 project comes with a lot of premade custom scripts I had to keep the downloaded .js files separate from those in the Scripts folder. Therefor I created a new JQueryScripts folder that I use for the UI elements. The references to these .js files cannot be added to _Layout.cshtml to avoid a conflict and I did not include the MasterPage (_Layout.cshtml) for the same reason.
For the record the resulting DateTime.cshtml EditorTemplate that works with a Nullable DateTime and shows how to implement localization for one language (Dutch in this case). Note that this code will be made obsolete with a new release of jquery(ui), but it gives an idea:
<link rel="stylesheet" href="../../../JQueryScripts/themes/base/jquery.ui.all.css"/>
<script type="text/javascript" src="#Url.Content("~/JQueryScripts/jquery-1.6.2.js")"></script>
<script type="text/javascript" src="#Url.Content("~/JQueryScripts/ui/jquery.ui.core.js")"></script>
<script type="text/javascript" src="#Url.Content("~/JQueryScripts/ui/jquery.ui.widget.js")"></script>
<script type="text/javascript" src="#Url.Content("~/JQueryScripts/ui/jquery.ui.datepicker.js")"></script>
<script type="text/javascript" src="#Url.Content("~/JQueryScripts/ui/i18n/jquery.ui.datepicker-nl.js")"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker').datepicker({
dateFormat: "dd-mm-yy",
minDate:0
});
});
</script>
#model Nullable<System.DateTime>
#if (Model.HasValue)
{
#Html.TextBox("", Model.Value.ToShortDateString(), new { #class = "datepicker" })
}
else
{
#Html.TextBox("", string.Empty, new { #class = "datepicker" })
}
Related
I am trying to get Kendo Ui (Free Version working). I am trying to implement the date picker with the below code but alls I get is an empty input field. Does anyone have any suggestions on how to resolve this?
<!DOCTYPE html>
<html>
<head>
<link href="/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo/2015.3.1111/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.core.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.calendar.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.popup.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.datepicker.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.data.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.list.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.combobox.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.dropdownlist.min.js></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.multiselect.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.validator.min.js"></script>
<input id="TimeSlot" name="TimeSlot" type="datetime" />
<script type="text/javascript">
$(document).ready(function () {
debugger;
$("#TimeSlot").kendoDatePicker();
//var datepicker = $("#datepicker").data("kendoDatePicker");
});
</script>
</body>
</html>
You need to reference all these javascript files in order for the DatePicker to work. You can use the Kendo UI Custom Download tool to find out which javascript files you need to reference and to download a custom javascript file that contains everything you need:
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.core.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.calendar.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.popup.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.datepicker.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.data.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.list.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.combobox.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.dropdownlist.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.multiselect.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.validator.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.aspnetmvc.min.js"></script>
UPDATE:
Your text-box's id is "TimeSlot", but in your script you're referring to #datepicker which doesn't even exist. Change your script to this:
<script type="text/javascript">
$(document).ready(function () {
$("#TimeSlot").kendoDatePicker();
//var datepicker = $("#TimeSlot").data("kendoDatePicker");
});
</script>
By the way, you won't need kendo.aspnetmvc.min.js if you don't want to use Kendo's Html Helpers, which is not something that I would recommend if you are using asp.net MVC. With kendo.aspnetmvc.min.js, you wouldn't even need the script, you could just replace your text-box (input tag) with this:
#(Html.Kendo().DatePicker().Name("TimeSlot"))
I've been fighting with this for a while now and have searched extensively to no avail. I grabbed a link someone posted here in response to my same question. enter link description here I've copied the code to my editor, placed the stylesheet inline, linked all the scripts correctly I think...
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"</script>
<style> #docs{
display:block;
postion:fixed;
bottom:0;
right:0;
}
</style>
</head>
<body>
<form id="form_validation_reg_generate_user">
<input type="text" name="userPassword" id="userPassword" />
<br/>
<input type="submit" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$('form#form_validation_reg_generate_user').validate({
rules: {
userPassword: {
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form submission'); // for demo
return false; //form demo
}
});
});
</script>
</body>
No validation occurs... I have a feeling I'm missing something obvious. It was working in a separate page when I was only validating required fields. Since adding the minlength... nothing.
I'm doing a test with your code and it seems to work perfectly. Check if your jquery.validate.min.js path is correct and if you can access properly to every script from your system.
Also you can use your browser development tools to check if you have exceptions.
The jquery.validate.iin.js version I used in the text is from this website. Maybe you have an older script?
I am creating an application in mvc3 razor.i am using jqxnavigationbar to create navigationa panels. i added the required js and css files in the folders. below is my examle code in layout
Header 1
Content 1
Header 2
Content 2
Header 3
Content 3
below is my javascript function in header portion
<script type="text/javascript">
$(document).ready(function () {
// Create jqxNavigationBar
$("#jqxnavigationbar").jqxNavigationBar({ width: 200, height: 200 });
$("#jqxnavigationbar").bind('expandedItem', function (event) {
var index = event.item + 1;
alert("Expanded: Header " + index);
});
});
but when i run the project it shown error
$("#jqxnavigationbar").jqxNavigationBar is not a function. and navigation panels are not display in the browser.
what can i do to remove error and use jq navigation bar.
Did you put your script :
At the Top of your _Layout view ?
Your error means that the jquery nav lib has not yet extended the jquery one.
Also look at the script window from your web browser debuging tool to check if you don't load multiple jquery-1.8.3* lib, you should only have one, the full ou minified one.
I did a mistake in my head section in layout page. After adding refference of required jqxnavigationbar js and css files I added the refference of jquery-1.4.2.min.js file.so it does not work for me. Now after removing those refference the final header code is below which works fine for me.
<link rel="stylesheet" href="/Content/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="#Url.Content("~/Content/jqx.energyblue.css")" type="text/css" />
<script type="text/javascript" src="/scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/scripts/jqxcore.js"></script>
<script type="text/javascript" src="/scripts/jqxnavigationbar.js"></script>
<script type="text/javascript" src="/scripts/jqxexpander.js"></script>
#*AUTOCOMPLETE JQUERY FILES AND CSS FIES*#
<link href="/Content/jquery.ui.all.css" rel="stylesheet" type="text/css" />
#* <script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>*#
<script src="/Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
#RenderSection("PageScripts",false)
put code for jqnavigation bar in javascript portion.
I try to use jQueryUIHelpers.Mvc3 but when i click on the box the datebox picker not appear.
I installed the jqueryUIHelpers.Mvc 3 package like here http://jqueryuihelpers.apphb.com/Docmo/Overview/GettingStarted
But when i am running the page and click the date box nothing appears.
Here is my view:
#model MvcApplication4.Models.Reservation
#using JQueryUIHelpers
#{
ViewBag.Title = "Create";
}
<head>
<h2>Create</h2>
<title>jQuery UI Helpers - #ViewBag.Title</title>
<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>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.unobtrusive.min.js")" type="text/javascript"></script>
</head>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Reservation</legend>
<div>
<label for="anotherDate">Select another date: </label>
#(Html.JQueryUI().Datepicker("anotherDate").MinDate(DateTime.Today).ShowButtonPanel(true)
.ChangeYear(true).ChangeMonth(true).NumberOfMonths(2))
</div>
May be it is because you have called jquery after the validate js and an error occurred and script stopped functioning. Check your error console and include jquery-1.7.1.min.js before all other jquery plugin js and try again. I didnt find any error in the datepicker initialisation function.
I believe it is because when you run Install-Package jQueryUIHelpers.Mvc3 the current version installs ~/Scripts/jquery-ui-1.8.19.min.js and ~/Scripts/jquery-1.7.2.min.js. However, the demo code references version ~/Scripts/jquery-ui-1.8.18.min.js and ~/Scripts/jquery-1.7.1.min.js which is the version you have used. Unless you have manually installed this file, you will not be referencing the correct version.
Tablesorter not working on MVC3 web app on Visual Studio 2010?
To reproduce the problem:
open Visual Studio 2010
create a new ASP.NET MVC 3 Web Application
Replace Views/Shared/_Layout.cshtml with:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#* This doesn't work and I don't know why *#
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.min.js")" type="text/javascript"></script>
#*This works*#
#*<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
*#
</head>
<body>
<div class="page">
<div id="main">
#RenderBody()
</div>
</div>
</body>
</html>
Replace Views/Home/Index.html with:
<h2>debug jquery Kano</h2>
<p>
testing
</p>
<table id="theTable" class="tablesorter">
<thead>
<tr><th>Tic</th><th>Tac</th><th>Toe</th></tr>
</thead>
<tbody>
<tr><td>o</td><td>o</td><td>x</td></tr>
<tr><td>x</td><td>o</td><td>o</td></tr>
<tr><td>o</td><td>x</td><td>x</td></tr>
</tbody>
</table>
<script type="text/javascript">
// $(function () {
// alert("$: jQuery found!");
// });
$(document).ready(function () {
$("#theTable").tablesorter();
});
</script>
Download jquery.tablesorter.min.js from http://tablesorter.com and put into /Scripts directory.
Build and run the app.
As you will hopefully see, the tablesorter call in Index.cshtml doesn’t seem to successfully execute.
Thank you for your help!
Cheers,
Kevin
bestway to do is add tablesorter.js to bundleconfig.cs like this-
bundles.Add(new ScriptBundle("~/bundles/jquery.tablesorter").Include("~/Scripts/jquery.tablesorter.js"));
On _layout.cshtml page
add css-
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="#Url.Content("~/Content/style.css")" rel="stylesheet" type="text/css" />
</head>
and on bottom add script like
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#RenderSection("scripts", required: false)
</body>
</html>
and on the page using add a session for it.. so u dont have to use on every single page
#section scripts
{
#Scripts.Render("~/bundles/jquery.tablesorter")
<script type="text/javascript">
$(document).ready(function () {
$("#myTable").tablesorter();
});
$(document).ready(function () {
$("#myTable").tablesorter({ sortList: [[0, 0], [1, 0]] });
});
</script>
}
The problem seems to be in the way that Javascript is cached. The workaround is to close all instances of the browser between runs and to minimize the use of the back buttons on the browser.