I'm trying to get data between 2 dates with chart everything works fin but when I'm using Ajax update the second date disappeared there is my code
<p:calendar value="#{bean.date}">
<p:ajax event=”dateSelect” listener=”#{bean.handleDateSelect}” update=”dateEnd” />
</p:calendar>
<p:calendar id="dateEnd" value="#{calendarBean.date2}"
mindate="#{bean.date}"></p:calendar>
<p:chart type="pie" model="#{bean.model}" />
if I remove the Ajax it works but I need it for mindate.
Finally i got to solve the problem,so I have to init the chartSerie for exemple :
ChartSeries serie = new ChartSeries();
for (Object o : list
) {
serie.set(o.getLabel(), o.getValue());
}
// This line what i was missing
if (serie.size() == 0)
serie.set(0, 0);
Related
I am using JSF with PrimeFaces with fields like below.
<p:outputLabel for="vehicle" value="#{msg['vehicle.text']}" />
<p:autoComplete id="vehicle" value="#{newCtrlr.vehicleId.vehicle}" autocomplete="true" scrollHeight = "200" required = "true"
completeMethod="#{newCtrlr.vehicle_AutoComplete}" minQueryLength = "2">
<p:ajax event="itemSelect" listener = "#{newCtrlr.onVehicleChange}" update = "market" />
<p:ajax event="change" listener = "#{newCtrlr.onVehicleChange}" update = "market" />
</p:autoComplete>
<p:outputLabel for="market" value="#{msg['market.text']}" />
<p:inputText id="market" value="#{newCtrlr.market.marketName}"
readonly = "#{empty newCtrlr.vehicleId.vehicle ? 'true' :'false' }" />
In the above code, if the vehicle value is entered, the market should be made editable. If the vehicle value is cleared, the market should become readonly. Now since the vehicle input is 'required', the ajax update is not triggered and so the market remains enabled. If I remove the 'required' on Vehicle, everything works fine. I would like to know if there is a way to make the inputText required as well as trigger the ajax update when the value is changed to empty/null in the required field.
First of all, this behavior is default JSF behavior: If the input in invalid, it is not written to the model.
So you have to change this behavior manually, for example with an Event-Listener.
Add the following method to your Backing-Bean:
public void setModelValueToNullIfValidationFailed(ComponentSystemEvent event) throws AbortProcessingException {
UIInput input = (UIInput) event.getComponent();
if (input.isValid()) {
return;
}
input.getValueExpression("value").setValue(FacesContext.getCurrentInstance().getELContext(), null);
}
This method checks if the validation of the component has failed. If so the model value is set to null.
Add f:event to your p:autoComplete:
<p:autoComplete ...>
...
<f:event type="postValidate" listener="#{newCtrlr.setModelValueToNullIfValidationFailed}" />
</p:autoComplete>
I have a datatable with a filter
The filter work good but the result of filter doesn't work. I call ajax inside of p:inputText to try to refresh the result but doesn't work
<h:outputText value="Result"/><h:outputText id="sizeFilterMyWork" value="#{caseManagement.myWork.size()}" />
<h:outputText value="Filter" id="myCaseOutputTextSearch" />
<p:inputText id="globalFilter" onkeyup="PF('myCaseTable').filter()" style="width:150px" >
<p:ajax event="keyup" update="sizeFilterMyWork" listener="#{caseManagement.getSizefilteredMyWork}"></p:ajax>
</p:inputText>
In the bean I have the list of myWork (with get and set) and a list used for the filter (with get and set), when the page is load the result call the size of the list of my work, then, when I use the filter the datatable is shrinking (so it's work) but the number of result doesnt change. Ajax should call the method getSizefilteredMyWork and update the result but doesnt work
Bean
private List<Case> myWork = new ArrayList<Case>(); // get and set
private List<Case> filteredMyWork; //get and set
public int getSizefilteredMyWork(final AjaxBehaviorEvent event)
{
return filteredMyWork.size();
}
How can I fix it?
Your listener method's return value is ignored but you don't need it because the outputText will get its value directly from myWork. It should get the size of the filteredMyWork list instead.
You could try replacing the ìnputText p:ajax with one in the p:datatable:
<p:ajax event="filter" process="#this" update="sizeFilterMyWork" />
I've got a primeface tree in my application. I tried to load all data att once it it jsut to much 2500 object, only some are used. So I tried to implement som sort of lazy loading. The first level is loaded on start and I would like to load the neccessary data when expanding the node. I googled some examples and modified it for my purpose. But in my case the ajax does not fire. what am i missing here?
the xhtml part
<h:form>
<p:panel id="add_elev2list"
header="lägg till elev"
collapsed="true"
toggleable="true">
<p:tree value="#{bookb.root}"
var="node"
dynamic="true" >
<p:ajax event="select"
update="#this"
listener="#{bookb.onNodeSelect}"/>
<p:treeNode >
<h:outputText value="#{node}" />
</p:treeNode>
</p:tree>
</p:panel>
</h:form>
Before loading the first level of tree is build by
public void triggerTreeBuild() {
root = new DefaultTreeNode("Root", null);
ObjectContainer localdb = dbConnector.connDB();
ObjectSet<sbasUserList> res;
Query query = localdb.query();
query.constrain(sbasUserList.class);
//query.descend("klass").constrain(true);
res = query.execute();
for(sbasUserList sbu : res ){
if(sbu.isKlass()) {
TreeNode node0 = new DefaultTreeNode(sbu.getGroupname(), root);
node0.getChildren().add(new DefaultTreeNode("head"));
}
}
localdb.close();
}
which works fine. The ajax event should trigger this but it don't happen.
public void onNodeSelect(NodeSelectEvent nee){
log("expand"); //wrapper for System.out.println ... for some sort of debugging.
sbasUserList sbu = (sbasUserList) nee.getTreeNode().getData();
String[] allstd = sbu.getAllusers().split(",");
ObjectContainer localdb = dbConnector.connDB();
for(String persnum : allstd){
nee.getTreeNode().getChildren().add( new DefaultTreeNode(
getUserbyPersnum(localdb,persnum).getRealname()));
}
localdb.close();
}
Any idea why?
Best regards
Ralf
using tomcat 7.0.52 JSf 2.2 and primefaces 4.0
Due to you did not set attribute selectionMode="single".
<p:tree value="#{treeBasicView.root}"
var="node"
dynamic="true"
selectionMode="single">
<p:ajax event="select" listener="#{treeBasicView.onNodeSelect}" />
<p:treeNode>
<h:outputText value="#{node}" />
</p:treeNode>
</p:tree>
I am trying to add ajax behavior to selectoneradio with this code:
xhtml:
<h:selectOneRadio id="metalA" converter="metalConverter" value="#{backingBean.metal.metalCode">
<f:selectItems value="#{backingBean.metalCodeRadio}" />
<f:ajax listener="#{backingBean.updateMenu}" event="click" execute="metalA" render="metalTypeMenuA"/>
</h:selectOneRadio>
<p:outputPanel id="panelA">
<h:selectOneMenu id="metalTypeMenuA" converter="metalConverter" value="#{backingBean.order.metal}" rendered="#{teklifIslemleriBean.selectedITip == 1}">
<f:selectItems value="#{backingBean.metalDetailsMenu}" />
</h:selectOneMenu>
</p:outputPanel>
backing bean:
MetalCode selectedMK = null;
public void updateMenu(AjaxBehaviorEvent event) {
System.out.println("Entered to updateMenu method");
if (metal.getMetalKod()!= null) {
electedMK = aMetal.getMetalCode();
}
if (selectedMK != null) {
// metalTypeMenuA Combobox
List<Metal> metalList = aService.getAccToMetalCode(null, selectedMK);
System.out.println("MetalList:" + metalList.size());
metalTypeMenuA.clear();
for (Metal m : metalList) {
metalTypeMenuA.add(new SelectItem(m, "No:" + m.getMetalNo() + " ,Weight: " + m.getWeight();
}
}
}
However it does not even enter to the updateMenu method. instead of click I tried select, change, etc. I also tried to put a wrapper panel and update it instead of checkbox, still no good. What is wrong with above code? Is updating a checkbox with a change in radiobutton doable? Thanks in advance.
JSF 2.0 Primefaces 2.2.1
EDIT:
I added following
<h:message for="metalA" id="messaged"/>
<f:ajax listener="#{backingBean.updateMenu}" event="click" execute="metalKoduA" execute="metalA" render="messaged orderPG2"/>
orderPG2 is a wrapper around checkbox. But still I can get any error message in h:message or any ajax behavior is happening.
The render attribute of <f:ajax> should not point to a component which is by itself conditionally server-side rendered by rendered attribtue. Let it point to the closest parent which is always rendered instead.
<f:ajax listener="#{backingBean.updateMenu}" render="panelA" />
(note that I removed event="click" and execute="metalA" as those are the defaults already)
If that still doesn't work, then you'd need to read the server logs for any missing faces messages. Big change that you'll see a Validation Error: "Value is not valid" or perhaps a conversion error. To prevent those messages from being missed during ajax rendering, ensure that you're using <h:message> and/or <h:messages> the right way and that you also include them in the render of the <f:ajax>.
<h:selectOneRadio id="metalA" ...>
...
<f:ajax ... render="metalAmessage panelA" />
</h:selectOneRadio>
<h:message id="metalAmessage" for="metalA" />
I have a nested list of Questions that I'd like to display. Initially, I'm displaying the Level 1 questions and then subquestions are displayed based on the users answers to the their parent question. All questions have a radio button and some questions have an input box for additional information that is shown when user selects "Yes"
Here is my JSF code with nested dataTables. Please note that I have pulled out formatting of these questions in order to simply the question on the forum, so these may look "unpretty" if you copy this code into your own environment and run the code:
<h:dataTable id="questionTable" var="q" value="#{generalQuestionBean2.questions.questions}">
<h:column><h:panelGroup id="questionGrp">
#{q.question} <h:selectOneRadio value="#{q.answer}">
<f:selectItem itemValue="1" itemLabel="Yes"/>
<f:selectItem itemValue="0" itemLabel="No"/>
<f:ajax event="valueChange" execute="#form"
render="questionGrp"
listener="#{generalQuestionBean2.reset}"/>
</h:selectOneRadio> <h:inputText value="#{q.addnInfo}"
rendered="#{q.answer eq '1' and q.field ne 'otherCov'}"></h:inputText>
<h:panelGroup id="questionGrpSubs" rendered="#{q.addnQuestions ne null and q.answer eq '1'}">
<h:dataTable id="subQuestionTable" var="subq" value="#{q.addnQuestions}">
<h:column><h:panelGroup id="subQuestionGrp">
->#{subq.question} <h:selectOneRadio id="answer" value="#{subq.answer}">
<f:selectItem itemValue="1" itemLabel="Yes"/>
<f:selectItem itemValue="0" itemLabel="No"/>
<f:ajax event="valueChange" execute="#form"
render="subQuestionGrp"
listener="#{generalQuestionBean2.reset}"/>
</h:selectOneRadio><h:inputText value="#{subq.addnInfo}"
rendered="#{subq.answer eq '1' and subq.field ne 'voluntaryComp' and subq.field ne 'uslh'}"></h:inputText>
<h:panelGroup id="questionGrpSubs2" rendered="#{subq.addnQuestions ne null and subq.answer eq '1'}">
<h:dataTable id="sub2QuestionTable" var="sub2q" value="#{subq.addnQuestions}">
<h:column><h:panelGroup id="sub2QuestionGrp">
-->#{sub2q.question} <h:selectOneRadio id="answer" value="#{sub2q.answer}">
<f:selectItem itemValue="1" itemLabel="Yes"/>
<f:selectItem itemValue="0" itemLabel="No"/>
<f:ajax event="valueChange" execute="#form"
render="sub2QuestionGrp"
listener="#{generalQuestionBean2.reset}"/>
</h:selectOneRadio><h:inputText value="#{sub2q.addnInfo}"
rendered="#{sub2q.answer eq '1'}"></h:inputText>
</h:panelGroup></h:column>
</h:dataTable></h:panelGroup>
</h:panelGroup></h:column>
</h:dataTable></h:panelGroup>
</h:panelGroup></h:column>
</h:dataTable>
Here is the code for the reset function on the backing bean:
private void reset(AjaxBehaviorEvent event) {
FacesContext context = FacesContext.getCurrentInstance();
String id = event.getComponent().getClientId(context);
String[] tokens = id.split("[:]+");
int qId = -1;
int subqId = -1;
int sub2qId = -1;
for (int i = 0; i < tokens.length; i++) {
if(tokens[i].equals("questionTable"))
qId = Integer.parseInt(tokens[i+1]);
if(tokens[i].equals("subQuestionTable"))
subqId = Integer.parseInt(tokens[i+1]);
if(tokens[i].equals("sub2QuestionTable"))
sub2qId = Integer.parseInt(tokens[i+1]);
}
Question q = questions.getQuestion(qId);
Question processQ = q;
String defaultSubAnswer = getDefaultSubAnswer(q.getField());
Question subq;
Question subq2;
if(subqId > -1) {
subq = q.getAddnQuestions().get(subqId);
processQ = subq;
if(sub2qId > -1) {
subq2 = subq.getAddnQuestions().get(sub2qId);
processQ = subq2;
}
}
resetValue(processQ, defaultSubAnswer);
}
private void resetValue(Question q, String defaultSubAnswer) {
q.setAddnInfo("");
if(q.getAddnQuestions() != null) {
for (int i = 0; i < q.getAddnQuestions().size(); i++) {
Question subq = q.getAddnQuestions().get(i);
subq.setAnswer(defaultSubAnswer);
resetValue(subq, defaultSubAnswer);
}
}
}
Here is the problem:
The ajax event should default to "valueChange". If I click on "Yes" and then "Yes" again, the ajax call should not happen, correct? But it is, as the Additional Info box is clearing out based on the reset function.
I had originally tried adding a condition to the reset function to check the value of the button that was clicked and only reset the addnInfo value and subquestions if the answer is "0" (No). But this was causing issues with the rendering as the ajax call would render the input box and subquestions to hide and the value would be held onto on the front end, even though they're reset on the backing bean. When they re-rendered to the front in, the value that was held onto shows up instead of the value in the backing bean.
Another attempt was using a ValueChangeListener for the reset of the values. But this still has the same issue with the value being held onto when re-rendering.
I have tried 3 different approaches (listed above) and all have failed. I'm open to hearing a solution to any of these or possibly another solution. Keep in mind that formatting limitations by the users leaves me with less options to work with.
Ajax Listener event valueChange seems to be firing onClick instead of onChange
That's indeed the default valueChange event which is been used by the radio buttons and checkboxes which are genreated by the respective JSF components. Check the generated HTML source and you'll see that it's hooked to onclick. The reason why JSF does that by default is clear for checkboxes, but at first sight not entirely clear for radio buttons as they cannot be unticked anyway. The real reason is that it's done in order to ensure IE6/7 compatibility as onchange wouldn't be fired on 1st click in that browser.
If you don't care about IE6/7 users (whose distribution is however stongly decreasing lately), then change it to event="change" instead.
<f:ajax event="change" ... />
This way JSF will generate the event handler on onchange instead.
Update: you could use jQuery's .on('change') function binder which will fix the IE6/7 misbehaviour on the change event. Include the following in <h:head> if you're not already using jQuery:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
and execute this function on load:
$(function() {
$(':radio').each(function() {
var handler = this.onclick;
this.onclick = null;
$(this).on('change', handler);
});
});
This will basically for every radio button move the JSF-generated onclick attribute to change event handler which is managed by jQuery so that it works consitent in all browsers, including IE6/7.
We can of course also do it with plain JS, but that would require lot of boilerplate and cross browser sensitive code.