I am working on a ASP.NET MVC 4 app. In one of my forms (using Razor view engine) I want to use a jquery datepicker with a date field. But my datepicker code does not work.
Views/Shared/_Layout.cshtml
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
Views/MyController/Create.cshtml
#model wppf_test_1.Models.allocation_percentage
#{
ViewBag.Title = "Create";
}
<script type="text/javascript">
$(document).ready(function () {
alert("h");
$("#date").datepicker();
});
</script>
<h2>Create</h2>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<div class="editor-label">
#Html.LabelFor(model => model.date)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.date)
#Html.ValidationMessageFor(model => model.date)
</div>
I am not posting the entire code of the view since it is very large. The alert message in the jquery code works. But the datepicker code does not. I used firebug and verified that the id of the date field is indeed "date". Yet I do not know what is the problem.
I would suggest using an input element like so:
<div class="editor-field">
<input type="text" name="date" id="date" />
#Html.ValidationMessageFor(model => model.date)
</div>
as the editor for your date. Setting the name to date will properly link the value to your date field on form submit. I've had this problem before and this is how I solved it, though I cannot say for certain why it worked.
I have case same like Shuaib and I try your suggest above and I can the date picker on my project (create.cshtml).
<input type="text" name="CreatedDate" id="date" />
But, I have many more input element again in my project (create.cshtml). I try to use same id (id="date") like belowing.
<input type="text" name="UpdatedDate" id="date" />
And I running the apps, the date picker on my second input element (name="UpdatedDate) cannot work. I got warning message is Another object on this page is already uses ID 'date'.
What's this method (call id datepicker) only can use one input element (not more) on the page?
Thanks for advice,
cheers
Related
If i comment out the jquery.mobile...js file, this works fine, with it included, everytime i click the checkbox, the onclick event fires twice. Same is true for onchange event. Any ideas?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<script>
function tester() { alert("I get called twice on click"); }
</script>
<input id="abc" name="myCheckbox" onchange="tester()" type="checkbox" value="true" />
<label for="myCheckbox">Click me</label>
</body>
</html>
This is by design, since both events are happening. See example: http://jsfiddle.net/Twisty/T3qmG/
HTML:
<html>
<head>
<title>Checkbox Test</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Checkbox Test</h2>
</div>
<div data-role="content">
<input type="checkbox" id="checkbox-choice-1" />
<label for="checkbox-choice-1">Click me</label>
</div>
</div>
</body>
</html>
JQuery:
$(document).ready(function(){
$("#checkbox-choice-1").click(function(){
alert("Click event triggerd.");
});
$("#checkbox-choice-1").change(function(){
alert("Change event triggerd.");
});
});
I would advise separating your script code if possible. You can a function to one or both events.
Your markup is malformed. The <label> tag points to a non-existent id. It points to "myCheckbox" but the id of your input tag is "abc". This change fixes your issue and the markup is correctly enhanced.
<input id="abc" name="myCheckbox" onchange="tester()"
type="checkbox" value="true" />
<label for="abc">Click me</label>
Please help me on this. I am new to CSS and jQuery Mobile and I got this issue.
The checkboxes in my page do not display the box; only the label. When I click the label, a square appears on the left.
Now, the issue only happens if I download the CSS file to my local file and refer that. If I refer the CSS file from the server directly, the box appears before the text and works normally. Below are the sample source:
Source which has error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width">
<link rel="stylesheet" href="../jQuery/jquery.mobile.css">
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Source which does not have error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Everything else works fine; it is just the display of the box that causes me the problem. I took the latest files for the CSS and JS files and checked.
Without the box, the user may think it is just a label
Since I am new, I am unable to give an image, I'm sorry...
Thanks all.
Adding checkbox inside fieldset for me solved the same problem.
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>
I have a MVC 3.0 / RAZOR web app using jQueryMobile, with Form Authentication on part tof the site.
The Form Authentication page is composed by this layout:
<!DOCTYPE html>
<html>
<head>
<title>Some title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="dialog" data-theme="b" data-overlay-theme="e">
<div data-role="header" data-theme="b">
#if ((ViewBag.HideTitle == null) || (!ViewBag.HideTitle))
{
<h1>#ViewBag.Title</h1>
}
</div>
<div data-role="content">
#RenderBody()
</div>
</div>
</body>
</html>
And the actual page:
#model MyApp.Web.App.Models.LogOnModel
#{
Layout = "~/Views/Shared/DialogLayout.cshtml";
}
<h3>Sign In</h3>
<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>
#Html.ValidationSummary(true, "Authentication failed")
#using (Html.BeginForm()) {
<div>
<fieldset>
<legend></legend>
<div>
#Html.LabelFor(m => m.UserName)
</div>
<div>
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</div>
<p />
<div>
#Html.LabelFor(m => m.Password)
</div>
<div>
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</div>
<p /><p />
#Html.CheckBoxFor(m => m.RememberMe, new { data_theme = "a" })
#Html.LabelFor(m => m.RememberMe )
<div class="ui-block-b"><button type="submit" datatheme="b">Sign In</button></div>
</fieldset>
</div>
}
The authentication / dialog transition works correctly when you click on a link from an already loaded page.
For example:
- Home/Index (unauthenticated)
- Click on "authenticated link" /Home/MyAuthenticatedPage
In this case, the jQueryMobile framework calls the page through ajax, gets the redirect to /Account/LogOn and displays the /Account/LogOn page as a dialog box correctly.
When an authenticated page is called directly from browser though, the page is loaded but shown only the background. This is true either going to /Home/MyAuthenticated page or going directly to /Account/LogOn through the browser.
What am I missing?
I had a similar problem to this and the latest version of jquery resolved it.
I have a MVC 3 application where I am using razor views. I have a SiteLayout.cshtml page, which is my master page for the site. Then, I have a Login.cshtml page which uses the SiteLayout.cshtml as the master page. I also have a _ViewStart.cshtml page that applies the master page to all cshtml pages.
I recently added a 'Forgot password' link to my login page. When I run the app, it doesn't show the new link. I cleaned the solution & rebuilt the solution, but that didn't help. Its almost like the razor views are getting cached. I checked all my browser settings (IE, Firefox, Chrome) to make sure that they are not caching.
I am totally stumped with this one. Any ideas??
Here is the code for the master page:
#using System.Web.UI.WebControls
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<title>Application - #ViewBag.Title</title>
<script src="/Scripts/jquery-1.7.min.js" type="text/javascript"> </script>
<script src="/Scripts/jquery.tools.min.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" media="all" href="/Content/Site.css" />
</head>
<body>
<!-- Total width: 1180px -->
<div id="maincontainer">
<div id="header">
<span style="text-align:left; float:left;">Header</span>
<span style="text-align:right; float:right; width:200px;">#Html.Partial("LoginStatus")</span>
</div>
<div id="maincontent">
#RenderBody()
</div>
</div>
</body>
</Html>
Code for the login view:
#{
ViewBag.Title = "Login";
}
<div style="width:500px;">
#using(Html.BeginForm("Authenticate", "Account", FormMethod.Post))
{
<fieldset>
<legend>Login</legend>
<div class="errorMessage">#Html.ValidationMessage("LoginError")</div>
<label for="Email">Email</label>
#Html.TextBox("Email", string.Empty, new { #style = "width:250px;" })
<label for="Password">Password</label>
#Html.Password("Password", string.Empty, new { #style = "width:100px;" }) <br/><br />
<div class="buttons">
<button type="submit" class="positive" name="login">
<img src="/Content/images/lock_open.png" alt=""/>
Login
</button>
</div>
<p>#Html.ActionLink("Forgot Password?", "ForgotPassword", "Account")</p>
</fieldset>
}
</div>
Finally, code for _ViewStart:
#{
Layout = "~/Views/Shared/SiteLayout.cshtml";
}
Hit [control] + F5 to force a refresh.
Above each Action method you can set an output caching attribute for that page. Here is an article on it output caching
Alternatively you can set your caching preferences site wide in the web.config
Besides cleaning and rebuilding, which you mentioned you had done, You might want to check and make sure you don't have any instances of your .NET Development server running.
If you don't want caching to occur at all, you can use the following attribute to ensure that nothing is cached:
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]
//Your Controller Here
I think I have it figured out. I am sure it has something to do with the configuration of my machine since its not happening to others. So, instead of allowing VS2010 to assign its own port, I forced-picked a port. And I now get the new view.
I am creating one application with jquery.mobile-1.0a4.1 release. I have a page which is having input form to get details. It has date field , so for that I used jquery.mobile.datebox . See http://dev.jtsage.com/ for its demo.
I am facing one issue with it, when I set particular date value for date field on page-load , the value is shown in textbox. But when user click on date-picker icon- the calendar still highlight today's date and show current month only.
If anybody has used the same control then please help about , how to achieve like if there is any date value the text box then when you launch the datepicker, it should start from that date.
For eg. here I am setting date of March month, then ,when user clicks on datepicker , march month calendar should be shown.
Here is my code file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Detailed information</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.css" />
<link type="text/css" href="jquery.mobile.datebox.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = 'text';
});
</script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile.datebox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Setting start date value on pageload
$('#startdate').val('2011-03-20');
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="inline">
back
<h1>Detailed Information</h1>
</div>
<div data-role="content">
<form action="" method="get" onsubmit="validate();" id="frmdetailedinfo">
<div data-role="fieldcontain">
<input readonly="true" name="startdate" type="date" data-role="datebox" id="startdate" data-options='{"mode": "calbox", "useDialogForceFalse": true, "noAnimation": true}'/>
</div>
<div data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button type="submit" data-theme="a" name="submit" data-icon="check" value="submit-value">
Save
</button>
</div>
</fieldset>
</div>
</form>
</div>
<!--content-->
</div>
<!--page-->
</body>
</html>
You have to set it in the tag itself:
<input readonly="true"
name="startdate"
type="date"
data-role="datebox"
id="startdate"
data-options='{
"mode": "calbox",
"useDialogForceFalse": true,
"noAnimation": true
}'/>
Becomes this
<input readonly="true"
name="startdate"
type="date"
data-role="datebox"
id="startdate"
data-options='{
"mode": "calbox",
"useDialogForceFalse": true,
"noAnimation": true,
"defaultDate": "1999-03-20" // Add Default Date
}'/>