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
Related
I installed bootstrap-material-design as instructed on the github website and everything said it was installed successfully:
I have inserted the recommended code into my application header:
<!-- Material Design fonts -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/ripples.min.css">
<!-- Material Design Scripts -->
<script src="bower_components/bootstrap-material-design/scripts/index.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/material.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/ripples.js"> </script>
and
<script type="text/javascript">
$(document).ready(function() {
$.material.init();
});
</script>
However, when I try a sample element (e.g. "jumbotron" or "well") it still appears the way normal bootstrap does, not the way your material design website says it should.
Any ideas on how to get it to appear? I didn't get any error message, so I don't really have anything to go on, and I don't want to manually download the files for fear of duplicates.
Apparently you do not have a reference to the correct JS files. Trying adding these to you code in the head section
<script src="scripts/index.js"> </script>
<script src="scripts/material.js"> </script>
<script src="scripts/ripples.js"> </script>
You seems to be missing references to jQuery and bootstrap's .js file. You should include both before material design script in that order.
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.
I'm using current versions of jQuery:
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--jQuery UI-->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<!--jQuery Mobile-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://
I have the following HTML (which I copy-pasted from docs to ensure correctness):
<div id="form-pay" data-role="fieldcontain">
<form action="mailer.php" method="post">
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" data-mini="true" />
</form>
</div>
Everything is working fine with buttons, accordions and animations, but for some reason forms like the above are not working. They just show up unstyled. Is there any initialization I need to do? The docs say forms are auto-initialized.
Am I missing anything?
jQuery Mobile 1.2 (1.2.0) works with versions of jQuery core from 1.7.0 to 1.8.2.
Therefore change jQuery to ver 1.8.2 (or 1.8.3)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
jsFiddle
or use jQuery migrate if you for some reason need ver.1.9.X
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
jsFiddle
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.
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!