I have a table of customers and i'm trying to use autocomplete when searching it. the problem is that the autocomplete search suggestions box takes about 2-3 seconds to show even though there are only about 3000 customers.
I thought about creating a var that would contain all customers which would be created when the page loads, and when someone searches for a customer, the search would take place only on the client side.
I have no idea how to do that in RichFaces. please help.
what I have so far (slow search from server) - customerSuggestBox.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:s="http://jboss.com/products/seam/taglib">
<ui:composition>
<ui:define name="forItem">customerText</ui:define>
<rich:suggestionbox for="${forItem}" tokens=",["
suggestionAction="#{customerUtilAction.getCustomersByName}" var="cus"
selfRendered="true"
ignoreDupResponses="true"
fetchValue="#{cus.businessUnit.name}"
first="0"
minChars="2"
shadowOpacity="5"
border="1" width="400"
height="250"
onselect="setCaretToEnd(event);"
reRender="#{reRender}"
shadowDepth="1"
cellpadding="5" cellspacing="1" nothingLabel="No customers found" columnClasses="center">
<h:column>
<h:outputText value="#{cus.businessUnit.name}" />
</h:column>
<h:column>
<h:outputText value="#{messages[cus.businessRelationship.name()]}" />
</h:column>
<ui:insert name="reRender"></ui:insert>
</rich:suggestionbox>
</ui:composition>
</html>
forgot to say:
another xhtml includes this one and sends it parameter "forItem"
<ui:include src="customerSuggestBox.xhtml">
<ui:param
name="forItem"
value="customerText" />
</ui:include>
Related
I am experiencing some weird behavior with menu items on updated components. My sample JSF page looks as follows:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head/>
<h:body>
<h:form id="form">
<p:menubar id="menubar" widgetVar="menubar">
<p:menuitem value="Select me" onclick="alert('Menu item selected')"/>
</p:menubar>
<p:commandButton value="Update menubar" update="menubar"/>
</h:form>
</h:body>
</html>
When I run this in Internet Explorer 11 and click on "Update menubar", the menu item no longer functions, i.e. the alert is not displayed, and the URL in the address bar changes from ..../test.xhtml to ..../test.xhtml#.
When I run the same with Firefox, everything works nicely, i.e. even after an update of the menubar via a button click, the menu item still displays the alert.
Is this behavior an IE bug? Or is it supposed to work that way? Is there a workaround for the IE behavior?
Edit:
The problematic sample can be further reduced; the same problem arises in a form that consist solely of two buttons, with one updating the other, causing it to stop working in IE:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head/>
<h:body>
<h:form id="form">
<p:commandButton value="Click me" onclick="alert('Button clicked')"
id="button" widgetVar="button"/>
<p:commandButton value="Update button" update="button"/>
</h:form>
</h:body>
</html>
Okay, after further investigation it appears that the problem is caused by missing access rights in my IE installation - somehow the AJAX response involved in the update does not get handled correctly (even though no corresponding error messages or log entries are shown).
So, luckily, nothing's wrong with Primefaces here :)
I am new to primefaces and already facing problems with the "selectOneMenu" component. I have implemented a mainMenu.xhtml file, which is visible on all my pages. This mainmenu has a "selectOneMenu" component for language Change. The "selectOneMenu" does not open on the start page and several other pages, but there are also pages where it opens and works as it should. I've searched the net for a couple of days now, and couldn't find any hint or suggestion, that solved my Problem.
Would be very nice to find some help here.
See code below: Identity_Session is a #SessionScoped-bean; The "languageSet" is a HashMap of (String, Integer) pairs.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
<h:form>
<p:panel>
<h:panelGrid columns="2" cellpadding="5" style="right: 700px; position: absolute; margin-top: -7px;" rendered="#{identity_Session.showMenuLogout()}">
<p:outputLabel for="languageComboBox" value=" #{identity_Session.translate('outputlabel_language')}:" style="font-weight:bold"/>
<p:selectOneMenu id="languageComboBox" value="#{identity_Session.languageID}" style="width:150px">
<p:ajax listener="#{identity_Session.translationAction()}" update="#all" delay="1000"/>
<f:selectItems value="#{identity_Session.getLanguageSet()}" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
</h:form>
<br/>
<br/>
</h:body>
</html>
UPDATE!!!
I am using the same selectOneMenu with the same values (as described above) on the same webPage. When I place the selectOneMenu in the "west"-layoutUnit it does not open, but when I place it in the "east"-layoutUnit it opens. Is this actually a "PrimeFaces"-Bug, or am I missing something?
Try to change
</f:panel>
to
</p:panel>
I'm building a simple webapp that shows a map from GoogleMaps with multiple markers loaded from my database... but I can't get it to render...
I'm using JSF 2 and gmaps4jsf.
My page looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:m="http://code.google.com/p/gmaps4jsf/">
[...]
<m:map width="500px" latitude="10.1" longitude="10.1" height="500px" zoom="6" autoReshape="true">
<ui:repeat var="loc" value="#{locs}">
<m:marker latitude="#{loc.latitude}" longitude="#{loc.longitude}">
<m:htmlInformationWindow htmlText="#{loc.latitude}-#{loc.longitude}" />
</m:marker>
</ui:repeat>
</m:map>
[...]
I copied the code from an example that is supposed to work... but I can't see the map.
I have gmaps4jsf-core-3.0.0.jar on my classpath, I think I don't have to configure anything else... any ideas?
EDIT: It seems that the tags are not being recognized. When I click on "view source code" in the browser the gmaps tags are not "translated", they are being shown as I wrote them in the xhtml file.
If your tags are not being translated the most probably is that the jar file is in the wrong place. Something is avoiding your webapp to find it. How are you building it?
Place the the latest library jar in your web application WEB-INF/lib folder.
Your m:map has to be inside a h:form tag.
Due to your library version you should include a javascript code:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true">
</script>
Take a look at this simple example for using gmaps4jsf2 library.
Have you got it working with a very basic configuration first?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:m="http://code.google.com/p/gmaps4jsf/">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/template/base-template.xhtml">
<ui:define name="js">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true">
</script>
</ui:define>
<ui:define name="title">
This is the new title
</ui:define>
<ui:define name="content">
<h1>Simple Map with a marker and an InfoWindow</h1>
<h:form id="form">
<m:map width="500" height="450px" latitude="37.13" longitude="22.43" enableScrollWheelZoom="true">
<m:marker>
<m:htmlInformationWindow htmlText="This is Sparta, Greece"/>
</m:marker>
</m:map>
</h:form>
</ui:define>
</ui:composition>
</html>
Regards,
The editor doesn't appears in my IE window while it works correctly in chrome
I have implemented p:layout and in the center layoutunit I am including the template.xhtml using ui:include which is enclosed in a
<h:form id="centercontentpanel">
Kindly guide me with what corrections needs to be done to make it visible in IE 8
Template.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:body>
<f:view>
<p:editor id="editor" value="#{editorBean.value}"/>
<h:panelGrid columns="2" style="margin-top:10px">
<p:commandButton id="submitButton" value="Submit" update="display" oncomplete="editordlg.show()"
icon="ui-icon-disk" />
<p:commandButton id="clearButton" type="button" value="Clear" onclick="editor.clear()"
icon="ui-icon-close"/>
</h:panelGrid>
<p:dialog header="Content" widgetVar="editordlg" showEffect="fade" hideEffect="fade" modal="true">
<h:outputText id="display" value="#{editorBean.value}" escape="false" />
</p:dialog>
</f:view>
</h:body>
</html>
For all i know, the IE 8 doesn't support Primefaces Editor, still in IE 11.
Actually i can render it, but nothing works, not even the bold/italic/underline.
I think it's because the way IE process javascript... but i don't know much about technical issues.
(My tests were done on IE 11 and Primefaces 4.0, plain programming, didn't twitch anything)
Only for the RichText i'm using the HTML5 library wysihtml5 (GIT)
EDIT:
I'm sorry, i just stumbled on the answear to my problem (Editing on IE), hope it fixes yours
Just add contentType="text/html" to the <f:view> like this <f:view contentType="text/html">
Here is the post from Optimus (Even though it's a rendering problem for chrome)
I want to create a xhtml page which contains a dataTable for certain entities, to navigate between the entities i though i could use the TabMenu. But after the implementation the tabMenu menuItems are only showed as simpel links and not how the primefaces example:
My code:
<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">
<h:body>
<h:form>
<p:tabMenu activeIndex="0">
<p:menuitem value="Customers" url="customerTableView.xhtml" icon="ui-icon-document"/>
<p:menuitem value="Orders" url="orderTableView.xhtml" icon="ui-icon-document"/> Vie
</p:tabMenu>
</h:form>
</h:body>
Cant find the reason why its not correctly rendered, i also tried diffent browsers.
I simply didn't notice that the "head"-tags are missing. Adding them solved the problem.