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>
Related
I am doing mobile conversion of our website using PF mobile. In that I am trying to open views in a dialog using Primefaces mobile. It works just fine in desktop browser but not in mobile version. The page keeps waiting to load but nothing happens. Is it not implemented in PF mobile or is something wrong with my code?
Following is the view - webapp/m/dlg/sampledlg.xhtml
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core"xmlns:p="http://primefaces.org/ui"xmlns:pm="http://primefaces.org/mobile"><f:view renderKitId="PRIMEFACES_MOBILE" /><h:head></h:head><h:body><pm:page id="main"><pm:header title="Main Page">/pm:header><pm:content><p:link outcome="pm:second" value="Go" /></pm:content></pm:page><pm:page id="second" lazy="true"><pm:header title="Second Page"></pm:header><pm:content>Sample content</pm:content></pm:page></h:body></html>
Following is the code from the backing bean.
RequestContext.getCurrentInstance().openDialog("dlg/sampledlg");
return;
Also basic dialog like the following that displays only a message doesnt work either in mobile pages. It works in desktop though.
RequestContext.getCurrentInstance().showMessageInDialog("This is sample text");
face-config.xml has the following:
<navigation-handler>
org.primefaces.application.DialogNavigationHandler
</navigation-handler>
<view-handler>org.primefaces.application.DialogViewHandler</view-handler>
<navigation-handler>org.primefaces.mobile.application.MobileNavigationHandler</navigation-handler>
I can absolutely add more information if needed. Any help here is much appreciated. Thank you in advance.
Here is my platform information:
- Tomee 7.0.0 M3
- Primefaces 6.0
- Jsf 2.2.12
- Jdk 1.7
- Jee 7
Working solution:
bean:
...
RequestContext.getCurrentInstance().execute("PF('dlgDelete').show();");
xhtml:
...
<p:dialog header="confirmation" widgetVar="dlgDelete" >
<p:outputLabel value="Are you...?"/>
<p:commandButton value="yes" action="#{appBean.deleteMethod()}" update="tblParts" oncomplete="PF('dlgDelete').hide();" icon="ui-icon-check" iconPos="right" styleClass="ui-btn-inline"/>
<p:commandButton value="no" onclick="PF('dlgDelete').hide();" icon="ui-icon-forbidden" iconPos="right" styleClass="ui-btn-inline"/>
</p:dialog>
I'm implementing some kind of frontend editor in my web page, using rich:editor. When clicking a link, the editor should open, and after saving editor's content, the editor should close again. I'm having trouble with onsave event for closing the editor. Here is my code.
This is the link that opens the editor, due to setting the property bean.show to true. It works ok:
<h:commandLink>
...
<f:setPropertyActionListener value="true" target="#{bean.show}" />
</h:commandLink>
This is the editor itself, only rendered when show evaluates to true:
<h:form>
<rich:editor value="..." onsave="showEditor(false)" rendered="#{bean.show}" />
</h:form>
The onsave event should close the editor by setting the show property to false again, but the editor stays open, because showEditor() is not called:
<a4j:jsFunction name="showEditor">
<a4j:param name="param1" assignTo="#{bean.show}" />
</a4j:jsFunction>
Am I doing something completely wrong? Or do you have any other ideas how to realize this? Any help is appreciated.
just double-checked: in version richfaces 4.x, there is no onsave attribute at all, but
oninit
onblur
onfocus
ondirty
onchange
like pointed out in the org.richfaces.component.UIEditor class. The same is true, if you want to use f:ajax to ajaxify the editor.
Right now, the "save"-icon in the editor just sends a form.submit() or something. So either try to add your jsFunction on that event or to introduce an own save-button.
Edit: Richfaces 4 uses the javascript based CKEditor, so if you want to overwrite their "save"-button, this forum entry regarding CKEditor's save implementation might be of your help.
Also a valueChangeListener might be a possibility solution to trigger your Bean.setShow(boolean show) property.
xhtml:
<rich:editor value="#{bean.editorValue}"
valueChangeListener="#{bean.valueChanged}" />
method in managed bean:
public void valueChanged(ValueChangeEvent e) {
// do the code to close the window here
}
The valueChangeListener also works in Richfaces 4.3, but maybe starting within the javascript of the CKEditor is the better choice.
Hope, that helps... L.
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
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
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.