This question already has an answer here:
Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors
(1 answer)
Closed 6 years ago.
I have included JQuery1.5 in the header of a JSF page. In that page there is a bunch of Primefaces components already coded. After I have included the Jquery.js in the header of the page, some primefaces components like <p:commandButton> loses their skin and <p:fileUpload> becomes looking like normal JSP <input type="file"> and losing its AJAX capability entirely.
Is there a way to use JQuery safely along with primefaces(without conflict)?
I had the same problem as described in the question. That's why I came up with the following solution:
Include the primefaces built-in jQuery library (currently 1.4.1) as including an own jQuery library leads to CSS formatting problems. Adding the target="head" attribute allows for specifying the tag everywhere - e.g. when using templating you not always have access to the <head> tag:
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
The primefaces jQuery library is included by default in conflict mode. That means the $() shortcut cannot by used. To overcome this issue include the following line in a <script> or <h:outputScript> tag:
<h:outputScript target="head">
// Add the $() function
$ = jQuery;
// Now you can use it
$(document).ready(function() {
...
});
</h:outputScript>
That's the best solution I could dig out so far, using primefaces 2.2.1.
Why not use the jquery bundles with PrimeFaces?
<h:outputScript library="primefaces" name="jquery/jquery.js" />
PrimeFaces 2.2.1 has jQuery 1.4.4 and 3.0(in development) has 1.5.1.
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $ . followings are some methods :
Write jQuery.noConflict(); before initialization of jQuery,see below
jQuery.noConflict();
$(document).ready(function(){
// your jQuery code
});
Create a different alias instead of jQuery to use in the rest of the script.
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
Change all instance of $ : Replace $ with jQuery in jQuery code block
jQuery(document).ready(function){
jQuery("div p").hide();
})
Completely move jQuery to a new namespace in another object.
var dom = {};
dom.query = jQuery.noConflict(true);
// Do something with the new jQuery
dom.query("div p").hide();
Set scope of $ to local instead of global
// Method 1
jQuery(document).ready(function($){
$("div").hide();
});
// Method 2
(function($) {
/* some code that uses $ */
})(jQuery);
Note : this point comes with one drawback, you will not have access to your other library's $() method.
Original Reference
My solution is add this code in default page:
<script type="text/javascript">var $j = jQuery.noConflict(true);</script>
After that i use jquery with:
$j
Thanks,
jQuery has a 'noConflict' mode which allows it to play nicely side by side with other libraries. I haven't used Primefaces components, so I don't know for sure, but if you include jQuery in noconflict mode, your problems will likely go away.
My experience:
I had the same problem and never got it working with both jquery libs. (I use jQuery instead of $ but never tried jQuery.noConflict()).
My solution was to use only the lib bundled with primefaces as described in Cagatays answer.
to solve the conflict between Primefaces and jQuery avoid to import any external jQuery file, so to solve the problem import the jQuery files located in the primefaces jar
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />
and in your jQuery code replace the $ with jQuery.
Related
I am trying to implement jQuery with PrimeFaces and JSF components, but it's not working properly. When I tried to do the same with HTML tags it;s working properly.
Here is the code with HTML tags which works properly with jQuery:
<input type="checkbox" id="check2"></input>
<h:outputText value="Check the box, if your permanent address is as same as current address."></h:outputText>
<h:message for="checkbox" style="color:red" />
with
$("#check2").change(function() {
if ($("#check2").is(":checked")) {
$("#p2").hide();
} else {
$("#p2").show();
}
});
Here is the code with PrimeFaces/JSF which doesn't work properly with jQuery:
<p:selectManyCheckbox >
<f:selectItem itemLabel="1" value="one" id="rad" ></f:selectItem>
</p:selectManyCheckbox>
with
$("#rad").change(function() {
if ($("#rad:checked").val() == "one") {
$("#p2").hide();
} else {
$("#p2").show();
}
});
You should realize that jQuery works with the HTML DOM tree in the client side. jQuery doesn't work directly on JSF components as you've written in the JSF source code, but jQuery works directly with the HTML DOM tree which is generated by those JSF components. You need to open the page in webbrowser and rightclick and then View Source. You'll see that JSF prepends the ID of the generated HTML input elements with the IDs of all parent NamingContainer components (such as <h:form>, <h:dataTable>, etc) with : as default separator character. So for example
<h:form id="foo">
<p:selectManyCheckbox id="bar" />
...
will end up in generated HTML as
<form id="foo" name="foo">
<input type="checkbox" id="foo:bar" name="foo:bar" />
...
You need to select elements by exactly that ID instead. The : is however a special character in CSS identifiers representing a pseudo selector. To select an element with a : in the ID using CSS selectors in jQuery, you need to either escape it by backslash or to use the [id=...] attribute selector or just use the old getElementById():
var $element1 = $("#foo\\:bar");
// or
var $element2 = $("[id='foo:bar']");
// or
var $element3 = $(document.getElementById("foo:bar"));
If you see an autogenerated j_idXXX part in the ID where XXX represents an incremental number, then you must give the particular component a fixed ID, because the incremental number is dynamic and is subject to changes depending on component's physical position in the tree.
As an alternative, you can also just use a class name:
<x:someInputComponent styleClass="someClassName" />
which ends up in HTML as
<input type="..." class="someClassName" />
so that you can get it as
var $elements = $(".someClassName");
This allows for better abstraction and reusability. Surely those kind of elements are not unique. Only the main layout elements like header, menu, content and footer are really unique, but they are in turn usually not in a NamingContainer already.
As again another alternative, you could just pass the HTML DOM element itself into the function:
<x:someComponent onclick="someFunction(this)" />
function someFunction(element) {
var $element = $(element);
// ...
}
See also:
How can I know the id of a JSF component so I can use in Javascript
How to use JSF generated HTML element ID with colon ":" in CSS selectors?
By default, JSF generates unusable IDs, which are incompatible with the CSS part of web standards
Integrate JavaScript in JSF composite component, the clean way
You also can use the jQuery "Attribute Contains Selector" (here is the url http://api.jquery.com/attribute-contains-selector/)
For example If you have a
<p:spinner id="quantity" value="#{toBuyBean.quantityToAdd}" min="0"/>
and you want to do something on its object you can select it with
jQuery('input[id*="quantity"]')
and if you want to print its value you can do this
alert(jQuery('input[id*="quantity"]').val());
In order to know the real html tag of the element you can always look at the real html element (in this case spinner was translated into input) using firebug or ie developer tools or view source...
Daniel.
If you're using RichFaces you can check rich:jQuery comonent. It allows you to specify server side id for jQuery component. For example, you have component with specified server id, then you can apply any jQuery related stuff to in next way:
<rich:jQuery selector="#<server-side-component-id>" query="find('.some-child').removeProp('style')"/>
For more info, please check doumentation.
Hope it helps.
look this will help you when i select experience=Yes my dialoguebox which id is dlg3 is popup.and if value is No it will not open
In Bower, how do I get and continue to update a custom build of jQuery UI? Let's say I only need components for Core, Widget, Mouse, Position, Sortable, and Accordion in jQuery UI? I rather not download the entire jQuery UI library.
To give a practical example of a possible approach and to answer to Egg's comment here's a way to do it.
Just bower install the whole thing as suggested by Sindre and include only the scripts that you need in the html.
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
<script>
(function() {
$( "#some-div" ).sortable(); // it works!
})();
</script>
</body>
</html>
This will already work and reduce significantly the file size of the libraries downloaded by the user when using your app or website. Here is a post about this straight from the horse's mouth.
To further increase download speed you can then create your own bundle in your preferred way, maybe using Grunt usemin or whatever else method you fancy to get to this kind of html:
<script src="scripts/bundle.min.js"></script>
<script>
(function() {
$( "#some-div" ).sortable(); // it works!
})();
</script>
</body>
</html>
You could have your own fork, but then you would need to keep that up to date too. Just let it download the whole thing and only use the pieces you need, I don't see the problem with that.
Im trying to add the datebox plugin,
from: http://dev.jtsage.com/
Im trying to follow the instructions on the website, but maybe Im missing something
because i keep getting the following error message on page load:
"Uncaught TypeError: Cannot read property 'prototype' of undefined"
Im using mvc 4,and added the plugin to my project using 'NuGet'
my bundleConfig:
bundles.Add(new ScriptBundle("~/bundles/jqm-datebox-core").Include(
"~/Scripts/jqm-datebox.core.js"));
bundles.Add(new ScriptBundle("~/bundles/jqm-flipbox").Include(
"~/Scripts/jqm-datebox/jqm-datebox.mode.flipbox.js"));
bundles.Add(new ScriptBundle("~/bundles/jqm-datebox-en").Include(
"~/Scripts/jquery.mobile.datebox.i18n.en.utf8.js"));
bundles.Add(new StyleBundle("~/Content/jqm-datebox")
.Include(("~/Content/jqm-datebox.css")));
layout.cshtml:
#Styles.Render("~/Content/pangojquerymobilecss", "~/Content/jqueryMobileIconsCss", "~/Content/jqueryMobileStructureCss", "~/Content/Mobile/css", "~/Content/jqm-datebox")
#Scripts.Render("~/bundles/jquerymobile", "~/bundles/jqm-datebox-core", "~/bundles/jqm-flipbox", "~/bundles/jqm-datebox-en")
the cshtml:
<input type="text" data-role="datebox" data-options='{"mode":"flipbox"}'>
and if that's any help, the header that created when i load the page:
<script async="" src="//www.google-analytics.com/analytics.js"></script><script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/jquery.validate-1.13.0.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.mobile-1.4.2.js"></script>
<script src="/Scripts/jqm-datebox/jqm-datebox.mode.flipbox.js"></script>
<style type="text/css"></style></head>
thanks
For what it's worth, you can actually create a combined js file if you prefer here:
http://dev.jtsage.com/jQM-DateBox/builder/
It allows you to tailor to which jQM version you are using, include the modes you are using, and include whatever number of language files you need as well.
If for some reason you need to use a version not listed there (although, the 1.4.4 version works for the entire jQM 1.4 branch, and the 1.4.0 version is backwards compatible with 1.3.0), another option is just to copy and paste the contents of all the js files into one - the only requirement is that the .core file has to appear first, and jQM must still be loaded prior to datebox.
I have make sample project of focus in textbox from the demo of Richfaces Showcase. I use JSF 2.0, Richfaces 4.3.0 Final.jar and Jboss 7 server. I can sucessfully run the project but focus did not work. When I press the tab key, focus arrives at the textbox. If there is anything I need to congifure, please advise me.
Thanks in advance.
Finally, I got it. I put the javascript code in the jsf form just like this.
<h:form id="frm">
<script type="text/javascript">
window.onload = function() {
document.getElementById('frm:txtStaffId').focus();
}
</script>
...
...
<h:inputText id="txtStaffId"/>
...
...
</h:form>
I am using jQuery-1.9.1 and jQuery-ui-1.10.2 to popup a dialog, my code is below:
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqueryUI/theme/redmond/jquery-ui- 1.10.2.custom.min.css" />
<script type="text/javascript">
$(function(){
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog">
hello, this is a dialog
</div>
</body>
the dialog has only close button, no minimize and maximize buttons, but I want to show them. I find in this page, its dialog has minimize and maximize buttons, I don't find any special settings about dialog in author's javascript code, and the jQuery-ui version s/he used is 1.8.16, does jQuery-ui of my version has removed this functionality?
PS: my jQuery-1.9.1.min.js and jQuery-ui-1.10.2.min,js are downloaded from official website, no any customization change.
Looking at the source of jQuery UI in that example it looks like the guy that runs that blog site added customization for minimize and maximize support. You can find the following comment in the code.
/*
* jQuery UI Dialog 1.8.16
* w/ Minimize & Maximize Support
* by Elijah Horton (fieryprophet#yahoo.com)
*/
You will need to add customization's for the dialog to support this or include a library that extends the jQuery UI dialog. It looks like this site has a plugin called jquery-dialogextend that will do what you are asking for.
If you look towards the middle of the jquery-ui.js file linked in that page there is a section of unminified code from line 366 up to around line 1429 where he has added custom code to handle the minimize/maximize functionality.
Just note that there is no guarantee that section of code will work correctly (or at all) in any version of jQuery UI other than 1.8.16.
Also Check out jQuery Dialogr. I think this can help.
I made a little plugin with the widget factory that extends the jquery ui dialog.
I use the jquery widget factory to add new functionnalities
$.widget('fq-ui.extendeddialog', $.ui.dialog, {
...
})(jQuery);
In the Jquery UI dialog code, there is a _createTitlebar method.
I override it and add a maximize and minimize button
_createTitlebar: function () {
this._super();
// Add the new buttons
...
},
jquery-extendeddialog
sample page