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
hi samchuang,
i am using the code given by you in the below mentioned post
"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,"
the script is getting hitted but the jquery function is not getting processed.
The ZK page popup with the processing action( Processing...) and not getting closed.
Can u please let me know the jar versions you used for this post
With Thanks,
Magesh
Below is the code i have used
<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>
I am using zk 3.0.3 jar
I am getting the javascript error "Object Expected" in the result page
In the console i am getting "WARNING: Unknown processing instruction: script, "
Hi,
for ZK 303, I tested in FF, it work
<zk>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.maskedinput-1.2.2.js"></script>
<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>
<textbox id="maskedBox" >
<attribute name="onCreate">
String maskCommand = "applyMask('" + maskedBox.getUuid() + "')";
Clients.evalJavaScript(maskCommand);
</attribute>
</textbox>
</zk>
Hi Everyone,
Here is a sample using meiomask. I´ve tested a lot of mask plugins and i´m preety sure that meiomask is the best of it.
Well, I´ve created a new mask for input called anoto_pen with mask '***-***-***-**' and set this mask into textbox editId.
To create a new mask:
$.mask.masks = $.extend( $.mask.masks,{anoto_pen:{ mask: '***-***-***-**' } } );
To set the new mask. the trick is use
jq('$editId')
jq('$editId').setMask ( 'anoto_pen' );
this is the textbox below:
<textbox id="editId" width="1" maxlength="16"/>
this is the entire code:
<?xml version="1.0" encoding="UTF-8" ?>
<?script type="text/javascript" src="/js/jquery.meio.mask.js" charset="utf-8" ?>
<zk xmlns="http://www.zkoss.org/2005/zul">
<div width="100%" height="100%" id="rootParent" apply="br.com.mcampos.controller.anoto.AnotoPenController">
<script type="text/JavaScript" defer="true">jq(document).ready( function() { $.mask.masks = $.extend( $.mask.masks,{
anoto_pen:{ mask: '***-***-***-**' } } ); jq('$editId').setMask ( 'anoto_pen' );
} );</script>
<borderlayout id="borderLayout">
<north autoscroll="false" height="65px">
<grid>
<columns>
<column width="20%" align="center"/>
<column width="60%" align="center"/>
<column width="20%" align="center"/>
</columns>
<rows>
<row>
<image id="imageClienteLogo"/>
<label id="labelPenTitle" style="font-size:20px;color:#0C7A9A" value="##"/>
<image id="imageCompanyLogo"/>
</row>
</rows>
</grid>
</north>
<west size="50%" splittable="true" flex="true">
<!-- Por favor, nao mude o id desta div -->
<div width="100%" height="100%" id="divListBoxRecord">
<!-- Por favor, nao mude o id desta listbox -->
<listbox fixedLayout="true" id="listboxRecord" vflex="true" mold="paging" pagingPosition="both">
<listhead sizable="true">
<listheader id="headerPenId" align="left" label="##" sort="auto" width="150px"/>
<listheader id="headerPenUser" align="left" label="Vinculada" sort="auto"/>
</listhead>
</listbox>
</div>
</west>
<center flex="true">
<!-- Por favor, nao mude o id desta div -->
<div id="recordDetail" width="100%" height="100">
<!-- view mode -->
<div id="recordView" width="100%">
<grid width="100%">
<columns>
<column align="left" width="100px"/>
<column align="left"/>
</columns>
<rows>
<row>
<label value="##" id="labelCode"/>
<label id="recordId"/>
</row>
<row>
<label id="labelDescription" value="##"/>
<label id="recordDescription"/>
</row>
</rows>
</grid>
<div id="div_crud_buttons" fulfill="=/resources/crud_buttons.zul"></div>
</div>
<!-- Por favor, nao mude o id desta div -->
<div id="recordEdit" visible="false">
<grid width="100%" fixedLayout="true">
<columns>
<column align="right" width="15%"/>
<column align="left"/>
</columns>
<rows>
<row>
<label value="##" id="labelEditCode"/>
<textbox id="editId" width="1" maxlength="16"/>
</row>
<row>
<label id="labelEditDescription" value="##"/>
<textbox id="editDescription" width="99%" maxlength="64"/>
</row>
</rows>
</grid>
<separator/>
<div id="div_submit_cancel" fulfill="=/resources/save_cancel.zul"></div>
</div>
</div>
</center>
</borderlayout>
</div>
</zk>
By now, I´d like to change the mask on the fly, using just java code. that is, chage mask if some situation change. Like a accounting system to different companies. This I don´t now how to do, yet.
Hi
refer to sample code here
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk xmlns:w="client">
<?script src="./js/jquery.meio.mask.js" ?>
<div style="margin: 10px;">
<label multiline="true">
Demo jQuery plug: meioMask
http://www.meiocodigo.com/projects/meiomask/
</label>
</div>
<window title="Set mask from client" border="normal">
<textbox id="input">
</textbox>
<div>
<button label="Change mask to ‘***:***’">
<attribute w:name="onClick">
jq(this.$f('input').$n()).setMask('***:***').val('');
</attribute>
</button>
<button label="Change mask to ‘(aaa) **-9999′">
<attribute w:name="onClick">
jq(this.$f('input').$n()).setMask('(aaa) **-9999').val('');
</attribute>
</button>
<button label="unset the mask">
<attribute w:name="onClick">
jq(this.$f('input').$n()).unsetMask().val('');
</attribute>
</button>
</div>
</window>
<window title="Set mask from server" border="normal">
<script type="text/javascript">
function setMask(uuid, mask) {
var selector = "#" + uuid;
jq(selector).setMask(mask).val('');
}
function unsetMask(uuid) {
jq('#' + uuid).unsetMask().val('');
}
</script>
<textbox id="input2">
</textbox>
<div>
<button label="Change mask to ‘***:***’">
<attribute name="onClick">
Clients.evalJavaScript("setMask('" + input2.getUuid() + "', '***:***')");
</attribute>
</button>
<button label="Change mask to ‘(aaa) **-9999′">
<attribute name="onClick">
Clients.evalJavaScript("setMask('" + input2.getUuid() + "', '(aaa) **-9999')");
</attribute>
</button>
<button label="unset the mask">
<attribute name="onClick">
Clients.evalJavaScript("unsetMask('" + input2.getUuid() + "')");
</attribute>
</button>
</div>
</window>
</zk>
HI ,
I am using Grail project.
i am not able to use mask functionality on my zul page . here is my sample code :
<zk>
<?script type="text/javascript" src="jquery-1.4.2.js"?>
<?script type="text/javascript" src="jquery.maskedinput-1.2.2.js"?>
<script type="text/javascript">
jQuery.noConflict();
function applyMask(compId, mask){
alert(compId + ", " + compId);
compId = '#' + compId;
jQuery(compId).mask(mask);
}
</script>
Cell Phone :<textbox id="cellPhone" >
<attribute name="onCreate">
String maskCommand = "applyMask('" + cellPhone.getUuid() + "','(99) 9999-9999')";
Clients.evalJavaScript(maskCommand);
</attribute>
</textbox>
<zk>
Asked: 2009-11-23 11:39:52 +0800
Seen: 8,237 times
Last updated: Sep 22 '15
