CakePHP jQuery FAQ: How do I get jQuery to work with CakePHP? (For example, to put default input focus on a textfield when a page loads (the onload event)).
If you haven't already done it, the first thing you need to do is install jQuery to work with CakePHP. Here's a quick CakePHP jQuery installation primer.
CakePHP jQuery installation/configuration
Before beginning, it is important to note that I'm working with CakePHP version 1.3.6, and jQuery version 1.4.4.
Here's how I got jQuery to work with CakePHP, and then solved the CakePHP form default input focus problem with jQuery:
1) Download jQuery
Download jQuery and put it in your $app/app/webroot/js directory. The filename will be something like query-1.4.4.min.js.
2) Get jQuery into your default.ctp file
<?php echo $scripts_for_layout; echo $this->Html->script('jquery-1.4.4.min'); ?>
Also per that CakePHP jquery instruction page, include a line like this before the closing </body> tag in your default.ctp file:
<?php echo $this->Js->writeBuffer(); // note: write cached scripts ?>
3) Specify the Js helper in your controller
Next, in your controller class, include jQuery with the CakePHP Js helper:
var $helpers = array('Js' => array('Jquery'));
4) Add the jQuery focus method to your CakePHP view page
Finally, add a jQuery method to your CakePHP view page. First, add a CSS 'id' tag to your input field. For clarity in this demo, I've named my id tag "focusme":
echo $this->Form->input('name', array('id' => 'focusme'));
Now just add the jQuery code to your CakePHP view page, something like this:
I put that code at the very end of my view page.
I suspect there is a much easier way to call this jQuery method from my CakePHP view using the Js Helper, but I haven't cracked that code yet. And as I'm about to quit for the day, I wanted to write this up while it's still fresh in my mind.
CakePHP jQuery default input focus - Summary
I hope this CakePHP jQuery default input focus tutorial has been helpful. I tried to show all the steps needed, including installation jQuery with CakePHP, and then the CakePHP jQuery input focus solution. If you have any questions (or better yet, suggestions to improve this), just leave a comment below.
Note that for a simple example like this, using jQuery with CakePHP is overkill. I could have done something like this in just a few lines of code:
But, I really wanted to get jQuery working with CakePHP today, so that's part of the reason I went this route.
Now if I could just figure out the magic "$this->Js..." incantation that's supposed to be making my life easier...