valuehchange listener, ajax - ajax

I am using a JSF page in a portal environment. If I use a valueChangeListener, the method is not called in the backing bean unless I use onclick="submit()". This submits my page which I don't want. Same is the case with actionListner.
Also, if I use ajaxRefreshSubmit, my whole page is submitted rather than submitting the specified part on which the ajaxRefreshSubmit is used.
Why this behaviour? Is it because we are using it in a portal environment, or did we miss something in the configuration files?

The valueChangeListener runs indeed only when you submit the form to the server. It's indeed one of the major JSF beginner's misconceptions to think that it runs at the client side. It's not part of HTML or JavaScript code which runs in the webbrowser. It's part of Java/JSF code which runs in webserver. So the client has to send a request from webbrowser to webserver somehow. Submitting the form is one of the ways.
For the remnant, I don't have anything to say about ajaxRefreshSubmit since that's specific to the IBM component library which I don't use (and also can't because it's not open source nor freely available). If you don't get more respons here at Stackoverflow, then your best bet may be posting the question at their own forum at developerworks. It's only not as active and high-quality as here.

<h:form id="toilclaimform">
<h:panelGroup id="container">
<!-- Read only version -->
<hx:commandExButton type="button" id="testButton2" value="Submit" styleClass="hideRefreshToil" onmousedown="$.resourceManUtilities.formRefreshCookie()" >
<hx:behavior event="onclick" id="behavior3" behaviorAction="get" targetAction="container" ></hx:behavior>
</hx:commandExButton>
<hx:commandExButton onmousedown="runToilVal()" onmouseup="$.resourceManUtilities.formSubmitCookie()" type="submit" id="testButton" value="Submit" styleClass="rmButtons" action="#{toilClaimBean.submit}">
<hx:behavior event="onclick" id="behavior2" behaviorAction="get" targetAction="container" ></hx:behavior>
</hx:commandExButton>
</h:panelGroup>
</h:panelGroup>
<hx:ajaxRefreshSubmit id="ajaxRefreshRequest1" onstart="$.resourceManUtilities.ajaxLoadingStarting('form')" oncomplete="$.resourceManUtilities.ajaxFormSubmit('hideRefreshToilList')" target="container"></hx:ajaxRefreshSubmit>
</h:form>
When using this library you know longer use the standard command buttons, you instead use the hx command button, there is an example in the code above. Using this button will ensure that you don't get a full pagr refresh and will update the desired portlet.
Cheers

Related

ViewState lost after AJAX request

I have a very strange error with the following code:
<h:form id="myForm">
<h:panelGroup id="myPanelGroup">
...
<h:commandButton
value="randomtext"
action="#{mybean.action}" tabindex="301"
<f:ajax execute=":myPanelGroup" render=":messages #form"/>
</h:commandButton>
</h:panelGroup>
...
</h:form>
So the problem is that after I click on the button the form (myForm) looses its viewState after render. The strange is that in my dev env it is working, but on an other server it is not. Have I made some common mistake with this kind of execute/render pair settings or what else could cause such problem? I was also wondering that probably the 2 servers have different Mojarra version or something like that.
The messages in the render attribute is an id of a panelgroup in an other form.
The container is a WebLogic server with JSf 2.1.
Any ideas?
Thanks!
So I found out it is a common JSF issue that can be solved with the following library:
http://showcase.omnifaces.org/scripts/FixViewState
More info:
http://balusc.blogspot.hu/2011/09/communication-in-jsf-20.html#AjaxRenderingOfContentWhichContainsAnotherForm

Is it ok to have multiple primefaces socket tag on a page

Is it fine to have multiple tags with different channel on a page, for me it never worked.
Is it a good use of prime push, Or is there any alternative to receive server push messages from multiple channels on a page. Here is piece of sample code what i have tried
<h:form>
<p:socket channel="/pushMessages/#{session.id}">
<p:ajax event="message" update=":navigation-form"/>
</p:socket>
<p:socket channel="/pushMessages/cart/#{session.id}">
<p:ajax event="message" update=":message-form"/>
</p:socket>
</h:form>
Yes this works for me without a problem in PrimeFaces 6.2 (keep in mind that p:push is deprecated and the JSF 2.3 websockets is advised

Trigger HTML5 constraint validation before submitting a form using ajax

I have the following code snippet and the standard client side html validation is not triggerd. How can I trigger the standard validation and get the action called if valid.
<h:form>
<h:inputText type="text" value="#{myBean.value}">
<f:passThroughAttribute name="required" value="required" />
</h:inputText>
<h:commandButton value="submit" type="submit" action="#{myBean.save}">
<f:ajax execute="#form" render="#form" />
</h:commandButton>
</h:from>
Without the ajax the client side validation will be triggered and the form will not be send if the input is empty.
How can I reach this with ajax?
JSF ajax engine does not check HTML5's form.checkValidity() before proceeding the request. Essentially, you need to do that job yourself in the onclick attribute of the command button. If it returns false, then it will block the ajax action.
Please note that you should never rely on only client side validation, because that's fully controllable by the enduser. I strongly recommend to add server side validation as well. When you add ajax, you can easily make use of server side validation with the same user experience as client side validation.
See also:
JSF2 Validation Clientside or Serverside?

Using <h:form> breaks my JSF page until I make a ajax request

I am using PrimeFaces and the newest jsf stuff.
<p:dataGrid var="terms" value="#{coursePlanSandbox.preProcessedTerms}" columns="4" rows="20">
<h:form style="margin:0px;">
<div class="list-widget classDrop">
<div class="list-head">
<h3>#{coursePlanSandbox.termName(terms.term)}</h3>
<div class="list-meta">
#{terms.term.startYear}
<span class="pull-right" style="margin-top:-3px;">
#{terms.fToi(terms.scheduledUnits)} /
<h:inputText styleClass="inputMaxUnits" value="#{terms.firstSession.maxUnits}" >
<p:ajax event="change" process="#this" />
</h:inputText>
</span>
</div>
</div>
</div>
</h:form>
</p:dataGrid>
This is a snippet of my Facelets file. What happens is if I do a fresh run of the page, right click the Facelets file in NetBeans and click 'Run File' which refreshes the server I guess, the page stops loading after <h:inputText> and nothing else loads after that point. Even when I refresh the page, it stops loading after that point. If I enter a value in the <h:inputText> and it sends an ajax request to the server, if I then click refresh, the page loads everything else after that. Is it a bug with the server or am I doing something wrong?
I don't understand why using Run File... normally you run the JSF Project (or Debug it) and you don't need to run anything else when doing changes inside xhtml files nor java files (except when you are adding / modifying classes and functions prototypes). Run file is useful to run a class that contains main().
Found out what it was, I was calling an object in my controller before it was made, breaking the page. And once the ajax call when thru, it called the class constructor and built the object. So thats why every refresh after that it worked just fine.

How to prevent reload of page in Richfaces on action/event?

I am using JSF2.0 and RichFaces 4.0.1 Final. I want to prevent the reload of page on occurence of event.
My use case is: There is a Command button with hidden style. I need to invoke the event attached to it in certain case from Javascript.
Problem: Though I am able to invoke the hidden button, the issue is, the moment it gets invoked, the page is getting reloaded. I want to prevent this reload.
Just use ajax:
<h:commandButton id="foo" action="#{bean.foo}" styleClass="hide">
<f:ajax />
</h:commandButton>
Or, since you're already using RichFaces:
<a4j:commandButton id="foo" action="#{bean.foo}" styleClass="hide" />

Resources