1

I am learning how to use JQuery to help check data availability.
To start with it, I wrote a few lines of codes using cakePHP.

I have written a function in a Controller for checking data input,
and the URL is like this: http://www.mywebsite.com/controllers/action/avariable
I was trying to pass the value in a Input TextBox field using the JQuery Ajax to the URL above,
but I don't know why it is not working in passing a variable to the Controller's action.
Could you help me out please?

<Script language="javascript"> //<!-- $(document).ready(function(){ $(document).change(function() { var usr = $("#data\\[User\\]\\[name\\]").val(); if(usr.length >= 3){ $("#username").append('<span><img align="absmiddle" src="loader.gif" />Checking</span>'); $.ajax({ type: "POST", url: "http://www.mywebsite.com/controllers/action/", data: usr, success: function(msg){ if(msg == 'OK') { $("#username").append('<span><img align="absmiddle" src="accepted.png"/></span>'); } else { $("#username").append('<span>'+msg+'</span>'); } } }); } else { $("#username").append('<span>The username should have at least 3 characters.</span>'); } }); }); //--> </Script> <form name="adduser" id="adduser" method="post" action="/controllers/action2"> <table border=0 width="100%"> <tr> <td>Username</td> <td> <div id="username"> <input type=text name="data[User][name]" id="data[User][name]"> </div> </td> </tr> <tr> <td> <input type="submit" value="Send"> </td> </tr> </table> </form>


Here is the code of the Action:

 function action($uname=null){ $result2=$this->__avail($uname); if($result2==1) {return "OK";} else {return "NOT";} }
Improve this question

2 Answers 2

Reset to default
1

Well for one you're assigning a change event to the document object which isn't going to do anything. What you probably want is:

(function($) { var timeout; var $user = $("#data\\[User\\]\\[name\\]").bind("keyup keydown keypress", function() { window.clearTimeout(timeout); // Give it a delay since the end user is probably still typing timeout = setTimeout(function() { ... your ajax logic and length check ... ... can use $user here to access the textfield ... }, 500); }); )(jQuery);
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

The change event will bubble up to the document and fire the handler.
patrick, I see. The only issue with that is the obvious implication that another element will trigger the same event unintentionally.
0

Why not use the compliment HTML data-* attributes

<Script language="javascript"> //<!-- $(document).ready(function(){ $('input[rel*=ajax_check]').change(function(){ if(this.val().lengh > 4) { var action = $(this).attr('data-action'); $(this).parent().append('<span><img align="absmiddle" src="loader.gif" />Checking</span>'); $.ajax({ type: "POST", url: "http://www.mywebsite.com/controllers/" + action, data: $(this).val(), success : function(return) { if(return.toLower() == 'ok') { $("#username").append('<span><img align="absmiddle" src="accepted.png"/></span>'); }else { $("#username").append('<span>'+retrun+'</span>'); } } }) } }) }); //--> </Script> <form name="adduser" id="adduser" method="post" action="/controllers/action2"> <table border=0 width="100%"> <tr> <td>Username</td> <td> <div id="username"> <input type=text name="data[User][name]" data-action="action" rel="ajax_check"> </div> </td> </tr> <tr> <td> <input type="submit" value="Send"> </td> </tr> </table> </form>

notice that i have added to the attribute data-action the action of what needs to be check for example if the action was user name then just change that to user name.

Also any item you wish to dynamically check with ajax all you have to do is add the data-action and rel to the input.

Hope this helps

Improve this answer

4 Comments

Your example will not work as change is not a valid event for an input type text.
@lark - change() is most certainly valid for a text input.
yes, please confer with jQuery::change() documentation, he change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements
Ah interesting, it works on blur instead of while the text has been changed. Thanks for clarifying.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.