CODEWITHSUNDEEP
jquery
user327712
user327712

Reputation: 3321

How to pass some data to JQuery AJAX in CAKEPHP

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";}           
            }

Upvotes: 1

Views: 2324

Answers (2)

RobertPitt
RobertPitt

Reputation: 57268

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

Upvotes: 0

tbranyen
tbranyen

Reputation: 8577

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);

Upvotes: 1

Related Questions