Cakephp Ajax Tutorial - Using Cakephp's Js Helper and jQuery

In this Cakephp ajax tutorial I walk you through building an ajax enabled contact form. We'll use Cakephp's Js helper along with jQuery to do an ajax database submission. Then we write our own jQuery code to do ajax validation using our existing Cakephp model validations.
The source code and sql for this video are now available on my website:
www.andrews-cus...

[@gottalikeit2010]

Wish I was young again....You are very sharp and clear in your tut's, appreciate it.

[@miguelarchersalgado]

Thank you so much. This was really helpful. Whenever knowledge is shared like this my faith in mankind gets restored.

[@IdiotaIntegral]

Your tutorials are great! Please keep the cakephp ones coming, they are the best I found and the 2.x changes are driving me crazy when I try to follow old tuts.

[@AbubakerMahmoudshangab]

Andrew Perkins , you are very talented in making difficult things seem easy as a piece of cake. thank you.

[@pitocms]

CakePerk is the best teacher for cakephp !!

[@Lsakurifaisu]

Thankyou for posting this video, not only did it help me understand how to use ajax with the JS helper but it also cleared up some of the confusion I was having with cakePHP. A superb tutorial :)

[@d0ngix]

Thank you for putting this video. It is very much helpful to me as a newbie to cakephp.

[@dmays67]

Great tute! Well paced, clear and explained in understandable terms. As a someone very new to CakePHP & JQuery I found this a great help. Look forward to seeing more of these!

[@aoporanu]

Man, this is great, really helped me a lot with my current project. Both parts are great, but the raw jquery without JsHelper at the end is killer!

[@adamburgers]

Great tip, this stumped me for a little while.

[@sonbemi]

Great tutorial. It really helps and accelerates my learning CakePHP

[@dermarek8383]

Nice tutorial !!! In Cake 2.x you'll have to do some adjustments, especially in the controller to set the Model's data: $this->request->data['Message'][$this->request->data['field']] = $this->request->data['value'];

[@mmasukei1213]

Thank you!! jqueryがよくわからなかったので、ひとまずかけました。ありがとうございます!

[@BlakMetall]

A video like this is what i needed, so i really really say thank you to you. andrewperk. Thanks for your time.

[@RightAwayAi]

you can use the same video for cake 2.0 also, I did that and it is working fine

[@ucha19871]

Nice tutorial Andrew

[@xtiam57]

You are the best man! Thank you very much for this tut. Make more CakePHP tuts!

[@theredfont]

very helpful. i've downloaded your tutorial and i'll try your example later. thanks man. you rock.

[@jameslcasey1]

Andrew, excellent tutorial! Hope to see more.

[@sunnyattwal7829]

Hi andrewperk, It is owesome..... Thanks

[@palmertj1]

great job it was very useful, Thanks

[@savedario]

Thanks a lot. Very helpful !

[@andrewperk]

Because just typing the string of 'sending' is not going to select that element so we can fade it in. You need to use javascript to select the #sending element and then use jQuery to fade it in. Try it yourself, exchange out the $this->Js->get('sending') with just the string 'sending'. It wont work.

[@petergoodey]

JsHelper is being discontinued in CakePHP 3.0 - so it's best avoided.

[@mbiangacila]

thank you very much, this help me and save my time.

[@slappy457]

@zoborowi Cheers - though your fix did not resolve my problem.. after some further debugging I found that error.length was always greater than 2, on successful or unsuccessful results.. so after some head scratching, I opened my validate.ctp to find a white space on the second line. Removed it and all functions as it should.

[@IslandCave]

The error you pointed out at about 51 minutes worked for me just fine without duplicating error messages. With the way that you fixed in your video, that caused it to not give me any error messages when you tab out. For the name field anyway. The email and message fields worked just fine the way you had them. Why is that?

[@superbeastxj9]

I fixed this by ensuring that only echo $scripts_for_layout; is the function calling scripts in default.ctp. Also, updated cake uses $this->request->data instead of $this->data in messagescontroller's validate_form() function

