How to update a JSF java string directly in a javascript function

Question

I want to know how to update a String in my backing bean directly from a Javascript function.

My example tries to call the Javascript function (where the String img will get updated), and then I want to access its new updated content in the save function which is the action event of the button.

This is an extract from the Xhtml file:

<Script>
function jsSave(){
     var text=document.getElementById("form:img");
     text.value="New text value";
    }
    </Script>

  <p:commandButton value="Change text" onclick="jsSave();" action="#{backbean.save()}"/> 
  <h:outputText value="#{masterpage_bean.img}" id="img"/>

In the backing bean I have this code:

   String img;

public String getImg() {
    return img;
}

public void setImg(String img) {
    this.img = img;
}

   public String save(){

    String tex;
    tex=img;

   // I want to do some stuff with the updated value of img here.


 return null;

}

It should be the other way around; update model and then rerender the view based on the updated model. If you want to use JSF, do it the JSF way. — Gimby
– Gimby, Commented Mar 11, 2014 at 15:28
Gimby, there are indeed scenarios where it is necessary to do it this way around. The larger picture here is that I want to capture the information from a canvas - which can only be done via a client side script. I then want to use that information on the server side to save the picture to a file. — Jan
– Jan, Commented Mar 12, 2014 at 6:34

Konstantin Yovkov · Accepted Answer · 2014-03-11 15:36:43Z

1

The JavaScript functions are located on the client-side, while the managed-beans are on the server-side. This is why you will need either a complete POST, or an AJAX request.

You can use the built-in JSF functionality by nesting a <f:setPropertyActionListener> to the <p:commandButton>. This will update a specific property in the managed bean with a specific value. For exameple:

<p:commandButton value="Change text" action="#{backbean.save()}">
    <f:setPropertyActionListener value="New text value" target="#{masterpage_bean.img}" />
</p:commandButton>

answered Mar 11, 2014 at 15:36

Konstantin Yovkov

63k9 gold badges107 silver badges152 bronze badges

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

1 Comment

Jan Over a year ago

Kocko that works - but I need to get the value from a call to the jsSave function. How would I implement that ?

Jan · Accepted Answer · 2014-03-14 10:46:17Z

0

The problem in my code was a spelling error of the function name (in the Javascript). So the example in the question actually will work perfectly. This is a technique that can therefore be used to update the content of a Javabean variable directly from a Javascript function. One instance where this is very useful is when you want to capture the contents of a canvas and save it in Java to the server.

answered Mar 14, 2014 at 10:46

Jan

3294 silver badges12 bronze badges

Comments

Jan · Accepted Answer · 2014-03-27 08:35:43Z

0

If you are using primefaces another really simply way to pass information between javascript and your javabean is the remoteCommand function.

answered Mar 27, 2014 at 8:35

Jan

3294 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to update a JSF java string directly in a javascript function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related