I need to use Primefaces Calendar's Client side API to getDate. Here is the sample code but it is not working. What am I doing wrong?
Primefaces 3.4.2, JSF 2.2, Glassfish 4
<h:form id="calendarFormId">
<p:calendar id="calendarId" mode="inline" value="#{eventController.eventUI.date}" widgetVar="calendarWidget">
</p:calendar>
</h:form>
<script>
var myDate = calendarWidget.getDate();
alert(myDate);
</script>
Thanks
Debuging your codesnippet in firefox got the following trace:
[13:24:47,383] ReferenceError: calendarWidget is not defined # http://localhost:8080/labb1/index.xhtml:12
So drew the conclusion that the script is executed to early. One way to delay execution is to wait for page to be ready.
<script>
jQuery(document).ready(function() {
var myDate = calendarWidget.getDate();
alert(myDate);
});
</script>
see how-to-execute-javascript-after-page-load
Related
I´m usig the jsf version 2.1 primefaces 5.1 and tomcat 7.
I have to execute a managed bean method after the all the uploads has been succesfully in a multiple upload component, I used the onComplete atribute, but is executed after each upload. I need to do it after the all files upload was completed.
How identify that?
Thanks in advance for your time and answers
PD I posted this question in the primefaces 1 forum but nobody answer.
This should work:
<p:fileUpload ... oncomplete="doSomething(this);" />
<p:remoteCommand name="rc" actionListener="#{bean.method}" />
and
<script>
function doSomething(fileupload) {
if (fileupload.files.length == 0) {
rc();
}
}
</script>
On the bean:
public void method() {
// Do something here
}
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 have been trying for a few days to embed an Orbeon 3.9 supported xform in a JSF page without much luck. I am running Orbeon as a "separate" deployment (ie. oxf.xforms.renderer.deployment = separate) and if I access an xform directly from the external (non-orbeon) web application everything works fine. The problem comes when I try to embed that xform inside another web page--which in our case is generated via JSF and facelets. I am currently trying to use JQuery to load the xform and then call ORBEON.xforms.Init.document(); in the callback method:
<script type="text/javascript">
$j(document).ready(function () {
$j("#xform").load("#{facesContext.externalContext.requestContextPath}/xforms/test.xform?orbeon-embeddable=true", function(data) {
if (typeof ORBEON != "undefined") {
if (!document.all) {
ORBEON.xforms.Init.document();
}
}
});
});
</script>
When I do this, the page appears to render fine and some of the widgets work properly (e.g. date picker and basic field validation) but none of the widgets which invoke a message box work. When any widget or event triggers a message box I receive an "Exception in client-side code" error with a detailed message of "Message: Cannot call method 'setBody' of null" (Chrome) or "Message: this._messageDialog is null" (Firefox).
I realize that by using the jQuery load method I am making an ajax call which might not be supported in Orbeon 3.9. (I have set the oxf.xforms.ajax-portlet to true, just in case this might make a difference; but no such luck.)
I am open to using any method to embed the xform into our JSF/facelet pages, however, I would prefer not to use iframes. I have experimented with the provided include-form.jsp example and other methods, but this jQuery.load method seemed the most promising--except for this one issue.
UPDATE: I have updated this question further after more research. I am only receiving this error when a message box is triggered. Here is a sample HTML page which invokes my xform:
<html>
<head>
<script type="text/javascript" src="/portal_web/js/jquery/1.4.2/jquery-1.4.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery.noConflict();
var $j = jQuery;
$j(document).ready(function () {
$j("#xform").load("/portal_web/xforms/hello.xform?orbeon-embeddable=true", function(data) {
if (typeof ORBEON != "undefined") {
if (!document.all) {
ORBEON.xforms.Init.document();
}
}
});
});
</script>
<div id="xform">Loading form...please wait...</div>
</body>
And, here is a sample xform which exhibits this problem:
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:fr="http://orbeon.org/oxf/xml/form-runner">
<xhtml:head>
<xhtml:title>Say Hello</xhtml:title>
<xforms:model>
<xforms:instance>
<dummy xmlns=""/>
</xforms:instance>
</xforms:model>
</xhtml:head>
<xhtml:body>
<xhtml:p>
<xforms:trigger>
<xforms:label>Say Hello</xforms:label>
<xforms:message level="modal" ev:event="DOMActivate">Hello!</xforms:message>
</xforms:trigger>
</xhtml:p>
</xhtml:body>
This xform should work fine either hosted directly in an Orbeon web application or accessed from a "separate" deployment so long as the xform is accessed directly. However, if I embed this xform using jQuery (as in the included inline example), the form will render but I will receive an error message when I click on the button (i.e. trigger).
Thanks!
I have something like:
<p:inputText...>
<p:ajax event="keyup" update="somefield" listener="#{someBean.doSomething}"/>
</p:inputText>
But I don't want to do an Ajax request on every keypress, I would like to do the request a half second after the user stops writing.
I have seen this problem solved in jQuery in another question:
How to delay the .keyup() handler until the user stops typing?
I would like to know if it's possible to do this on primefaces or how adapt the solution from the jQuery question.
I'm using PrimeFaces 3.0.M4.
Thank you in advance.
If using Primefaces 5.x, there's a delay attribute in the p:ajax tag for this purpose. So it's done like this:
<p:inputText...>
<p:ajax event="keyup" delay="1000" listener="#{someBean.doSomething}"
update="somefield" process="#this" />
</p:inputText>
If not, you could achieve it using f:ajax instead of p:ajax (yes, it works with p:inputText, too). f:ajax has added support for queue control starting from JSF 2.2. So the code looks like:
<p:inputText...>
<f:ajax event="keyup" delay="1000" listener="#{someBean.doSomething}"
render="somefield" execute="#this" />
</p:inputText>
See also:
Primefaces 5.0 p:ajax javadoc
JSF 2.2 docs for f:ajax
Why don't you use PrimeFaces' RemoteCommand component?
It gives you a global Javascript function, that you can call from wherever whenever you want. And it lets you call the managed-bean method and it has the update attribute for partial update.
<p:inputText id="input" />
<h:form>
<p:remoteCommand name="sendAjaxical" update="somefield" action="#{someBean.doSomething}"/>
</h:form>
Register event handler, I borrowed the following from the same answer you posted:
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
jQuery("#input").keyup(function() {
delay(function() { sendAjaxical(); }, 2000); //sendAjaxical is the name of remote-command
});
You cannot use the Primefaces Ajax Component, if you chose the jquery/javascript solution. You would have to implement your own javascript function (with ajax/xmlHttpRequest support) and trigger that function after half a second.
But there is another solution, a workaround: you could use an autocomplete component and use 3 helpful attributes: valueChangeListener(A method expression that refers to a method for
handling a valuchangeevent - you use that instead of completeMethod because you don't need the returning suggestions), queryDelay (Delay to wait in milliseconds before sending
each query to the server) and minQueryLength (Number of characters to be typed before starting
to query - if you don't want to start the ajax request after just one character typed).
I hope you will find this solution quiet interesting...Please see the autocomplete component in action here( http://www.primefaces.org/showcase-labs/ui/autocompleteHome.jsf ) and you can find out more by reading the Primefaces User Guide for 3.0.M4.
A quick hack would be adding a delay in onstart of the p:ajax. Define the following function somewhere in your javascript:
function keyupDelay(request, cfg, delay) {
delay = delay || 2000;// if no delay supplied, two seconds are the default seconds between ajax requests
setTimeout(function() {
cfg.onstart = null;
request.send(cfg)
}, delay);
return false;
}
Basically that function triggers the ajax request in a certain timeout while returning false for the immediate one, and emptying the onstart on that timedout request in order not to stuck in a nasty loop.
Then on the p:ajax:
<p:ajax event="keyup" onstart="return keyupDelay(this, cfg)" />
The delay parameter is optional here, by default it's 2 seconds.
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.