Refresh JSF component after custom javascript Ajax call

Question

I have a custom javascript Ajax call in my jsf page. I capture and process the query string of the XMLHttpRequest in a filter. The filter adds a record to a table in the model. Now I want the jsf page, without full page refresh, to reflect the updated model in one of the components (a Primefaces data table).

I guess what I need is a custom xmlHttpResponse...

Can anyone tell me how to do this? I'm scared it might be complicated, but I have no choice but to use the custom javascript...

What would be the difference using a <p:commandButton action="doProcess()" update="yourDataTableID"> (that comes with ajax call) instead of your custom ajax call? Maybe your problem is using the <p:commandButton> (or <p:commandLink>) way. — Luiggi Mendoza
– Luiggi Mendoza, Commented Dec 15, 2012 at 17:39
Please post what you've done and what you're trying to achieve with a custom ajax call here.Ajax is kind of 75% of the reason people use primefaces/JSF. What's the point if you're going to be making custom ajax calls? — kolossus
– kolossus, Commented Dec 15, 2012 at 23:59
@kolossus For most of what I'm doing, the standard JSF stuff works great. However, I have one large text area within which I have an English text for language study. If a student clicks on a single word, that word is added to their 'learning list'. So, within that one single jsf component are many words, each of which is associated with a javascript ajax call which sends the word, and some additional information, to the server for appending to the database table 'learninglist'. The learning list appears in a dataTable at the right, which I need to refresh! — Matthew Oakley
– Matthew Oakley, Commented Dec 16, 2012 at 11:45

BalusC · Accepted Answer · 2012-12-16 22:31:48Z

5

The PrimeFaces <p:remoteCommand> is designed for this purpose.

Here's a basic kickoff example for your particular case:

<h:form>
    <p:remoteCommand name="updateTable" action="#{bean.updateTable}" 
        process="@this" update="table" />
    ...
    <p:dataTable id="table">...</p:dataTable>
</h:form>

It generates a JS function updateTable() which will invoke the #{bean.updateTable} method and update the component with (relative) client ID table. You just have to call the function updateTable() in JavaScript context.

updateTable();

You can even pass request parameters if necessary, it has to be sent as JS object:

updateTable({ name1: "value1", name2: "value2 });

No need to fiddle with homebrewed ajax requests and keeping the JSF state in sync.

answered Dec 16, 2012 at 22:31

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matthew Oakley Over a year ago

So @BalusC if I understand you correctly, I can include another form on the page containing the <p:remoteCommand> tag which will replace my custom ajax call. So, instead of attaching each word to an ajax function, I attach each word to a function which 1) updates the values of the parameters in the <p:remoteCommand..> tab and 2) submits the form encapsulating the <p:remoteCommand..> tab. Is that right?

Matthew Oakley Over a year ago

Oh fantastic, I'm done! I just left the existing filter (and custom ajax call) to update the model. Then, in the custom ajax javascript, I called the remoteCommand generated javascript simply to update the dataTable. Works like a charm. I nearly fell off my chair! Thanks @BalusC.

user1156544 Over a year ago

Is there a way to do this with simple JSF/JS? Ideally without a dummy button.

Collectives™ on Stack Overflow

Refresh JSF component after custom javascript Ajax call

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related