updating bean from javascript

Question

I have a .xhtml page from which I launch a javascript, inside this javascript I would like to update the content of a bean, the easiest way I have found to do this is by adding a hidden form and linking said bean's property to its value:

index.xhtml

<h:form id="poi-form" styleClass="invisible">
    <h:inputHidden id="poi" value="#{userBean.email}" />
</h:form>

javascriptfile.js

function handleEmailResponse(resp) {
    document.getElementById('poi-form:poi').value = 'usersNewEmailValue';
    window.location.replace("timeline.xhtml");
}

However, from the timeline.xhtml the value isn't the one I expected (as if it isn't updated) since I see the users old email value set in

userBean.java

@PostConstruct
public void init() {
    email = "usersOldEmailValue;    
}

Am I forgetting something? Thanks in advance for your help!

which JSF version? and why are you using javascript to navigate to another page? could you explain further maybe we can suggest a better approach — Tarik, Feb 23 '15 at 01:10
@Tarik I'm using javascript to navigate to another page as the javascript I am using is from a 3rd party (google plus sign in) that I must use in my project.... — Ockie, Feb 23 '15 at 09:28
why not making ajax call? maybe you can find a solution that sweets you here: http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery — Tarik, Feb 23 '15 at 14:50

score 2 · Answer 1 · answered Feb 23 '15 at 00:35

2

You are actually forgetting submitting the form, so the server side could update your model.

Also, if you are using PrimeFaces, you can use p:remoteCommand as well.

answered Feb 23 '15 at 00:35

xycf7

903
5
9

I have updated my code with: function handleEmailResponse(resp) { document.getElementById('poi-form:poi').value = 'usersNewEmailValue'; document.getElementById('poi-form').submit(); window.location.replace("timeline.xhtml"); } Yet still nothing is updated in the bean... thanks for the tip though! – Ockie Feb 23 '15 at 10:00
you are navigating away from the page before the form submit finishes. you should do the location update after form submission completed. your browser probably cannot find enough time to perform the form submit, since you immediately tell it to navigate away from the page. – xycf7 Feb 23 '15 at 12:31

score 0 · Accepted Answer · answered Feb 23 '15 at 22:31

Fixed using the following code:

index.xhtml

<h:form id="poi-form" styleClass="invisible">
   <input type="text" id="poiemail" name="poiemail" />
    <h:commandButton action="#{userBean.updateData()}" id="miAwesomeButton" value="I'm clicked by javascript"/>
</h:form>

javascriptfile.js

function handleEmailResponse(resp) {
    document.getElementById('poiemail').value = 'usersNewEmailValue';
    document.getElementById('poi-form:miAwesomeButton').click();
}

userBean.java

public String updateData() {
        HttpServletRequest request = (HttpServletRequest)FacesContext.getCurrentInstance().getExternalContext().getRequest();
        this.email= request.getParameter("poiemail");
        return "redirectURL";
}

updating bean from javascript

2 Answers2