I'm using JSF and I have a form that contains a panelGroup and this panelGroup contains two commandLinks and a dataTable. The dataTable contains some commandLinks too. All commandLinks call a method of a JavaBean via AJAX.
And now the problem. If I click on the commandLinks link_edit or link_cancel the panelGroup is getting rerenderd. But if I click on a commadLink inside the dataTable like link_delete the panelGroup is not getting rerendered. Does anybody know what I'm doing wrong?
Here is the relevant section of the file:
<h:panelGroup
id="panel_destinations">
<h:commandLink
id="link_edit"
value="Edit"
styleClass="link"
rendered="#{not editRoute.inEditDestinationMode}">
<f:ajax
listener="#{editRoute.editDestinations()}"
render="panel_destinations"
immediate="true"/>
</h:commandLink>
<h:commandLink
id="link_cancel"
value="Abbrechen"
styleClass="link"
rendered="#{editRoute.inEditDestinationMode}">
<f:ajax
listener="#{editRoute.cancelEditDestinations()}"
immediate="true"
render="panel_destinations"/>
</h:commandLink>
<h:dataTable
value="#{editRoute.route.destinations}"
var="destination"
styleClass="dest_table"
headerClass="route_table_header"
rowClasses="route_table_row_odd,route_table_row_even"
rendered="#{editRoute.hasDestinations()}"
id="table_destinations">
<h:column>
<h:commandLink
styleClass="route_table_link"
value="Delete"
id="link_delete"
rendered="#{editRoute.inEditDestinationMode}" >
<f:ajax
listener="#{editRoute.deleteDestination(destination)}"
render="panel_destinations"/>
</h:commandLink>
</h:column>
</h:dataTable>
</h:panelGroup>
Related
I have strange problem. I got a dataTable in which I present list of objects. Here's the code:
<h:dataTable value="#{XXXX.questions}" var="q" binding="#{varQ}" id="YYY">
<h:column>
<f:facet name="header">
header
</f:facet>
#{q.question}
</h:column>
<h:commandButton value="-" action="#{XXX.removeQuestion(varSurvey.index, varSec.index, varQ.rowIndex)}">
<f:ajax execute="#this" render="YYY"/>
</h:commandButton>
</h:column>
</h:dataTable>
As you can see - I got a button to remove one item from list. Method works fine, it removes element I want to be removed, but the datatable is not refreshed. I have no idea why.
My bean is SessionScoped, I got almost identical table in other part of my page, and it works which completely confuses me.
My bean method is like this :
public void removeQuestion(Integer surveyIndex, Integer sectionIndex, int questionIndex){
surveyList.get(surveyIndex).getSections().get(sectionIndex).getQuestions().remove(questionIndex);
}
so as you can see - it's almost basic example.
Here is code for my other table from same page:
<h:dataTable value="#{XXX.answers}" id="ZZZ" var="ans">
<h:column>
<h:inputText value="#{ans.choice}" styleClass="form-control">
<f:ajax event="change" execute="#this"/>
</h:inputText>
</h:column>
<f:facet name="footer">
<h:commandButton value="+" action="#{XXX.addMoreQuestions()}">
<f:ajax execute="#this" render="ZZZ"/>
</h:commandButton>
</f:facet>
</h:dataTable>
and method:
public void addMoreQuestions(){
answers.add(new Choice("question"));
}
And this works - when I click button, it adds one more question to list, and rerenders datatable with one more option.
I'm trying to create a page where some content will be displayed after ajax request. Here is part of my code:
<h:panelGroup>
<h:form>
Retrive object by id: <h:inputText id="myInput" value="#{myManager.id}"/>
<h:commandButton value="ok" action="#{myManager.getById}" >
<f:ajax execute="myInput" render="resultRow" />
</h:commandButton>
<h:panelGroup id="resultRow" >
<br />
You retrived object which id is:
<h:outputText value="#{retrivedObject.id}" />
and its name is:
<h:outputText value="#{retrivedObject.name}" />
</h:panelGroup>
</h:form>
</h:panelGroup>
My problem is taht the "You retrived object which id is: " is rendered even before I retrive any object. I want it to be hidden until I click my command button. Is it possible to do only with jsf + html (this have to be done with ajax)? I could use some javascript if I will have to, but I prefer not.
I tried to solve this by rendered="#{!retrivedObject.id==0}" (my object can't have id 0), but this doesn't work - panel group isn't rendered at all and when I call ajax reqest it is unable to find "resultRow" id.
Thanks for help in advance.
It may not be exactly what you are looking for but you can always wrap the panelGroup in a div and set the div visibility to hidden, then use javascript to change the visibility when you click the command button.
You can use the rendered attribute like this :
<h:panelGroup>
<h:form>
Retrive object by id: <h:inputText id="myInput" value="#{myManager.id}"/>
<h:commandButton value="ok" action="#{myManager.getById}" >
<f:ajax execute="myInput" render="resultRow" />
</h:commandButton>
<h:panelGroup id="resultRow">
<h:panelGroup rendered="#{retrivedObject ne null}">
<br />
You retrived object which id is:
<h:outputText value="#{retrivedObject.id}" />
and its name is:
<h:outputText value="#{retrivedObject.name}" />
</h:panelGroup>
</h:panelGroup>
</h:form>
</h:panelGroup>
I have a trouble with my jsf page. I do not know how can make ajax render only when "input" not null or not empty.
Here is my code:
<h:inputText id="input" value="#{control.query}"/>
<h:commandButton id="search" value="Search" action="#{control.getdata()}">
<f:ajax execute="input" render="datatable"/>
</h:commandButton>
Thanks you!
Make use of rendered attribute on the target.
<h:panelGroup id="datatable">
<h:dataTable ... rendered="#{not empty control.query}">
...
</h:dataTable>
</h:panelGroup>
i'm trying to use an search button which brings back the selected items (can be more than one) and it updates the datatable. Then i have a selectBooleanCheckbox next to each colomn, when user selects "n" items then presses the Select the checked Items it insert DB.
The code can be seen below:
<h:panelGrid columns="5">
<h:form>
<h:outputText value="Item Name"/>
<p:inputText value="#{StockController.itemName}"/>
<h:commandButton value="Search" action="#{StockController.Search}">
<f:ajax execute="#form" render=":results"/>
</h:commandButton>
</h:form>
//The code sample below belongs to BalusC see the post here
<h:panelGroup id="results">
<h:form>
<h:dataTable value="#{bean.entities}" var="entity">
<h:column>
<h:selectBooleanCheckbox value="#{bean.checked[entity.id]}" />
</h:column>
...
</h:dataTable>
<h:commandButton value="Select the checked Items" action="#{StockController.insertDao}" >
<f:ajax execute="#form" render=":results"/>
</h:commandButton>
</h:form>
</h:panelGrid>
Now, i have read many blogs and Core javaServer Faces 3, i don't think there is logical error in ajax usage. I tested by removing each ajax then both works fine but whenever i try to use both of cummondButtons with ajax, the second one "Select the checked Items" does not even call the "StockController.insertDao" method.
Any help is appreciated.
Thanks all.
When you want to ajax-render content which in turn contains another form, then you need to include the ID of that form in the render attribute as well, otherwise the other form will lose its view state and nothing will be processed on submit.
<h:form>
...
<h:commandButton value="Search" action="#{StockController.Search}">
<f:ajax execute="#form" render=":results :resultsForm" />
</h:commandButton>
</h:form>
<h:panelGroup id="results">
<h:form id="resultsForm">
...
</h:form>
</h:panelGroup>
If there's however nothing which goes outside <h:form> inside the same <h:panelGroup>, then you can just omit the <h:panelGroup> altogether and re-render the form directly.
<h:form>
...
<h:commandButton value="Search" action="#{StockController.Search}">
<f:ajax execute="#form" render=":results" />
</h:commandButton>
</h:form>
<h:form id="results">
...
</h:form>
This is related to JSF spec issue 790.
See also:
Communication in JSF2 - Ajax rendering of content which contains another form
I have
<h:form>
<h:commandLink action="#{my_fake_ajax_link}">
<h:outputText value="Link" />
<f:ajax render=":mydiv" />
</h:commandLink>
</h:form>
<h:panelGroup layout="block" id="mydiv">
<h:form>
<h:commandLink action="#{mybean.delete(0)}">
<h:outputText value="Here" />
<f:ajax render="#form" />
</h:commandLink>
</h:form>
</h:panelGroup>
When I click once on "my_fake_ajax_link", then I have to click twice on "delete" link. This is only an example. I don't have this real case. I have multiple forms on a page and I can't just add all of them in a single form.
I checked what the problem is and it is:
When you click on "my_fake_ajax_link", the mydiv refreshs with ajax as it should.
ViewState of the refreshed form on ajax is missing.
How can I add the ViewState? How can I make it work without using only one form? This looks like an JSF bug to me. I don't want to refresh that div automatically with
jQuery("#mydiv").load(document.location.href);
but I will in my worst case possible.
This is a known problem in the auto-included jsf.js library of JSF which handles ajax responses. See also JSF spec issue 790 which is fixed in the upcoming JSF 2.3. In the meanwhile, with JSF 2.0/2.1/2.2, you have to explicitly specify the ID of the other <h:form> inside the render attribtue to trigger proper addition of the view state.
<h:form>
<h:commandLink action="#{my_fake_ajax_link}">
<h:outputText value="Link" />
<f:ajax render=":mydiv :mydivForm" />
</h:commandLink>
</h:form>
<h:panelGroup layout="block" id="mydiv">
<h:form id="mydivForm">
<h:commandLink action="#{mybean.delete(0)}">
<h:outputText value="Here" />
<f:ajax render="#form" />
</h:commandLink>
</h:form>
</h:panelGroup>
No, this does not cause any overhead or markup duplication in the ajax response. Alternatively, use OmniFaces fixviewstate.js.
See also:
Communication in JSF 2.0 - Ajax rendering of content which contains another form
h:commandButton/h:commandLink does not work on first click, works only on second click
Workaround for that:
First you need to set an onevent handler for the button that sends the ajax request:
<h:form id="newComment">
<h:commandButton id="saveNewComment" action="#{postBean.actionSaveNewCommentAjax}" value="#{rb['speichern']}">
<f:ajax execute="#form" render=":commentsBox" onevent="function(data) { fixOtherFormsViewState(data, 'newComment') }" />
</h:commandButton>
</h:form>
Then you need to declare this javascript methods that will take the correct viewState value and add it to all forms which doesn't have it:
<h:outputScript>
function fixOtherFormsViewState(data, goodFormId) {
if (data.status != "success") {
return;
}
var viewState = jQuery("#" + goodFormId + " input[name='javax.faces.ViewState']").val();
jQuery("form:not(:contains(input[name='javax.faces.ViewState']))").each(function (idx, elem) {
var form = jQuery(elem);
var input = jQuery("<input type='hidden' name='javax.faces.ViewState' />").val(viewState);
form.append(input);
});
}
</h:outputScript>