Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi
I'm trying to use jQuery plus a plugin to place an input mask in a given textbox but it's not working. What am I doing wrong?
Follow my sample code:
<window>
<hbox>
Masked input: <textbox id="txmasked" />
</hbox>
<script src="/app/resources/scripts/jquery-1.3.2.js" type="text/javascript"/>
<script src="/app/resources/scripts/jquery.maskedinput-1.2.2.js" type="text/javascript"/>
<script>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("txmasked").mask("99.999.999");
});
</script>
</window>
Thanks
Gyo
I don't have any experience with jQuery, but did you inspect your DOM tree to make sure that your input element is there with the id or name of "txmasked"?
Hi
Actually I've just tried another way to do that since we have to inform the component's uuid instead of that id "txmasked", for example.
The new approach does not work too. I try to apply the input mask at the window's onCreate time, the "Mask applied..." alert box is displayed but the field does not contains the input mask.
New approach:
<window>
<script src="/app/resources/scripts/jquery-1.3.2.js" type="text/javascript"/>
<script src="/app/resources/scripts/jquery.maskedinput-1.2.2.js" type="text/javascript"/>
<script type="text/javascript">
jQuery.noConflict();
function applyMask(compId){
compId = '#' + compId;
jQuery(compId).mask("99.999.999/9999-99");
alert("Mask applied for "+compId);
}
</script>
<attribute name="onCreate">
String maskCommand = "applyMask('" + txmasked.getUuid() + "')";
Clients.evalJavaScript(maskCommand);
</attribute>
<hbox>
Masked input: <textbox id="txmasked" />
</hbox>
</window>
@gyowanny
Try surrounding your ZUL markup with:
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
</zk>
Then for the attribute use this instead
<attribute w:name="onCreate">
jq('txmasked').mask("99.999.999");
</attribute>
You can take a look at the ZUL files of these examples for more information
http://docs.zkoss.org/wiki/ZK_5.0_and_jQuery
Thank you for the small talk
Here is my solution, it work
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
<?script src="/js/jquery.maskedinput-1.2.2.js" ?>
<hbox>
Masked input:
<textbox id="txmasked">
<attribute w:name="onClick">
jq(this).mask("99.999.999/9999-99");
</attribute>
</textbox>
</hbox>
</zk>
Hi guys,
Thanks in advance for all the help, but unfortunately yours suggested approaches did not work for me since I'm using window component.
Please take a look at the following piece of my real code and then let me know if there is a way to make the input mask work:
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./cadCli"?>
<window id="cadCli" closable="false" mode="embedded" border="none"
width="100%" height="100%" use="br.com.eseller.app.zk.composer.representante.CadClienteWindow" >
<script src="/app/resources/scripts/jquery-1.3.2.js" type="text/javascript"/>
<script src="/app/resources/scripts/jquery.maskedinput-1.2.2.js" />
.........
<grid>
<rows>
<row>
<label value="CNPJ"/>
<textbox id="cnpj" readonly="@{cadCli.readOnlyFields}" value="@{cadCli.bean.cnpj}">
<attribute name="onCreate">
jq(self.getUuid()).mask("99.999.999/9999-99");
</attribute>
</textbox>
</row>
.......
</window>
Hi ~~
you could add <zk></zk> outside window, the <zk> doesn't do anything to UI, it's only a container, do you have any reason not to use ??
and may I ask the zk version you use? my solution work on zk5
and, in zk5,
"w:name" means the event on client side
"jq" could only use in zk5 in client side
"this" : in client side, it means the component, javascript object
<attribute w:name="onClick">
jq(this).mask("99.999.999/9999-99");
</attribute>
Hi ~~ gyowanny:
It's a great news, I finally use jquery in zk3, and use you code, It did work, I use
<?script type="text/javascript" src="/js/jquery-1.3.2.js"?> to load .js,
<zk>
<?script type="text/javascript" src="/js/jquery-1.3.2.js"?>
<?script type="text/javascript" src="/js/jquery.maskedinput-1.2.2.js"?>
<script type="text/javascript">
jQuery.noConflict();
function applyMask(compId){
alert("in applyMask:" + compId);
compId = '#' + compId;
jQuery(compId).mask("99.999.999/9999-99");
alert("Mask applied for "+compId);
}
</script>
<textbox id="maskedBox" >
<attribute name="onCreate">
String maskCommand = "applyMask('" + maskedBox.getUuid() + "')";
Clients.evalJavaScript(maskCommand);
</attribute>
</textbox>
</zk>
Hi Samchuang,
Great news! But unfortunately it did not work for me since I'm using the Window component. The alert box is displayed saying that the mask has been applied but when I type something in the text box nothing happens, the input is not being formatted.
Please check my code again:
<zk>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./cadCli"?>
<window id="cadCli" closable="false" mode="embedded" border="none"
width="100%" height="100%" use="br.com.eseller.app.zk.composer.representante.CadClienteWindow" >
<script type="text/javascript" src="/app/resources/scripts/jquery-1.3.2.js"/>
<script type="text/javascript" src="/app/resources/scripts/jquery.maskedinput-1.2.2.js"/>
<script type="text/javascript">
jQuery.noConflict();
function applyMask(compId){
alert("in applyMask:" + compId);
compId = '#' + compId;
jQuery(compId).mask("99.999.999/9999-99");
alert("Mask applied for "+compId);
}
</script>
.....
</window>
</zk>
Thank you
Gyo
Hi folks,
I've just realized what is the issue.
When my window is displayed, the fields of the crud form are readonly = true. When I changed my code to leave the fields editable when the window shows up, the mask finally has been applied.
So the conclusion is that you can't apply an input mask via jQuery in a readonly field.
Thank you for all your help guys!
Gyo
Asked: 2009-11-23 11:39:52 +0800
Seen: 8,237 times
Last updated: Sep 22 '15