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:

http://www.andrews-custom-web-design.com/cakephp.html

Category:

Science & Technology

Tags:

• Cakephp Tutorial
• Cakephp Ajax Tutorial
• Cakephp Js Helper
• Cakephp Ajax Helper

[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 :)

[andrewperk]

@unoLT Good tip, thank you.

[zoborowi]

I had the same issue. I found that the script was not wrapped jquery document ready function, so I had to add 'onDomReady'=>TRUE to the writeBuffer method call in the default.ctp. Not sure if this the right thing to do, but it worked.

echo $this->Js->writeBuffer(array('­cache'=>TRUE, 'onDomReady'=>TRUE));

In the comments of the writeBuffer function it says 'If the request is an XHR(ajax) request onDomReady will be set to false. As the dom is already 'ready'. Not sure what this means exactly.

[umnuscom]

@andrewperk Hi. You don't even need to use ids for the form elements. Hence reduced headache.

Example:

You can simply use $("input[name='name']"), $("input[name='email']") etc to access them :)

[nxttmac]

Thanks for the awesome tut!

[yasminsmells2]

@zoborowi This worked for me. Thanks!

[Carlitta87]

can u do one where u can send an email?

[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.

[PasiKimmo]

Thank You for your very clear presentation! Finally I could solve my problems to start learning ajax :) I want to thank You for your pronunciation and language too - english isn't my deal, but I like to listen and watch your videos.

[gojnik]

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!

[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!

[faizan101010]

@aradhyatul

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