we are working on a shopping application. we use jsf and primefaces . we have login form on primefaces dialog. The dialog appears on click of add to cart(dlg.show()) if the user is not logged in or else it adds to cart directly. if user login sucessfully then the item is added to cart successfully.
I refered the following example for login dialog.
https://www.primefaces.org/showcase/ui/overlay/dialog/loginDemo.xhtml
I am not sure how do we have callback in primefaces ajax request. based on the response from the login action i want to call add to cart action.
can anyone suggest better approch for this?
Primefaces provides essentially two options for this:
Primefaces JavaScript API (the hard way), with which you an hook into the Primefacs jsf engine Using the function call Primefaces.ajax.AjaxRequest(cfg). cfg is an array of ajax request parameters that you pass along with the call and can include among other things component ids to ajax process, ids to update,event hooks (oncomplete,onerror etc) and custom request parameters. I'm typing this on a phone so it'll be painful to list an example here but if this is the route you prefer, consult the official Primefaces manual.
<p:remoteCommand/>, the easy way, is implemented as a standard JSF component that gives you all the function and behaviour of a regular JavaScript function and half the typing. With this, you can execute a backing bean function with the behaviour and semantics of a javaScript function
Related
I would like to dynamically set an error page in JSF. Specifically what I would like to do is whenever I get a ViewExpiredException to refresh the page. I am currently using omnifaces FullAjaxExceptionHandler to manage my exception but it reads the error pages from web.xml.
Is there an easy way to do this?
Should I consider client side navigation by using onError event or just overwrite FullAjaxExceptionHandler.findErrorPageLocation ?
It reads error pages from web.xml because that's the standard way how they are used if you didn't use JSF ajax in first place. In other words, the FullAjaxExceptionHandler ensures that the exception handling and error page presentation behaves exactly the same as if when you wouldn't be using ajax by e.g. <h:commandButton> without <f:ajax>, or <p:commandButton ajax="false">, or because enduser has JS disabled.
You can indeed control it by extending the exception handler and overriding findErrorPageLocation method, but then it won't behave anymore the same way as the standard way.
Alternatively, and likely a better way in your specific case, is to just specify a specific error page for ViewExpiredException and grab the initial page by the usual request attribute and let JavaScript redirect to it on page load.
<h:outputScript>
window.location = "#{requestScope['javax.servlet.error.request_uri']}";
</h:outputScript>
As a bonus, it will work exactly the same way as when you wouldn't be using JSF ajax.
I only wonder how this all would improve the user experience. This is likely only more confusing to the enduser; a page which reloads itself without any additional feedback when the session has expired during a postback.
I have used JSF 1.2 but new to JSF 2.0 . It seems like JSF 2.0 seamlessly supports ajax functionality via <f:ajax> but I am not clear yet how ? I would like to understand what makes these two powerful technologies to work so nicely together ? How does the two lifecycles interact ?
P.S: I am familiar with ajax and javascript. So you can base your answer on that premise.
The question is really broad and I would suggest to search for the appropriate tags to understand its usage in real situations. BalusC has contributed much here on stackoverflow and has also written excellent tutorials that Xtreme Biker made a reference to.
Due to abscence of answers I would offer a basic vision of how ajax works within JSF. There is a special Javascript library in JSF which makes it possible to perform ajax calls to the server with jsf.ajax.request(...). To ease development, there are components that you may attach ajax behaviour to. Typically you will use <f:ajax> tag on the component of your choice, like <h:commandButton>, to add ajax functionality to it.
In the old times we would send an asynchronous XMLHttpRequest via get or post to the server and wait until server sends us postback data which we will get most typically in JSON or XML format for client'side processing and update the view via document.getElementById(...) or by more convenient methods introduced by modern Javascript libraries. I think that in the end this is what JSF does behind the scenes.
In JSF 2.0 <f:ajax> tag was introduced which helps partially submit data, process it on server and partially update your view. For this the ajax tag has the following most important features/attributes: <f:ajax execute="..." render="..." event="..." listener="..." onevent="..." />. Let's take a closer look on all of them.
execute attribute tells JSF about what elements should be updated/processed on the server during this request by specifying a list of element ids;
render attribute tells JSF which components shall be replaced after ajax call is finished - the new elements that were rendered on the server shall replace the old ones with specified ids after partial page update;
event attribute defines events on which an ajax call shall take place, for instance, in case of a command button the event may be a click event, in case of an input text field the event may be a keyup, or blur event;
listener attribute defines a binding to a managed bean method of type public void processAjaxRequest (AjaxBehaviorEvent event) { } that will be triggered on ajax request and executed on server, before partial page update is done;
onevent attribute defines a javascript function to call during different phases of ajax request.
You may consult another excellent tutorial written by Marty Hall on ajax here.
I didn't intend to make an overview of ajax features in JSF 2.0, but rather to make a short introduction to get a basic grasp of ajax functionality.
Up to this point, I’ve been using Microsoft Ajax for updates in my MVC app. I’m now switching to jQuery Ajax in order to standardize my approach.
However, I just realized that the required field in my model for the form did not fire and the user was able to submit the form even though some required fields were left blank.
What is the standard way to handle required fields if I’m handling my ajax functions using jQuery – i.e. I want the unobtrusive to handle my required fields by highlighting them and not allow the submit button to be clicked.
Also, to mention I am getting data-val attributes through the model.
P.S. I’m now using an event handler to detect click event on submit button for the form. In other words, I’m not using #using.Ajax.BeginForm to define my form.
I am an average newbie to CakePHP. While reading cookbook found Ajax form and its submission. But it lacks more details.
What are the main difference between ajax form and a normal form or What are the more specific cases we need to use Ajax form over normal form?
An example will be appreciated
Thanks....
A properly implemented Ajax form is exactly the same as a regular form, except that if JavaScript is enabled a submit handler will be bound to it that will prevent the normal submission of the form and send the data using the XMLHttpRequest object. The response will then be processed by JavaScript in the current page instead of by loading an entirely new page.
This isn't necessarily a CakePHP question, it's understanding what AJAX is.
AJAX in layman's terms is basically submitting data to a website without reloading the current page. If this is the sort of feature you want, you'll need to look into the RequestHandler component and the JsHelper in the CakePHP book for the version you are using.
I'm familiar with the method of submitting a form via a change event like or a checkbox's check event. Most articles explain how to find the first form using jQuery and invoke it's submit() method. However, I wish to submit the form but not cause validation so the back-end can perform other actions. In my case, I have a dropdown that a users changes. Depending on the value, the back-end adds/removes certain controls. The issue I'm runing into is that the validation prevents the form from submitting.
Q: How do I submit the form so it does not perform client-side validation?
Remove the validation just before the form is submitted - check out the answers here How do I remove jQuery validation from a form?
I think you can just turn the validation off by calling #Html.EnableClientValidation(false)