jquery datepicker not appearing in jsf - javascript

I am trying to use a datepicker using native JSF( without any exotic faces) however since I discovered that it doesnt have native support, I have tried to implement it using jquery. However I have tried literally every solution for doing this on the internet, and the datepicker calendar just doesnt show up when i click on the textbox. In the console of the dev tools, it seems to be giving an error of "the method datepicker is not defined". why so? I have literally tried including&excluding every single library. Below is my most recent attempt.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(function(){
$("#dateOfExpense").datepicker();
});
<h:inputText size="20" id="dateOfExpense"/>

Related

How to make JQuery UI work with specific parts of JQuery?

So you call on Jquery to make the three --- lines and it stacks the menu. Well is there a way to not call all of jquery.min.js. It breaks some older code of jquery UI. Which part of the code only helps break down the menu and may possibly not break the JQuery UI?
I have tried Jquery version 2.1.0 and 1.12.2 and 1.10.0, but they all break the Jquery ui.
I also tried the Jquery compatibility mode, but it makes it so that the menu doesn't work in Bootstrap.
<script type="text/javascript">
var jQuery_1_12_2 = $.noConflict(true);
</script>
I even found something that looked like a work around, but didn't seem to help:
https://github.com/frappe/jquery-ui-bootstrap
Here are the Scripts that are ran:
<script type="text/javascript" src="/style/js/jquery.form-2.47.js"></script>
<script type="text/javascript" src="../bootstrap/jquery/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/style/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/style/js/jquery.ui.autocomplete.js"></script>
<script src="/style/js/jquery-ui-1.8.1.dialog.min.js"></script>
My menu is basically this one, but the rest of the site works with JQuery UI:
http://www.bootply.com/soljohnston777/KZXTGaVsgE#

AnyTime widget not working

My Anytime date picker widget is not working. Here's my reference at Site Master:
<link href="Content/anytime/anytime.5.1.2.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/anytime/anytime.5.1.2.min.js"></script>
<script src="Scripts/anytime/jquery-1.11.0.min.js"></script>
<%--<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//www.ama3.com/anytime/anytime.5.1.2.js"></script>--%>
css is working fine, but the jquery and anytime.js doesn't. As you can see I have two lines commented, those two lines work pretty well if the source is directly to their web page, but if I reference it in my local it just doesn't work, no calendar nor time picker pops up.
Anyone who knows what i'm doing wrong?
Order of loading of scripts is important when there are dependencies such as a plugin that is dependent on jQuery.js.
The dependency must load first so switch the order of your loading:
<script src="Scripts/anytime/jquery-1.11.0.min.js"></script>
<script src="Scripts/anytime/anytime.5.1.2.min.js"></script>
You should be seeing errors thrown in browser dev tools console like $ is undefined due to improper order
I just made it to work.
I tried referencing it to the page where it was called upon and I noticed a difference in the "src".
<script type="text/javascript" src="../../Scripts/anytime/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../../Scripts/anytime/anytime.5.1.2.min.js" ></script>
whereas if I reference it in the Site.Master, those dots doesn't exist when you click the "Pick URL". I tried pasting it back to the Site.Master with the dots and it works.

jQuery UI dialog widget not appearing

For the last two days I've been trying to understand why I can't build a jQuery Dialog. I am trying to integrate it into another project but I couldn't so I created a new test html page for the sole purpose of building a simple one that works. I've tried multiple configurations and nothing works. I've attempted it on js fiddle and it works (on an older version, mind) leading me to assume I've messed up my headers.
<script src="../jQuery/jquery-ui-1.11.0.custom/external/jquery/jquery.js"></script>
<script src="..jQuery/jquery-ui-1.11.0.custom/jquery-ui.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.css">
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.theme.css">
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.structure.css">
test.js contains jquery code as seen in js fiddle link above. Am I missing anything? What am I doing wrong?

jqGrid not available even though imported properly

I am having a problem getting the jqGrid to be recognized by jQuery. For some reason despite having imported the library
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
I can verify that the library is imported correctly and I can click on it and see it in Chrome. Any idea why I cannot use the library? When I try
JQuery("#table").jqGrid...
it doesn't work, nor does it show up as one of the functions available.
Any help is really appreciated!
jQuery should be first then jQueryUI then jqGrid, this is because jqgrid depends in jquery an djqueryui so they need to be loaded before.
I think you also need i18n/grid.locale-en.js loaded before too
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"> </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

Updating vsDoc to 1.5 breaks all javascript

I'm having some difficulty with what seems to be the simplest of operations.
In visual studio, when I change vsDoc from 1.4.1 to 1.5, javascript on the page no longer works. (Visual Studio 2010)
The original (that works) is like this:
<head runat="server">
<title></title>
<link type="text/css" href="css/excite-bike/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
And everything is fine, intellisense is fine, javascript is fine. Everything is good to go.
However, when I reference the newer vsDoc file (obtained from ajax.aspnetcdn.com )
<head runat="server">
<title></title>
<link type="text/css" href="css/excite-bike/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.5-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
The page doesn't load properly and firebug shows the following errors:
class2type is not defined
rootjQuery is not defined
Both errors are apparently stemming from the vsdoc file line 67
I feel like I'm missing something terribly obvious and I hope someone can fill me in.
Thanks!
The -vsdoc is not intended to be included in your actual page, just in the files you need intellisense in. For your use, just rename:
Scripts/jquery-1.5-vsdoc.js
to
Scripts/jquery-1.5.1-vsdoc.js
and then remove that -vsdoc.js <script> block from the page. Visual studio will automatically search for the -vsdoc.js of any local JavaScript file you're including default. It need not be included in the page explicitly...that'll actually lead to issues like you're seeing, since it defines the same empty functions (and not all the needed variables).

Categories