I cannot get jQuery UI working in my ASP.NET MVC4 application. I tried dialog and datepicker.
Here is part of the code of my view.
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
alert('A');
//$('#datepicker').val('test');
$('#datepicker').datepicker();
alert('B');
});
</script>
<h1>Test</h1>
<form id="testForm" action="#" method="get">
<input type="text" id="datepicker" name="datepicker" class="datepicker" />
</form>
The alert A is displayed. When I uncomment the next row, the value test is assigned. But datepicker is not working and alert B does not display.
Thanks,
Petr
In the layout.cshtml view, move
#Scripts.Render("~/bundles/jquery")
from body to head and add in head too
#Scripts.Render("~/bundles/jqueryui")
I spent lots of time to figure out how to make it working.
Finally the steps are following:
Create ASP .NET MVC4 project Internet Application.
Clean some of the last lines of the _Layout.cshtml so it should look like this
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
#RenderSection("scripts", required: false)
Change header like I did here
<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" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/modernizr")
<script type="text/javascript">
$(document).ready(function () {
// We will test DataPicker
$('#datep').datepicker();
// We will test TABS
$(function () {
$("#tabs").tabs();
});
});
</script>
</head>
Delete all code after #section featured { section and add some html to Home/Index.cshtml
A. Put some code from the view source link of http://jqueryui.com/tabs/ page (It is inside of < div id="tabs" > ... < div >)
B. Add this
< div >
Date: < input id="datep" type="text" / >
< / div >
DONE!!!
Your code runs just fine in a fiddle: http://jsfiddle.net/m3QFL/
Check the console for errors and the path to your scripts. Chrome includes a console to help with js debugging or you can run FireFox and FireBug.
Either one will go a long way in helping you solve issues like this.
Also, hosted versions of jquery and jquery ui are available through jquery and jquery ui or Google. Here are yours:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
jquery ui has links at the bottom of their homepage to their hosted versions.
BTW, the // instead of http:// allows the script to pick up the http prefix from the site. If you are on ssl it will pick up the https:// so you don't have secure and non-secure items on your page.
You will need to add a couple lines to your _Layout.cshtml to get jQuery UI working out of the box. First is the javascript bundle:
#*you should already have this line*#
#Scripts.Render("~/bundles/jquery")
#*add this line*#
#Scripts.Render("~/bundles/jqueryui")
Next you need the CSS for jQuery UI as well:
#*you should already have this line*#
#Styles.Render("~/Content/css")
#*add this line*#
#Styles.Render("~/Content/themes/base/css")
Related
I am having a fair few issues using ASP.Net MVC 5 + Twitter Bootstrap 3.
Styling, that works, no issues - but the carousel I put in does not cycle, nor does it respond to the next/prev arrows or the navigation buttons.
I even gave in and pulled a carousel example from an article: (Bootstrap Carousel Tutorial to rule out errors in my code.
Code:
<!DOCTYPE html>
<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") <!-- this is the bundle name -->
#Scripts.Render("~/Content/bundles/modernizr")
</head>
<body>
<!--------------------------- Carousel ------------------------------->
( Exact code from http://bootstrapbay.com/blog/bootstrap-3-carousel-tutorial/ )
<!-------------------------------------------------------------------->
<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)
But It doesn't work, as described at the start. Any clues? [I don't want to clutter up the question with my Site.less or BundleConfig code - but if you need it, ask.]
( for the record I also tried
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script src="~/Content/Scripts/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/Scripts/respond.js"></script>
rather than bundling - but same result...)
Once pointed to look in the right direction I found that I moved the the files/renamed the bundle and hadn't updated the call.
instead of
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
I should have had
#Scripts.Render("~/Content/bundles/jquery")
#Scripts.Render("~/Content/bundles/bootstrap")
to match the bundle config
var jqueryBundle = new ScriptBundle("~/Content/bundles/jquery");
...
var bootstrapBundle = new ScriptBundle("~/Content/bundles/bootstrap");
I see some others (e.g. this post) have had trouble using external javascript scripts in JQuery Mobile - as of today I have joined their ranks.
I have a single external js script (controllers.js) which contains code that affects several pages on the site. It is loaded on every page of the site. I put the js file just before the tag it works fine on the initial page load. However when I navigate thereafter (using the JQM Ajax methods) all functions in the script stop working. I would have thought the script would remain in cache - but heyho. Anyhow there's an FAQ which answers this question and I've implemented their suggestion which is: "...to reference the same set of stylesheets and scripts in the head of every page." I have done this but when I do even on the first page load the js doesn't fire. There aren't page specific scripts - so the remainder of that FAQ does not apply.
My cut down html looks like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/static/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css">
<script src="/static/jquery-1.9.1.min.js"></script>
<script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"></script>
<!-- CSS: implied media="all" -->
</head>
<body>
<div data-role="page" id = "main-page">
<div data-role="header" style="overflow:hidden;">
</div>
<div id = "home" data-role="content">
<input type ='button' id = "some_btn" value="press me">
</div>
</div>
<script type="text/javascript" src="/static/js/controllers.js"></script>
</body>
</html>
and within the javascript file
controllers.js
$('#some_btn').click(function()
{
alert('button pressed');
});
Any ideas on what I may be doing wrong here?
Since the content in the #page is loaded dynamically via ajax, click will not work, since it only works on elements that are on the page when the script is called.
You need to use the .on() method:
$('body').on('click','#some_btn',function()
{
alert('button pressed');
});
Ok so im expanding my existing MVC4 app into a mobile app.
Totally new to jquery mobile and im having so many issues with this in MVC.
Layout pages (MVC) and jquery mobile are a nightmare to work with or is it just me?
So im simply trying to show jquery ui datepicker in my page, it does not show!
I have to do a reload of the page for it to show, why???
Ok Layout page
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<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.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
</head>
<body>
#RenderBody();
</body>
</html>
and now the view
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_AppLayout.Iphone.cshtml";
}
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
#using (Html.BeginForm())
{
<div data-role="page" id="pageAccount">
<div data-role="content">
<div id="datepicker"></div>
</div>
</div>
}
Any ideas why the page shows, but no datepicker (I have to reload the page for it to show)?
Solution :
This should be changed:
$(function() {
$( "#datepicker" ).datepicker();
});
to this:
$(document).on('pageshow', '#pageAccount', function(){
$( "#datepicker" ).datepicker();
});
To make a story short. jQuery Mobile should not be used with classic DOM ready jQuery functions. Instead jQuery Mobile is providing us with page events. If you want to find out more about jQuery mobile page events and how they work take a look at this ARTICLE, to make it transparent it is my personal blog. Or you can take a look HERE.
Edit :
Here's a working example:
Change positions of
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
into:
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
jQuery Mobile should always load last when used with jQuery UI.
Also you have forgot jQuery UI CSS, you will find datepicker without its CSS formatting.
I am trying to use jquery.mobile datebox as a datepicker for my jquery mobile app...
I find some difficulties finding a page with the full APIs specification...
For example, I do not fully understand the option "useInlineHideInput", but I can't find any documentation about it...
Is there any jQuery mobile datebox API documentation available?
You can find here the full options list for the latest version jQM Datebox 2.
You can find information about the useInlineHideInput option here. It seems that this option is available in jQM Datebox 1. In version 2 you can force DateBox to display inline with 'useInline' and 'hideInput' set to 'true'.
To understand the functionality of the specific option put the following HTML in a file and change the options value from true to false.
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
</head>
<body>
<div data-role="page">
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"useInline": true, "useInlineHideInput": true}'>
</div>
</body>
</html>
I hope this helps.
I'm trying to use JQueryMobile for an POC and it seems even though I use #using (Html.BeginForm()) instead of #using (Ajax.BeginForm()), ajax is enabled by default. It is being injected from one of the script files [ ~/Scripts/jquery.mobile-1.0a2.js ].
So what I want is to simply disable the Ajax for certain forms and do full form posts. This might be pretty abvious, but i simply cant get my head around it.
Any help is appreciated.
/BB
You have to set up the jquery mobile framework correctly to disable its auto - ajax
Here it's documented:
http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
You could do something like this.
<html lang="en-us">
<head>
<title>#ViewBag.Title</title>
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.min.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxFormsEnabled = #ViewBag.EnableAjax;
});
</script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="header">
<h1>#ViewBag.HeaderString</h1>
</div>
<div data-role="content">
#RenderBody()
</div>
<div data-role="footer">
<h1>HTDE</h1>
</div>
</div>
</body>
</html>
Just add the following line to your page, obviously you have too add this under the document.Ready() function:
$.mobile.ajaxEnabled = false;
Note: If you are using Jquery Mobile beta, the configuration parameter for disabling ajax has changed.
http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/
"Use ajaxEnabled to globally set auto-ajax handling."
Here's a link to the documentation for beta configs:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/globalconfig.html
It took me way to long to figure this one out.
there is an easier way.. just figured it out from JqueryMobile documentation
http://jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html
all you have to do is,
ajaxFormsEnabled :false