I have a problem with Datebox plugin- When I open it, today's date is not highlighted, futhermore. I set "calHighToday" option to true but it keeps on without highlighting today's date.
<input name="fechaPartido" id="fechaPartido" type="date" data-role="datebox" data-options='{"mode": "calbox", "calHighToday":true,"overrideCalStartDay": 1}'
I set up the datebox plugin with:
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox.mode.calbox.min.js"></script><<
<script src="js/jquery.mobile.datebox.i18n.es-ES.utf8.js"></script>
and the css with:
<link rel="stylesheet" href="js/jqm-datebox.min.css" />
I downloaded the current version of the plugin from http://dev.jtsage.com/jQM-DateBox/demos/install.html.
Can anyone help me?
Here is the fiddle
jsfiddle.net/manuelfc/d5wP2/
Is has to be something related with my custom theme, since, when I remove it, everything works ok.
You can check it in external files.
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.
I have and accordion working on a normal html page, but when I try and add it to a Spring MVC page then I get the error: $(...).accordion is not a function.
Here is the header of my WEB-INF\views\index.jspfile:
<!DOCTYPE html>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Jeeni Software Ltd</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="<c:url value="css/style.css"/>" type="text/css">
<link rel="stylesheet" href="<c:url value="css/menu/menu_style.css"/>" type="text/css"/>
<script type="text/javascript" src="<c:url value="js/jquery-1.8.3.js"/>"></script>
<script type="text/javascript" src="<c:url value="js/jquery-ui-1.9.2.js">"></script>
<script type="text/javascript" src="<c:url value="js/jquery.flip.js"/>"></script>
...
<!-- This is the 'accordion' div -->
<div id="accordion" style="height:800px;">
<h3>Title...</h3>
...
Here is the ready function:
$(document).ready(function() {
var object = $("#accordion");
alert("object: " + object.accordion);
$("#accordion").accordion({ collapsible: true, active: 'false', autoHeight: false });
$("#banner").fadeIn(1000);
alert("Done");
});
with this alert("object: " + object.accordion); show object: undefined and it bombs out on the next line.
Here is my servlet-context.xml file
<mvc:resources mapping="/cv/**" location="/cv/" />
<mvc:resources mapping="/wow/**" location="/wow/" />
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/imgs/**" location="/imgs/" />
<mvc:resources mapping="/js/**" location="/js/" />
<mvc:resources mapping="/inc/**" location="/inc/" />
<mvc:resources mapping="/article-imgs/**" location="/article-imgs/" />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
<property name="prefix" value="/WEB-INF/views/"/>
<property name="suffix" value=".jsp"/>
</bean>
Firebug shows no problem loading any of the jquery files. I can re-create the proper behavior outside of Spring mvc, so the problem must be something to do with Spring/Java?!? But I can not find out what. The only error Firebug reports is the $(...).accordion is not a function, but everything is setup just like on the jquery ui accordion example.
BTW, I've trawled the internet for the last 3 hours and found similar problems that were fixed by typos. This isn't a typo error. I can not find anything like this regarding jquery UI and Spring MVC.
Solved!
The problem was that I was importing some content via:
<jsp:include page="../includes/index_page_intro_txt.jsp" />
and this JSP file was re-importing jquery. Took this out and everything was fine.
Special thanks to #NimChimpsky for being a sounding board and keeping me going.
There's no way anyone could have solved this with the information above. So just let you all know how I solved it:
I started by removing everything from the file other than the library imports, the ready statement and the accordion div block. Then it worked. So I slowly added everything back until it stopped working and then investigated that cause.
Should have done that in the first place - duh!
<script type="text/javascript" src="<c:url value="js/jquery-ui-1.9.2.js">"></script>
is not correct in some way.
Can you get any jquery functions to work ?
Is it just the jquery-ui functions that are not working?
Did you customize the jquery-ui download and not include accordion ?
Do you get 404 in the browser debugger ?
Are you opening a popup which overwrites the jQuery object with something else ?
Also probably better to use a cdn hosted version of the jQuery lib files. The below gets the latest version and works with accordion.
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js' type='text/javascript'></script>
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!