0

OnChange Javascript not setting the bean field

asked 2010-11-14 15:39:35 +0800

FujitsuConsulting gravatar image FujitsuConsulting
165 1

updated 2010-11-14 15:40:00 +0800

Hi All,

We want a javascript function to change the text of a textbox and the bean field with it. We have got it so the textbox text is changed but the bean is not updated.

Here is an example:

Person.java

package test;

public class Person
{
  private String  firstName = "";
  private String  lastName  = "";
  private Boolean married   = true;

  public Person( )
  {

  }

  public Person( String firstName, String lastName, Boolean married )
  {
    firstName = firstName;
    lastName = lastName;
    married = married;
  }

  public String getFirstName( )
  {
    return firstName;
  }

  public void setFirstName( String firstName )
  {
    this.firstName = firstName;
  }

  public void setLastName( String lastName )
  {
    this.lastName = lastName;
  }

  public String getLastName( )
  {
    return lastName;
  }

  // getter and setters

  public void setFullName( String f )
  {
  // do nothing
  }

  public String getFullName( )
  {
    return firstName + " " + lastName;
  }
}

Zul File

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<window>
  <zscript>
    import test.Person;
    Person person = new Person();
    person.setFirstName("First");
    person.setLastName("Last");
  
  
    void createListener (Textbox w) {
      w.setWidgetListener("onChange","this.setValue(onChangeTest(this.getValue()));");
    }
  </zscript>

  <grid width="400px">
      <rows>
          <row> First Name: <textbox onCreate="createListener(self);" value="@{person.firstName}"/></row>
          <row> Last Name: <textbox value="@{person.lastName}"/></row>
          <row> Full Name: <label value="@{person.fullName}"/></row>
      </rows>
  </grid>  
  
  
  <script type="text/javascript">
    <![CDATA[ 
      function onChangeTest (s) {
        s = 'TEST'; 
        return s;
      };
    ]]>
  </script>
</window>

When you change the first name from "First" to whatever you type, the onChange of the javascript fires and replaces the First name to be 'TEST', but you can see that the Full Name is whatever you typed, not "TEST Last".

Does anyone know how to fix this?

Thanks!

delete flag offensive retag edit

8 Replies

Sort by ยป oldest newest

answered 2010-11-14 21:21:43 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

updated 2010-11-14 21:22:06 +0800

Hi Shane,
You have to fire onChange to server after you update a new value

w.setWidgetListener("onChange","this.setValue(onChangeTest(this.getValue()));this.fireOnChange();");

link publish delete flag offensive edit

answered 2010-11-15 15:48:15 +0800

FujitsuConsulting gravatar image FujitsuConsulting
165 1

updated 2010-11-15 15:49:46 +0800

We have added fire onChange to the above code, but now we get a few errors:

Within IE we now get a javascript error:

A Runtime Error has occurred.
Do you wish to Debug?
Line 9
Error: 'zk' is null or not an object

Using Firebug with FireFox it displays the following:

too much recursion
zk()()zk.wpd (line 8)
zk()()zk.wpd (line 8)
zk()(Window test.zul, undefined)zk.wpd (line 8)
zk.wpd()()zk.wpd (line 8)
[Break on this error] (function(aB,z){var Z=aB.document;var a=... aR==="string"?aR:aR+"px")}})})(window);


We are using zk5.05.

Have we done something wrong?

link publish delete flag offensive edit

answered 2010-11-15 20:02:35 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

You have to change the data that will be send to server.

void createListener(Textbox w) {
	w.setWidgetListener("onChange",
			"var value = onChangeTest(this.getValue());"+
			"this.setValue(value);"+
			"event.data.value = value;");
}

link publish delete flag offensive edit

answered 2010-11-16 15:05:57 +0800

FujitsuConsulting gravatar image FujitsuConsulting
165 1

Excellent thanks as1225!

Is there any documents with this information on?

link publish delete flag offensive edit

answered 2010-11-16 19:28:13 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

You can refer to the following link.
http://docs.zkoss.org/wiki/Notify_Server
http://docs.zkoss.org/wiki/How_to_Process_Request_with_JSON

and you can open the firebug's console in the FireFox to see the AU request.
it will show what data will be dend to server.

link publish delete flag offensive edit

answered 2010-11-17 14:41:32 +0800

FujitsuConsulting gravatar image FujitsuConsulting
165 1

Thanks again as1225 :)

link publish delete flag offensive edit

answered 2014-03-31 12:29:05 +0800

gercibert gravatar image gercibert
9 1

updated 2014-03-31 12:56:31 +0800

I have same problem using textbox,jquery and mask: .zul <hlayout>Phone: <textbox id="txtPPhone1" width="130px" disabled="false" oncreate="createListener(self);" value="@bind(vm.phone)"/>
</hlayout> <zscript> void createListener(Textbox w) { w.setWidgetListener("onBind", "jq(this).mask('(999) 999-9999');"); } </zscript>

link publish delete flag offensive edit

answered 2014-04-09 02:19:34 +0800

jimmyshiau gravatar image jimmyshiau
4921 5
http://www.zkoss.org/ ZK Team

Hi gercibert

you can refer to our demo http://www.zkoss.org/zkdemo/effects/form_effect

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-11-14 15:39:35 +0800

Seen: 783 times

Last updated: Apr 09 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More