0

How can I set a Textbox value using a javascript call

asked 2011-03-30 17:08:28 +0800

dartcwb gravatar image dartcwb
9 1

I have an app using zk and at some point I call a javascript that shows an outer div containing a search panel

(Clients.evalJavaScript("showMySearchDIV()");).

I want the DIV'S javascript event onclick() to set the value of the zk textbox. This search panel is located at another div and it is pure html/javascript.

thanks.

delete flag offensive retag edit

11 Replies

Sort by ยป oldest newest

answered 2011-03-30 19:55:58 +0800

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

Hi dartcwb,
You can try to invoke zk.Widget.$('$textboxId').setValue('xxx'); in onclick function.

link publish delete flag offensive edit

answered 2011-03-31 13:23:38 +0800

dartcwb gravatar image dartcwb
9 1

Thanks a lot DUDE!!!!

link publish delete flag offensive edit

answered 2011-09-03 03:22:45 +0800

Hasham gravatar image Hasham
15

hi

I m able to set a Text field value using javascript eg

zk.Widget.$(jq('$lbLatitude')).setValue(locmarker.getPosition().lat());
zk.Widget.$(jq('$lbLogitude')).setValue(locmarker.getPosition().lng());

These set values are showing on GUI.

But when i want to access these textfield value in my composer i m getting empty.

public class AddressLocatorComposer extends GenericForwardComposer {

Textbox lbLatitude;
Textbox lbLogitude;

public void onClick$save() {

System.out.println(lbLatitude.getValue()); //Empty

}

}

Kindly help me in this regard

link publish delete flag offensive edit

answered 2011-09-04 20:17:32 +0800

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

Hi Hasham,
please refer to the following sample

ZKFiddle-Link

index.zul
<zk xmlns:w="client">
<textbox id="tb" width="250px">
<custom-attributes org.zkoss.zk.ui.updateByClient="true"/>
</textbox>
<button label="set">
<attribute w:name="onClick"><![CDATA[
var tb = zk.Widget.$(jq('$tb')),
val = 'new ' + new Date();
tb.setValue(val);
tb.smartUpdate('value', val);
]]></attribute>
</button>
<button label="get" onClick="alert(tb.value)"/>
</zk>

link publish delete flag offensive edit

answered 2013-10-14 17:29:52 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2611 3 8
http://emrpms.blogspot.in...

Hi jimmyshiau

The above is not working if the java script method in the external file. Can you please show me an example

link publish delete flag offensive edit

answered 2013-10-14 17:30:44 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2611 3 8
http://emrpms.blogspot.in...

Here is the code

<window apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.product.webapp.Example.JavaScriptExampleVM')">

<script src="/js/javascriptexample.js"></script>

 <textbox id="hai" value="HAI"></textbox>

  <textbox id="txt" value=""></textbox>

<button id="btn" label="test" onTest="@command('onTest')" />

<button label="Click Here"
    xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="doTest();">
</button>

</window>

function doTest() {

var tb = zk.Widget.$(jq('$hai')),
val = 'new ' + new Date();

tb.setValue(val); tb.smartUpdate('value', val);

zAu.send(new zk.Event(zk.Widget.$('$btn'), 'onTest', zk.Widget.$('$hai').getValue()), 10);

}

package com.product.webapp.Example;

import org.zkoss.bind.annotation.AfterCompose; import org.zkoss.bind.annotation.Command; import org.zkoss.bind.annotation.ContextParam; import org.zkoss.bind.annotation.ContextType; import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.event.Event; import org.zkoss.zk.ui.select.Selectors; import org.zkoss.zul.Messagebox;

public class JavaScriptExampleVM {

@AfterCompose
public void initSetup(@ContextParam(ContextType.VIEW) Component view) {
    Selectors.wireComponents(view, this, false);
}

@Command
public void onTest(@ContextParam(ContextType.TRIGGER_EVENT) Event event) {
    Messagebox.show("Hi " + event.getData().toString());
}

}

link publish delete flag offensive edit

answered 2013-10-25 11:14:39 +0800

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

Hi Senthilchettyin

you have to turn on updateByClient attribute

<textbox id="tb" width="250px">
    <custom-attributes org.zkoss.zk.ui.updateByClient="true"/>
</textbox>
link publish delete flag offensive edit

answered 2018-11-15 04:58:59 +0800

Narayanan gravatar image Narayanan
1

updated 2018-11-15 08:28:45 +0800

cor3000 gravatar image cor3000
4332 1 7
ZK Team

Hi Jimmyshiau,

Am facing issue while trying to set the value to the textbox id.

 <textbox id="txtBxId" name="txtBxName"  value="" visible="false" >
    <custom-attributes org.zkoss.zk.ui.updateByClient="true"/> 
 </textbox>

From the javascript am trying to set the value to the textbox as like below, but i couldn't see any values to the respective textbox id or name. Could you please advise or provide some sample how to achieve it in Zul.

document.getElementById('txtBxId').value = "test";
document.getElementsByName('txtBxName')[0].value = "test";
link publish delete flag offensive edit

answered 2018-11-15 08:59:30 +0800

cor3000 gravatar image cor3000
4332 1 7
ZK Team

Hi Narayanan,

The component id you define in your zul file doesn't match your DOM-element's ID - that would be the UUID. So you can't just use document.getElementById(...) with the server id.

ZK's client side widget API provides convenient functions to access widgets by component ID without having to know the dynamically generated UUID.

Here the simple code:

var txtBx = zk.$('$txtBxId');
txtBx.setValue("test");
txtBx.fireOnChange(); /*optional notify the server*/

Or a running example on zkfiddle.

Here the related Client side JS docs:

link publish delete flag offensive edit

answered 2018-11-15 17:25:17 +0800

Narayanan gravatar image Narayanan
1

Hi Jimmyshiau, Thanks for your reply. Could you please provide me the steps how do i get the txtBx value in java.

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
2 followers

RSS

Stats

Asked: 2011-03-30 17:08:28 +0800

Seen: 1,183 times

Last updated: Nov 19 '18

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