[@bkkmptt]

Thank you very much for the great tutorial!

[@fenix32]

Great tutorial. But when i click in send with the field empty it draws another form above the original form. How can i fix it?

[@literatemonk]

Very helpful... thank you for doing this.

[@lakshijlak]

please do this tutorial for cakephp 2 . it would be really helpful. Thanx again..

[@faizan101010]

@aradhyatul put $this->Js->writeBuffer(array('cache' => TRUE)); in the end of form ctp file. And remove it from layout.ctp

[@JoeyHauschildt]

Thank you! This was very helpful.

[@slappy457]

Most complete tutorial on the Js helper in Cakephp to update via AJAX. thanks! Do have a question regarding success callback. My app; success is never called. I can confirm records are being added to the db so it is successful but the call back function is never called. If I put 'success'=>$this->Js->alert('test') .. nothing happens. The 'complete' call back function runs though. Do you have any info on what makes a successful request or not? Maybe it will help me debug. cheers!

[@pimienta400]

Nice tutorial! How could I do to update a select box after changing another one?

[@benkjm]

got this to work. Thanks. I noticed that every time I reload the page, the Js helper recreates a new random .js file in app/webroot/js folder. Is there any way to remove these file in cakephp? Also, is there a way to disable the submit button until all of the validation criteria are met? My issue is that for some reason it's still passing the $this->Message->save($this->data) 'if' statement, but it's reloading the "Could not save to database" view in the "success" div... Thanks

[@adamburgers]

Managed to get the 'sending' section to work but I'm not getting any form validations to work - no error messages appear when I tab or click out of the field. Only error I can see (and it doesn't show an error in the webpage itself) is in 'validate_form.ctp' it says "$error seems to be uninitialized" I've encountered this error before but can't seem to work this one out, and I've followed and double-checked through the tutorial. Thanks. Great tutorial nonetheless.

Thank you for making this tutorial. Just what I needed for my current project. I have a question, is there a way of uploading files via AJAX? What I would like to do is upload an image via AJAX and then display its thumbnail on the same page as the form. I already have the image resizing part setup on the server.

[@Mapciooo]

Holy fck dude! I love your voice! Also thank you for free and so valuable knowledge!

[@BraveStefan]

thank you it's helped me

[@intune6]

I am new to learning cakephp I followed your tutorial, which I like very much, but I cannot get the error messages to show. The code works fine and I don't get any errors in firebug, but no message on blur event? I am using 2.4.5 version of cakephp if that makes a difference?

[@d061]

you absolute monster !! :)

[@aradhyatul]

Its not even showing the fadein and fadeout effect. I checked the source code and the script is generate but can't see the effects :(

[@adamzerner5208]

i'm getting this error and i can't figure out what the problem is Notice (8): Indirect modification of overloaded property PostsController::$data has no effect [APP/Controller/PostsController.php, line 96] note: i tried to apply this tutorial to the previous blog tutorial with the auth component, trying to validate the add action rather than the contact us form this is the line with the problem $this->data['Post'][$this->params['form']['field']] = $this->params['form']['value'];

[@adamzerner5208]

at about 38:00, i don't understand why the handleNameValidation code works the way i'm thinking about it is that in order for the div with the id of name-notEmpty to be created, name-notEmpty.length first has to be equal to 0. however, name-notEmpty.length doesn't exist, and thus can't be equal to 0, thus it could never be created. could you help me understand this?

[@imeros88]

Hello @andrewperk, Very good job. Until now, I managed to have the same result as you describe, but I have the following problem: What will happen if I press submit and the page needs validation ( eg not valid mail address)? I see that in this case the response returns all the form. In this case then, the response could not be resubmitted if I press submit button again. Have you any idea why this happens? Thanks in advance, Dimitris

[@aradhyatul]

Hey, I followed the tutorial exactly but its not working.. when I click on the submit button it refreshes and submits the data..no Ajax ! what could be the problem ?

