I'm completely new to JQuery and MVC.
I'm working on a pet project that uses both to learn them and I've hit my first snag.
I have a date field and I want to add the JQuery datepicker to the UI. Here is what I have done:
Added <script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
to the site.master
Inside my Create.aspx (View), I have
<asp:Content ID="Create" ContentPlaceHolderID="MainContent" runat="server">
<h2>
Create a Task</h2>
<% Html.RenderPartial("TaskForm"); %>
</asp:Content>
and inside "TaskForm" (a user control) I have:
<label for="dDueDate">
Due Date</label>
<%= Html.TextBox("dDueDate",(Model.Task.TaskID > 0 ? string.Format("{0:g}",Model.Task.DueDate) : DateTime.Today.ToString("MM/dd/yyyy"))) %>
<script type="text/javascript">
$(document).ready(function() {
$("#dDueDate").datepicker();
});
</script>
As you can see, the above checks to see if a task has an id > 0 (we're not creating a new one) if it does, it uses the date on the task, if not it defaults to today. I would expect the datepicker UI element to show up, but instead I get:
"Microsoft JScript runtime error: Object doesn't support this property or method" on the $("#dDueDate").datepicker();
Ideas? It is probably a very simple mistake, so don't over-analyze. As I said, this is the first time I've dealt with MVC or JQuery so I'm lost as to where to start.
datepicker() is a jQuery UI method, it looks like you are only using jQuery.
You need to download and include jQuery UI in addition to jQuery
Make sure you download the version compatible with jQuery 1.3.2.
You have included jQuery library, but not jQueryUI library. You have to do that with something like this:
<script src="../../Scripts/jqueryui-1.8.1.min.js" type="text/javascript"></script>
You'll need to include JQuery UI as well to get datepicker.
Related
I am using VS2012 and trying to use Modernizr in a new ASP.Net 4.5 Web Forms application to display the JQuery datepicker if the browser (IE 11) doesn't support it.
I have made sure that Modernizer, JQuery and JQuery UI NuGet packages are installed. In the Default.aspx page I have added the following script block to the first asp:Content container.
<script type="text/javascript">
if (!Modernizr.inputtypes.date) {
alert("your browser doesn't support date input type");
$("input[type=date]").datepicker();
}
</script>
I can see the alert but the datepicker never shows when I click on the input field which is defined as:
<asp:TextBox ID="TextBox5" runat="server" type="date" placeholder="e.g. 31/12/2014" ></asp:TextBox>
In a simple HTML page it is working fine and I can see the datepicker.
Instead of $("input[type=date]").datepicker(); The following script is working fine in IE 11.
<script type="text/javascript">
if (!Modernizr.inputtypes.date) {
$(function () {
$("input[type='date']")
.datepicker()
.get(0)
.setAttribute("type", "text");
});
}
</script>
It seems that IE 11 has partial support of date that's why we need to change the type back to text after the jQuery datepicker is attached to the input.
Hi I am trying to add ckeditor on another page of my asp.net website but something seems to be wrong because it appears as a textArea.Here is what I have done so far:
1.I registered the assembly:
<%# Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
2.Added a path to ckeditor javascript file:
<script type="text/javascript" src="~/js/pluggins/ckeditor/ckeditor.js"></script>
3.Added the Ckeditor controler:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>
I have used ckeditor on another page like this and it worked.Is it something I am missing here because it results in only a textarea with none of the wysiwyg properties?
My guess is your ckeditor.js path is probably wrong or there is an unrelated js error:
<script type="text/javascript" src="~/js/pluggins/ckeditor/ckeditor.js"></script>
Is js your root path and do you have another js error preventing it from intializing?
I'm following this tutorial but it doesn't tell me how to run this jQuery script. Since this script will be run pretty much everywhere, I should attach this script to the Masterpage right, but how?
I guess what I'm asking is, what HTML tag do I need to reference the jQuery script, and where to put the jQuery code.
I have this library already in my project:
Thanks.
jQuery is a client-side scripting tool. ASP .Net is a server-side language.
You are correct, to add a reference to jQuery for all pages it is a good idea to use a master page for this purpose.
In the master page, you simply add the HTML script reference to the master page:
<# MasterPage .... >
<html>
<head>
<script src="../Scripts/jquery-1.4.1.js"></script>
</head>
<body>
<asp:ContentPlaceHolder id="Content" />
</body>
</html>
Add a script element for each of the jQuery scripts. Make sure the jquery-1.4.1.js is the first referenced though.
Also make sure you use the <script></script> instead of <script/> due to some browser issues.
Some newer Visual Studio MVC project files do this script referencing for you (as Lenial mentioned), and this may be easier.
Because i want to set a Extender (Calendar from the AJAX Controls toolkit) on a textbox,
I have to change the code from
<%= Html.TextBox("name") %>
to
<asp:TextBox ...>
But how can i bind the attribute "name" on the element?
Thank you
Have you tried using the jQuery DatePicker? It's much more friendly with MVC than the standard ASP controls and related extenders.
<%= Html.TextBox( "name" ) %>
<script type="text/javascript">
$(function() {
$('[name=name]').datepicker();
});
</script>
It's possible to use the asp.net Ajax Beta to create a client side Calendar.
See here:
http://www.asp.net/ajaxlibrary/HOW%20TO%20Use%20the%20Calendar%20Control.ashx
Strangely this version of the asp.net ajax library uses JQuery as well.
I would personally use the JQuery version... But the new asp.net ajax library is trying to evolve so that it works better with 'pure' html and asp.net mvc.
Ok,
I included the js from the google api, also the css.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css" type="text/css" rel="Stylesheet" class="ui-theme" />
Then set the datepicker like this:
<script type="text/javascript">
$(document).ready(function() {
$("#startDate").datepicker();
});
</script>
I'm trying to use jGrowl in an aspx page. But I encountered a problem that I couldn't solve.
When I use a regular aspx page the jGrowl is working fine. however when I use the page with a MasterPage the jGrowl is not working ,I got a javascript error saying $.jGrowl is not a function.
From Firebug Console, I can query $; $("a"); they return objects. Which means jquery is loaded, but $.jGrowl("hello world"); return "$.jGrowl is not a function."
Here is the sample code I'm using
<%# Page Language="VB" AutoEventWireup="false" CodeFile="growl.aspx.vb" Inherits="growl"
MasterPageFile="~/MyMaster.Master" Title="growl" %>
<script language="javascript" type="text/javascript" src="Scripts/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery.jgrowl.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery-ui.min.js"></script>
<asp:Content ID="maincontent1" runat="server" ContentPlaceHolderID="MainContent">
$(document).ready(function() { $('#demo12').click(function() { $.jGrowl("Growl Notification");
}); });
<button id="demo12" type="reset" onclick="$.jGrowl('Hello WORLD');">
DEMO</button>
The master page contains an Asp:ScriptManager.
Any help is very appreciate it.
Thanks,
Have you tried using jQuery.noConflict() and jQuery.jGrowl() to see if there is a conflict with the $ function between jQuery and the Microsoft javascript libraries?
Might be obvious, but can you check if you are correctly referencing the library? You might have the wrong path.
I found my problem. It was a literal in the MasterPage that is set in the page_Load to include the javascript library. When I removed it it works fine.
Thanks guys for your help.