-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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.
Hi dartcwb,
You can try to invoke zk.Widget.$('$textboxId').setValue('xxx'); in onclick function.
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
Hi Hasham,
please refer to the following sample
<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>
Hi jimmyshiau
The above is not working if the java script method in the external file. Can you please show me an example
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());
}
}
Hi Senthilchettyin
you have to turn on updateByClient attribute
<textbox id="tb" width="250px">
<custom-attributes org.zkoss.zk.ui.updateByClient="true"/>
</textbox>
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";
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:
Asked: 2011-03-30 17:08:28 +0800
Seen: 1,234 times
Last updated: Nov 19 '18