ajax does not work with multipart/form-data in jsf - ajax

I have the below code
<h:form enctype="multipart/form-data">
<p:panel id="panelEmployee">
<h:commandButton value="Go" action="#{employee.getFirstEmployee()}">
<f:ajax render="panelEmployee" execute="#form"/>
</h:commandButton>
<p:fileUpload value="#{employee.file}" mode="simple" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
</p:panel>
</h:form>
When i clicked on go button and if the form enctype is multipart/form-data then the first ajax call is ok, the second one gives this javascript error
SCRIPT5007: Unable to get value of the property 'contentWindow': object is null or undefined
Can anyone please suggest?
Thanks.

Related

Parameters from f:param not submitted with AJAX request when form enctype is multipart/form-data

I'm running Wildfly 8.2 and I'm using the JSF version bundled with it, 2.2.8-jbossorg-1.
I have the following facelet:
<h:form enctype="multipart/form-data">
<h:commandButton value="Submit">
<f:param name="myparam" value="true"/>
<f:ajax execute="#this" render="#this"/>
</h:commandButton>
</h:form>
When I press the submit button, several parameters are submitted, but not myparam. If I remove enctype="multipart/form-data" from the form, myparam=true is submitted just fine.
With or without enctype="multipart/form-data", if I remove f:ajax, myparam=true is always submitted.
Why is it working without enctype="multipart/form-data", but not with? And how can I get it to work?
This is a bug in Mojarra. I've just reported it as issue 3968.
For now, one work around is to pass them as EL method arguments instead.
<h:form enctype="multipart/form-data">
<h:commandButton value="Submit" action="#{bean.action(true)}">
<f:ajax execute="#this" render="#this"/>
</h:commandButton>
</h:form>
public void action(boolean myparam) {
// ...
}

JSF panelGroup not getting rendered after ajax call

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>

jsf f:ajax render ony if value in execute not null or empty

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>

<f:ajax> tag 404 error

I was trying to excute an ajax call on search button issue is 404 error.
Main form loads goods, lightbox(jquery works) and when clicking on search issue is 404, debugged to see if method gets call nothing beging called on ajax command button.
<h:form id="mainForm">
<h:commandButton onclick="showLig();" value="Find Person"/>
<div id="moreInfo" class="lightbox" style="display: none;">
<ui:include src="external.xhtml"/>
</div>
</h:form>
external xhtml
<h:inputText id="personSearch" value="#{bean.holdingValue}" ></h:inputText>
<h:commandButton value="Search">
<f:ajax render="#form" execute="personSearch" listener="#{controller.method}"/>
</h:commandButton>
<h:dataTable id="someTable" value="list" var="x">
blah..
</h:dataTable>

Rendering other form by ajax causes its view state to be lost, how do I add this back?

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>

Resources