Java script on texbox zk

asked 2014-12-16 01:56:49 +0800

Rajanan gravatar image Rajanan
1 2

updated 2014-12-16 01:58:22 +0800

I am new to Zul framework and can you some help to write/execute the javascript to do validation. My code is there : In .zul file <textbox id="credit_card_number" name="credit_card_number" c:onchange="testFunction()"/>

<script> </script>

Alert is working. but none of the other alert working. I need to read the text box value.. and make Ajax call and get the response. Once get the response, need to set the other field. Please help me. Thanks in advance..

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted

answered 2015-01-21 15:46:59 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

updated 2015-01-21 16:19:56 +0800

Okay. I insist that you don't have to make an ajax call manually. If the web server or the web site that will serve the ajax call is on a different domain than the one where your page is running, you will have troubles due to security issues related to ajax's nature. Normally, cross-domain ajax requests are not allowed. You have to use a hack like CORS.

Also, ZK framework is one of the safest ajax frameworks due to its server-side nature. Doing manually these ajax calls you may become vulnerable.

If i were you, i would try to put this communication code on the server-side in my ViewModel using the java.net.URLConnection to open a connection with the verification server.

But anyway, we are here to help, so here is a sample demonstrating ajax call from a zul page:

<?page contentType="text/html;charset=UTF-8"?>
<window title="How to make a native ajax call" border="normal" xmlns:w="client">
    <textbox id="txtCardNumber" w:onChange="verifyCardNumber(this)" 
             placeholder="credit card number" />

    <button label="Verify" w:onClick="onClickVerifyCardNumber()" />

    <textbox id="txtAjaxResponse" placeholder="ajax response" />

<script type="text/javascript"><![CDATA[    

   function onClickVerifyCardNumber() {
     verifyCardNumber( $('$txtCardNumber') );

   function verifyCardNumber(textbox) {     
     var cardNumber = textbox.getValue();

       url: "http://server:port/bla/bla/" + cardNumber,

       success: function(response) {

       error: function() {
         alert("Bad things happen...");



Hope that helps


link publish delete flag offensive edit

answered 2014-12-16 14:57:52 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

May i ask why do you need to make an Ajax call?

In ZK, you may use the data binding mechanism to pass the value automatically to the server, then make any required validation and finally update your data model.


link publish delete flag offensive edit

answered 2015-01-20 17:02:34 +0800

Rajanan gravatar image Rajanan
1 2

updated 2015-01-20 17:03:43 +0800

Thanks for the quick replay..

My requirement is to integrate of credit card.so when ever customer enters the credit card number, then need to make AJAX call and get the token from server.

here in ZK frame work,

====code starts===

<vbox spacing="2px"> <hbox widths="7em, 8em"> <label value="Customer name :"/> <textbox id="credit_card_number" name="credit_card_number" c:onchange="testFunction()"/>

        <hbox widths="7em, 8em">
            <label value="Credit card number:"/> 
            <textbox id="customer_name" name="customer_name" value="" />

        <hbox widths="7em, 8em">
            <label value="box"/> 
            <textbox id="customer_name1" name="customer_name1" value=""/>


=====code ends ===

On change or on tab out, need to write AJAx call and get the token from server. once token is generated, need to update card details as ** 1234 in credit card field...

Help is appreciated.. Thanks in advance..

link publish delete flag offensive edit
Your answer
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

1 follower



Asked: 2014-12-16 01:56:49 +0800

Seen: 38 times

Last updated: Jan 21 '15

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