0

How to use jQuery in ZK?

asked 2009-11-23 11:39:52 +0800

gyowanny gravatar image gyowanny
283 1 2 6

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

delete flag offensive retag edit

39 Replies

Sort by ยป oldest newest

answered 2009-11-23 12:12:56 +0800

caclark gravatar image caclark
1753 2 5
http://clarktrips.intltwi...

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"?

link publish delete flag offensive edit

answered 2009-11-23 12:26:42 +0800

gyowanny gravatar image gyowanny
283 1 2 6

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>

link publish delete flag offensive edit

answered 2009-11-23 23:12:56 +0800

tmillsclare gravatar image tmillsclare
799 2 5 29

@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

link publish delete flag offensive edit

answered 2009-11-24 03:01:01 +0800

samchuang gravatar image samchuang
4084 4

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>

link publish delete flag offensive edit

answered 2009-11-24 06:12:29 +0800

gyowanny gravatar image gyowanny
283 1 2 6

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>

link publish delete flag offensive edit

answered 2009-11-24 18:36:10 +0800

samchuang gravatar image samchuang
4084 4

updated 2009-11-24 18:38:12 +0800

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>

link publish delete flag offensive edit

answered 2009-11-25 07:48:19 +0800

gyowanny gravatar image gyowanny
283 1 2 6

Hi,

Actually I'm using the Zkoss 3.6.3 so I believe that's why I can't make it work. So it seems the jQuery only works with ZK5 right?

Thanks a lot for all your help!

Cheers

Gyo

link publish delete flag offensive edit

answered 2009-11-27 05:07:44 +0800

samchuang gravatar image samchuang
4084 4

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>

link publish delete flag offensive edit

answered 2009-11-27 07:07:17 +0800

gyowanny gravatar image gyowanny
283 1 2 6

updated 2009-11-27 07:34:47 +0800

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

link publish delete flag offensive edit

answered 2009-11-27 07:45:48 +0800

gyowanny gravatar image gyowanny
283 1 2 6

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

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: 2009-11-23 11:39:52 +0800

Seen: 8,183 times

Last updated: Sep 22 '15

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