CakePHP jQuery - A default input focus onLoad solution

By Alvin Alexander. Last updated: June 4, 2016

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

Per the CakePHP jQuery installation instructions (the CakePHP Js Helper page), include the jQuery JavaScript library into the <head> section of your CakePHP default.ctp file like this:

<?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:

<script type="text/javascript">
$('#focusme').focus();
</script>

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.

php

focus