I am having some trouble implementing a datepicker for date fields on some of my views. I get an error:
JavaScript runtime error: Object doesn't support property or method 'datepicker'
This is my _Layout code and I can't seem to figure on why this error continues to pop up. Any help would be greatly appreciated.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="#Url.Content("~/Scripts/jquery-2.1.3.js")"
type="text/javascript"></script>\
<script src="#Url.Content("~/Scripts/bootstrap.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/boostrap-datepicker.min.js")"
type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DatePickerReady.js")"
type="text/javascript"></script>
<script>
$(function () {
$('.datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
<p class="nav navbar-text navbar-right">Hello, #User.Identity.Name!</p>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
May be the problem is your code is adding jQuery and Bootstrap twice by calling:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
This is a documented cause of issues with jQuery. I get a similar error in this snippet when adding jQuery twice.
<html>
<head>
<title>DatePicker Example</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datep").datepicker();
});
</script>
</head>
<body>
<h3>Click to select a date :</h3>
<input type="text" id="datep" />
<script src="https://code.jquery.com/jquery-1.12.4.js">
</body>
</html>
Uncaught TypeError: $(...).datepicker is not a function
Just remove extra jQuery and any other duplicated library. Also include jQuery UI as suggested by user Shyju.
<html>
<head>
<title>DatePicker Example</title>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datep").datepicker();
});
</script>
</head>
<body>
<h3>Click to select a date :</h3>
<input type="text" id="datep" />
</body>
</html>
Related
I'm working on a web application which uses classical ASP .NET MVC, but with bootstrap. The default page template I use looks like this:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>#ViewData["Title"] - Gymfed JuryTool</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<!-- Our Custom CSS -->
<link rel="stylesheet" href="~/css/style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/612fd28750.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>The Site</h3>
<strong>JT</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a asp-area="" asp-controller="Home" asp-action="Index">
<i class="fas fa-home"></i>
Start
</a>
</li>
#{
if (User.Identity.IsAuthenticated)
{
if (userMenus != null)
{
foreach (var userMenu in userMenus)
{
// Debug
Debug.WriteLine($"userMenu = {JsonConvert.SerializeObject(userMenu)}");
var controlName = userMenu.MenuName + "SubMenu";
<li>
<a href="##controlName" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
#userMenu.Caption
</a>
<ul class="collapse list-unstyled" id="#controlName">
#foreach (var menuItem in userMenu.MenuElements)
{
// Debug
Debug.WriteLine($"menuItem = {JsonConvert.SerializeObject(menuItem)}");
<li>
<a asp-area=#menuItem.AspArea asp-controller=#menuItem.AspController asp-action=#menuItem.AspAction>#menuItem.ElementName</a>
</li>
}
</ul>
</li>
}
}
}
}
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<partial name="_LoginPartial" />
</li>
</ul>
</div>
</div>
</nav>
#RenderBody()
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - <i>Gymfed</i>
</div>
</footer>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
The CSS files I include primarily are used for the collapsable menus and the likes.
Now the site looks fine, but to show everything on my screen I need to change the zoom to 80%.
I know Boostrap should be doing that for me, but though I follow their examples and everything looks fine when I zoom out to 80%...
I was wondering how I can have this happen automatically? Been looking around, but can't seem to find an actual answer to my question.
I tried to change several times the file but the only thing that I accomplishing every time is to add more invalid expressions
I am not able to see why now I have 6 invalid expression terms ';' in the following code?
This my _layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title - Moran</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootswatch/yeti/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<nav class="navbar navbar-default"></nav>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header ">
#if (User.Identity.IsAuthenticated)
{
<span id="username">#User.Identity.Name</span>
}
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Moran", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a asp-controller="App" asp-action="Index">Home</a></li>
<li><a asp-controller="App" asp-action="ContactUs">Contact Us</a></li>
<li><a asp-controller="App" asp-action="About">About</a></li>
<li><a asp-controller="App" asp-action="Galery">Galery</a></li>
<li><a asp-controller="App" asp-action="Trips">Trips</a></li>
#if (User.Identity.IsAuthenticated)
{
<li><a asp-controller="Auth" asp-action="Logout">Logout</a></li>
}
</ul>
</div>
</div>
</div>
<div id="main" class="container-fluid">
<div>
#RenderBody()
</div>
</div>
<div id="footer" class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-bottom">
<p class="text-center text-danger">© #DateTime.Now.Year - Moran Ribadeo S.L.</p>
</div>
</div>
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<environment names="Development">
<script type="text/javascript" src="~/jScript/site.js"></script>
</environment>
<environment names="Production,Staging">
<script type="text/javascript" src="~/lib/_app/site.js"></script>
</environment>
#RenderSection("Scripts", false)
</body>
</html>
Could anybody advise?
#model IEnumerable<Moran.Models.Trip>
#{
ViewBag.Title = "Home Page";
}
<div class="row">
<div class="col-md-6">
<h1>Welcome</h1>
<p>This is the welcome page</p>
<a asp-controller="App" asp-action="trips" class="btn btn-lg btn-success">View trips</a>
</div>
</div>
I try to get a jquery mobile multipage form with local variables running, but I have two problems.
a) the second value is not updated after save, but reloaded in the edit page
b) when I continuously change between view and edit (4 times), the edit-button calls the edit page (see URL), but the page is not shown
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="view" data-role="page">
<div id="view-head" data-role="header">
<h1>View</h1>
Edit
</div>
<div id="content" data-role="content">
<h2 id="unit-title">x</h2>
<p id="unit-summary">y</p>
</div>
</div>
<div id="edit" data-role="page">
<div id="edit-head" data-role="header">
View
<h1>Edit</h1>
</div>
<form>
<label for="edit-title" class="ui-hidden-accessible">Unit title</label>
<input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
<label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
<textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
<input type="button" name="edit-submit" id="edit-submit" value="Save">
</form>
</div>
<script type="text/javascript">
var unit = { "id":"1" , "title" : "Hello", "summary" : "World" };
$(document).on("pagebeforeshow","#view",function() {
document.getElementById('unit-title').innerHTML = unit.title;
document.getElementById('unit-summary').innerHTML = unit.summary;
});
$(document).on("pagebeforeshow","#edit",function() {
$(document).on('click', '#edit-submit', function() {
unit.title = document.getElementById('edit-title').value;
unit.summary = document.getElementById('edit-summary').innerHTML;
$.mobile.navigate("#view", {});
});
document.getElementById('edit-title').value = unit.title;
document.getElementById('edit-summary').innerHTML = unit.summary;
});
</script>
</body>
</html>
Here is the complete example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="view" data-role="page">
<div id="view-head" data-role="header">
<h1>View</h1>
Edit
</div>
<div id="view-content" data-role="content">
<h2 id="unit-title">x</h2>
<p id="unit-summary">y</p>
</div>
</div>
<div id="edit" data-role="page">
<div id="edit-head" data-role="header">
View
<h1>Edit</h1>
</div>
<form>
<label for="edit-title" class="ui-hidden-accessible">Unit title</label>
<input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
<label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
<textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
<input type="button" name="edit-submit" id="edit-submit" value="Save">
</form>
</div>
<script type="text/javascript">
var unit = { "title" : "Hello", "summary" : "World" };
$(document).on("pagebeforeshow","#view",function() {
document.getElementById('unit-title').innerHTML = unit.title;
document.getElementById('unit-summary').innerHTML = unit.summary;
});
$(document).on("pagebeforeshow","#edit",function() {
document.getElementById('edit-title').value = unit.title;
document.getElementById('edit-summary').innerHTML = unit.summary;
});
$(document).on('click', '#edit-submit', function() {
unit.title = document.getElementById('edit-title').value;
unit.summary = document.getElementById('edit-summary').value;
$.mobile.navigate("#view", {});
});
</script>
</body>
</html>
I have built a jQuery Mobile application, but I have one issue I don't understand.
I am using the multi-page functionality, but when you are in a page and you change the screen orientation, it jumps back to the start page. I do not understand how to stay on the current page when changing orientation.
I have tried this:
$(window).bind("orientationchange", function (e, ui)
{
var sPage ="#"+$.mobile.activePage.attr("id");
$.mobile.changePage(sPage);
alert(sPage);
});
The alert() showed the correct page where I want to stay.
Below is an example how is made the multipage. If i select the option 'Instellingen',
This pages showed. But when i change the smartphone orientation, it jumps back to the menu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Mobile</title>
<link rel="stylesheet" href="../css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="../css/jquery.dataTables.css" />
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="../js/DataBase.js"></script>
<script type="text/javascript" src="../js/Webservice.js"></script>
<script type="text/javascript" src="../js/Misc.js"></script>
</head>
<body>
<div id="Menu" data-role="page" data-title="Hoofdmenu">
<div data-role="header">
<h1>Menu</h1>
</div>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Hoofd Menu</li>
<li><a href="#Instellingen"><h3>Instellingen</h3>
<p>Algemene programma instellingen</p></a></li>
</ul>
</div>
<div id="Instellingen" data-role="page" data-title="Instellingen">
<div data-role="header">
<h1>Programma instellingen</h1>
<a data-role="button" data-direction="reverse" data-rel="back" href="#Menu" data-icon="arrow-l" data-iconpos="left" data-theme="b">
Back</a></div>
<div data-role="content" data-theme="b">
<ul data-role="listview" data-inset="true" >
<li><div><h1>WCF adres<input id="Adress" type="url"/></h1> </div>
<div data-role="controlgroup" data-type="horizontal">
<a id="Test" data-role="button">Test</a>
<a id="Opslaan" data-role="button">Opslaan</a>
</div></li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$("#Test").click(function () {
if ($("#Adress").val().length > 0)
CheckWebService($("#Adress").val(), function (Check) { alert(Check); })
else
alert("Geen adres of error")
});
$("#Opslaan").click(function () { saveURL($("#Adress").val()); });
$("#Dummy").click(function () { alert("dummy"); });
$("#ResetDatabase").click(function () { $.mobile.showPageLoadingMsg("b", "Sync"); ResetDatabase(); });
});
</script>
</body>
</html>
I had the exact same issue for months, until today I added the screenSize parameter to the android manifest, as follows:
android:configChanges="orientation|screenSize|keyboardHidden"
Hope that helps!
The code below tries to implements a button action in jQueryMobile,but it is not working for me. Please let me know where I am wrong.Everything is written in a HTML file.
I am facing some problem in providing my code here. Here is what I am trying.
In standard HTML format, I am writing the below code between script tags
$('#theButton').click(function() {
alert('The Button has been clicked,');
});
And in the body tag ---
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
But the action is not getting called.
EDIT: Please try the code below:
<html>
<head>
<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>
<script language="javascript">
$(function() {
$('#theButton').on('tap click',function(event, ui) {
alert('The Button has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
</body>
</html>