[@tonylisanti]

@aradhyatul Not sure if this is the same problem that you are having but, for me, I noticed that the js buffer script was not being created on my server. Turns out the permissions for the folder /webroot/js on my server were not set to be written to and buffer script file was never being created. I changed the permissions for that folder to 777 and now the buffer script is being created and the ajax is working. Not sure if that's the best fix but worked for me.

[@RakeshKambojVinayak]

hi andrewpark it's not working when i click on send it create two form with simple validation error

[@gunarsekaran]

thanks

[@vikramparihar655]

my blur validation not working properly and after submit blank form all field are showing error as we done. but a new contact form is creates automatically flow the first contact form

[@adamzerner5208]

at about 14:30... rather than using $this->Js->get(), why not just type in the string of 'sending...'?

[@rebirth3X]

I've hit upon the same problem where 'succe­ss' isn't displayed on submission yet everything else appears to be working, sending message appears and messages saved in SQL. Any ideas how to solve this problem? I did try your suggestion of adding a path $this->render('/Messages/succe­ss', 'ajax'). I'm using CakePhp 2.2.4

[@nishanthanr605]

Watch in 2020

[@RakeshKambojVinayak]

hi andrewpark pls upload video for cron job for mail in cakephp;if it possible give full detail of cron and functionality

[@unoLT]

In validation.js why u use $("#name").attr("id") or $("#name").val() ? You can write just $(this).attr("id") or $(this).val(). And then you dont need dublicate your code :)

[@Abhisheksehgal297]

Notice (8): Undefined property: View::$Js [APP\views\layouts\default.ctp, line 16] Fatal error: Call to a member function writeBuffer() on a non-object in C:\xampp\htdocs\cakeajax\app\views\layouts\default.ctp on line 16

[@lampels2003]

Great! tut alys..

[@andrewperk]

This video is rather old. Cake does things a little differently now. Use $this->request->data instead. Try it like this: $field = $this->request->data['field']; $value = $this->request->data['value']; $this->request->data['Post'][$field] = $value;

[@andrewperk]

@unoLT Good tip, thank you.

[@rebirth3X]

What do I do when the username and password fields fulfill the validation rules but, the user doesn't actually exist? I would surely need some response like, 'User unknown, please check your details and try again.'. How do I add this to the Model?

[@RamirezZ2083]

I have the same problem , did you solve it ?

[@coxixx]

would you change CRUD in cake php with ajax

[@intune6]

Also, when I submit the form without any fields entered, I get error messages, and a double form on the page. One right under the other?

[@isotonik5ora]

Hi James, I facing same problem with you. SO did you solve the double form on the page yet? please tell me how do you solve it. Thanks.

[@intune6]

Adam Klasik No. I never solved it. I decided to not use a framework and just dove into learning php and write my own apps from scratch. There is not a lot of documentation on cakephp or tutorials. Seems to me you spend more time learning someone else's framework and the time would be better spent learning how to write your own. This includes code ingniter, yii, and all the rest. I've messed with them all and it's easier to just learn php yourself.

[@topprogrammingtv]

blur is not the correct event "change " is the correct one

[@aradhyatul]

Hey @andrewperk How can I contact you ? I used the same code from your website but still this thing wont work ! When I click on the submit I am redirected to a blank page, The entries are saved in the database though ! please help !

[@RightAwayAi]

include Js helper in the app_controller.php

[@CamiloSanchez1979]

Is this 2.0?

[@Carlitta87]

can u do one where u can send an email?

[@ernestojimenez6085]

it will be awesome if you translate this to 2.x

[@josephmyalla3611]

any one done similar tutorial using cakephp2

[@CodeByNight]

Can't believe they still baking this terrible framework.

[@mobinshah1]

Can't believe you can even type.

[@IslandCave]

Is this also for Ajax 1.3? Because I can't get it to work, I get: Undefined property: View::$Js [APP\views\layouts\default.ctp, line 17]