The databox plugin works well in a static jQuery Mobile html page. The scripts defined in header are:
<link rel="stylesheet" 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/jquery.mobile.datebox.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script 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>
The line for the datebox input is:
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "flipbox","useFocus": true}'>
However, once I dynamically inject some other elements into the same page, like
$(document).bind("pagebeforechange", function route(e, data) {
...
$page.trigger('create');
...
As a result, I can see all elements are displayed well, including the datebox button. But clicks on the datebox button would not pop up anything.
I compare the two versions of html codes after enhancement. I found the dynamic one misses the following, which corresponds to the date dialog pop-up:
<div class="ui-datebox-container ui-overlay-shadow ui-corner-all ui-datebox-hidden pop ui-body-b"
...
Why did the dynamic way miss to generate the codes above? How can I correct?
I found a solution myself. It is to change
$page.trigger('create');
to
$page.page();
But I have no idea why and the fundamental difference of these two. Help please!
Related
I am using Datebox(http://dev.jtsage.com/DateBox/) plugin to let user choose time in a specific format, but that plugin only generating 2 blocks and didn't showing the third block for AM/PM(as shown in demos), I am mentioning my html/scripts below please help me to find out whats going wrong.
<input type="text" name="startDate" id="filter-date-from" value="" data-role="datebox" data-options='{"mode":"timebox","overrideTimeFormat":"%l:%M %p","overrideTimeOutput":"%l:%M %p","popupPosition":"window"}'>
<link href="css/jquery.mobile-1.4.5.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<link href="plugins/DateBox/css/jtsage-datebox.min.css" rel="stylesheet" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="plugins/DateBox/js/jtsage-datebox.min.js"></script>
-I have downloaded Datebox plugin and saved inside "plugins" folder and hence given the desired path at the top.
-saved jquer.js, jquerymobile.js in js forlder and hence given the path at top, same is done for css
I am trying to implement the Jquery Mobile datepicker wrapper http://demos.jquerymobile.com/1.4.1/datepicker/ but it is giving me errors from the datepicker.js file Cannot read property '_defaults' of undefined . I dont think it is recognising the js file at all.
I have referenced it in the index.html in the head
<script src="js/jquery.mobile.datepicker.js"></script>
<link rel="stylesheet" href="css/jquery.mobile.datepicker.css" />
<link rel="stylesheet" href="css/jquery.mobile.datepicker.theme.css" />
then called it as below
<input type="text" id="date-input" data-inline="true" data-role="date">
You need to import jquery-ui as well.
It works at first open of the page but when i navigate to other pages that uses also the datepicker. It no longer works. Did i missed something in my code? Please see below. Thank you so much.
<link href="css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$('#btnDfrom').focus(function () {
$(this).datepicker();
});
$('#btnDto').focus(function () {
$(this).datepicker();
});
</script>
<span id="filtertxt">Date From: </span>
<input type="text" id="btnDfrom" />
<span id="filtertxt">Date To: </span>
<input type="text" id="btnDto" />
This one does not work also
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
Jquery UI datepicker isn't intended to be called multiple times on the same element, which is what would happen if you call it on a focus event.
All you need to do is call it once on the target element, like so:
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
The datepicker plugin will take care of handling clicks and focus events on the elements by itself, you don't need to.
EDIT: You should also check that you are both including the script files, css files and this code on each page where you use the datepicker (but make sure it's only included once!)
your code is looking cool
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
check your code I think may be jquery is Conflicting somewhere in your pages.
This seems like it would have a really obvious answer, however I cannot get a simple checkbox to uncheck with JQuery once I add Jquery Mobile.
Here is some very simple code as an illustration:
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
jQuery(function () {
jQuery('#a').change(function () {
if (jQuery(this).is(':checked')) {
jQuery('#b').removeAttr('checked');
}
});
jQuery('#b').change(function () {
if (jQuery(this).is(':checked')) {
jQuery('#a').removeAttr('checked');
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="a"><label for="a">AAAA</label>
<input type="checkbox" id="b"><label for="b">BBBB</label>
</body>
</html>
This is a simple bit of code. When Checkbox 'A' gets checked, it should uncheck checkbox 'B', and vise verse. However it doesn't, and no error is written to the console.
This is using the standard version of Jquery & Jquery Mobile, linked directly to their site
If I remove the Jquery Mobile elements, by removing the following lines, then it works fine
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
Can anyone please enlighten me as to where I am going wrong, since this seems so simple yet I'm at an absolute loss as to what is going on.
Many thanks
Because you need to use .prop and then re-apply styles using .checkboxradio('refresh').
Check
$('selector').prop('checked', true).checkboxradio('refresh');
Uncheck
$('selector').prop('checked', false).checkboxradio('refresh');
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")