0

id jQuery + ZK

asked 2010-02-09 17:03:56 +0800

aaloise gravatar image aaloise
30

What is the best option to work with ids in ZK to use jQuery plugins? Here is the scenario:

I would like to make a button enable only if the textbox's text size is equal to 14. There is a solution using onChanging on the server but
my wish is to use jQuery on the client side for that kind of situation.

The problem is that most of jQuery plugins use the id of the component, but the textbox id doesn't work if used in jQuery. For
example, "$submitButton.attr("disabled", "false");". This means that a button with id submitButton, somewhere in the code, will be enabled.
But if I use <button id="submitButton">, it won't work.

What's the solution here? If can't understand the issue please let me know...

delete flag offensive retag edit

6 Replies

Sort by » oldest newest

answered 2010-02-09 18:18:49 +0800

kesavkolla gravatar image kesavkolla
180 3

You will have to use ZK's JQuery extension mechanism to handle these things.

$("$submitButton") will give you access to the button.

Refere to the doc for more info: http://docs.zkoss.org/wiki/JQuery_Enhancement

-kesav

link publish delete flag offensive edit

answered 2010-02-10 02:55:45 +0800

zacy gravatar image zacy
42

updated 2010-02-10 03:12:42 +0800

H,aaloise
this is my example i use event onChange u can change this event with onchanging event for u self.
you can refer to www.w3scholls.com and search for JQUERY syntax

<textbox id="disableTextbox" focus="true">
        <attribute w:name="onChange">
        <![CDATA[
        var button = this.$f('button');
        var disableTextbox = this.$f('disableTextbox');
        if(disableTextbox.getValue().length == 5){
            button.setDisabled(false);
        }else{
            button.setDisabled(true);
        alert("please set value on textbox = 5 character to enable the button");
        }
        ]]>
    </attribute>
    </textbox>
<button label="click" disabled="true" id="button"/>

note : -) u must use xmlns:w="http://www.zkoss.org/2005/zk/client" for client side.
i hope this example can fix u problem.
thanks

zacy

link publish delete flag offensive edit

answered 2010-02-10 07:39:51 +0800

aaloise gravatar image aaloise
30

zacy, your example indeed works with onChange, but if I change it to onChanging it has a strange behaviour. I believe that there´s something else to do related to event value...

link publish delete flag offensive edit

answered 2010-02-11 02:27:11 +0800

zacy gravatar image zacy
42

updated 2010-02-11 02:29:45 +0800

aaloise,i use event onchanging but the respond is too long..therefore i use event onChange..maybe the team zkoss can help u for this problem
thanks aaloise

link publish delete flag offensive edit

answered 2010-02-11 10:22:53 +0800

aaloise gravatar image aaloise
30

zacy, I was able to get it work, this is how I did it:

<script type="text/javascript">
function enableButton(textboxWidget, v) {

var btn = textboxWidget.$f('btnDelete');

var textSize = v.length;

if(textSize > 3) {
btn.setDisabled(false);
} else {
btn.setDisabled(true);
}
}
</script>

<textbox id="text" tooltip="msg">
<attribute w:name="onChanging">
enableButton(this,event.value);
</attribute>
</textbox>
<button id="btnDelete" disabled="true" mold="os" label="Listar"/>

link publish delete flag offensive edit

answered 2010-02-11 12:14:31 +0800

zacy gravatar image zacy
42

nice aaloise,

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: 2010-02-09 17:03:56 +0800

Seen: 924 times

Last updated: Feb 11 '10

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