Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1890479
  • 博文数量: 606
  • 博客积分: 9991
  • 博客等级: 中将
  • 技术积分: 5725
  • 用 户 组: 普通用户
  • 注册时间: 2008-07-17 19:07
文章分类

全部博文(606)

文章存档

2011年(10)

2010年(67)

2009年(155)

2008年(386)

分类: Java

2009-12-01 17:47:24

Sometimes we need to write some browser side JavaScript function to do something. We can use CSA (Client Side Action) to trigger the operation without problem. However, after the JavaScript execution completes, we might need the value from the JavaScript variable to be accessed from within a zscript function (the code running at server side). Here is a trick to do it. Basically, we prepare a "proxy" textbox. Copy the JavaScript value to textbox's value and fake an "onChange" event to really send the value back to Server. Following is the example codes:

  <zk>
  <script type="text/JavaScript">
    [CDATA[ 
      function test(tbxsss) {
        var sssval = "Time: "+(new Date()); 
        tbxsss.value = sssval;
 
        if (document.createEvent) {
          var evt = document.createEvent('HTMLEvents');
          evt.initEvent( 'blur', false, false);
          tbxsss.dispatchEvent(evt);
 
          var evt2 = document.createEvent('HTMLEvents');
          evt2.initEvent( 'change', false, false);
          tbxsss.dispatchEvent(evt2);
        } else if (document.createEventObject) {
          tbxsss.fireEvent('onblur');
          tbxsss.fireEvent('onchange');
        }
      }
    ]]> 
  script>
  <window id="win" title="My First Window" border="normal" width="200px">
  <textbox id="sss" value="test" onChange="alert(self.getValue());" visible="false"/>
  <button id="btn" label="Invoke JS" action="onclick:test(#{sss})"/>
  window>
  zk>

When you click the button, the JavaScript function test() is executed. It then copys the new String "abc" into the textbox's value and fake onblur and onchange events. This will cause the ZK JavaScript engine to pass the new value "abc" back to server side, update the Textbox object's value property, and fire the "onChange" ZK event. And now you can access the value from this "proxy" textbox. And if you read the example code carefully, you should notice that the textbox is "invisible" on the browser (visible = "false") so it will not interfere your layout. Have fun!

阅读(1010) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~