AJAX Post to a Backing Bean

[Marissah Miller]

In an ASP.NET application, I am able to use the jquery code below to call a method in a C# file located in the Controllers folder. Is something similar possible in JSF?

var request = { someVariable = document.getElementById('someElement').value; } $.post("/Admin/UpdateEmployee", request, function (data) { if (data.success == "true") { //do something } });

I am trying to do things through javascript/jquery because when my bean tries to clear out a value (in other words I need to set an InputTextarea to ""), the entire page goes completely blank without throwing an error when I call context.update() on the form that the InputTextarea is in.

[Tim Holloway]

In JSF, you do not code Controllers. Controllers are pre-written components of the JSF system itself. All you need to code is page View templates (xhtml) and backing beans (Models).

Another characteristic of JSF is that it is designed as much as possible to work with Plain Old Java Objects (POJOs). That means that Backing Beans adhere to the structural conventions of generic JavaBeans. It also means that the need for JSF-specific coding is kept to a minimum. A good rule is that anytime you need to work with a javax.faces class or interface other than the model classes, you need to seriously consider whether you are doing it wrong. That includes the FacesContext. Except in very specialized cases, you definitely shouldn't be grabbing the JSF component tree and wrestling with it. Or, for that matter, the HTTPServletResponse object.

The operative model for JSF is to display a form and respond to postback requests from that form (Submits). JSF will validate the input control values from the form, and if they are each and every one of them valid, update the backing bean with those values and invoke the action method. The action method may then use this updated data to perform business functions and then return a navigation token to indicate the next form to be displayed. The postback functionality occurs when, for example, one or more control input values are invalid, in which case JSF will short-circuit the bean update and action method stages, stuff appropriate error messages into the JSF messages object, and re-display the page (along with the messages). This postback cycle reoccurs until the user has entered valid data.

AJAX (the JSF2 f:ajax tag) operates in a similar manner except that instead of submitting the entire form and rendering an entire page, you can narrow the input data (partial form submit) and be returned only partial output (partial page update). Instead of an action method, you invoke an AJAX listener method on the backing bean which operates similarly to an action method except that it has an optional ajax event parameter and does not return a navigation string, since the same page continues to be displayed.

When you use the JSF ajax tag, you do not have to code any JavaScript of your own. The JSF framework ensures that the appropriate functionality is supplied to the displayed page both invisibly and transparently.

[Marissah Miller]

Now I'm wondering if I should even be using JSF to do what I want...here is what I am trying to do:
I need to create a web application that allows users to design a series of survey-type questions. It will be very similar to SurveyMonkey or Qualtrics if you're familiar with those. The user will be able to have their questions spread over multiple pages. This is where the tree comes in - I was trying to use the tree to switch between questions & pages. The idea was to have everything on one screen (like SurveyMonkey). So a user would click "Question 2" under "Page 3" and in the main content area of the page, the settings (question text, question type, etc) they had previously entered there (for question 2) will be loaded. They can then change whatever they want. When they click on a different page or question (which would be a "child" of a page) then their answers are stored in the backing bean (which has a list of pages, each of which has a list of questions). I'm wondering if I would have an easier time implementing this with JSP...I do have a bit of experience with that....

I know this isn't the traditional use of web forms, but I think it is a lot more user friendly than being taken to a different page every time you want to add/edit a question.

PS: The way this will be different than traditional survey creators like SurveyMonkey and Qualtrics is that after all of the questions are designed, a .war file will be output so that the user can deploy the system and use it as they choose.

[Tim Holloway]

JSF can do stuff like this, although I'm not sure it's really that big a deal to load new pages when making major transitions like that.

If I have envisioned what you are looking for correctly, you want something like a menu sidebar plus a main display/edit area on the page. You can use Facelets to manage the page tiling - JSF doesn't get along well with frames/iframes. If you need something like an expandable tree for the menu pane, some of the JSF extension tag libraries offer controls that will do that. You can then attach AJAX functionality to the menu items to cause the main edit/display pane to be primed and rendered with the appropriate content.

JSF is generally a good fit for anything forms-based. That's what it was primarily designed for.