Recently I’m working with CakePHP and SQLite to develop a gallery for a client. This is going to be my first CakePHP app.
While I’m working on the admin section, I wanted to allow the client to see the image once the image filename field is out of focused so that he could see if it’s the correct image.
The only JS library included with CakePHP is Prototype. Fortunately, the latest version of CakePHP (1.3.11 as of right now) allows us to include with other JS library. I included jQuery with the help of Js helper:
var $helpers = array("Js"=>array("Jquery"));
The above code is included with the whatever controller(s) you want to use this helper. In my case is galleries_controller.php and images_controller.php.
Then I just need to add the following code into the corresponding views, in my case is some of the admin views (admin_edit.ctp, and admin_add.ctp):
echo $this->Js->set("imageLoc", $this->Html->image("0")); echo $this->Js->get("#GalleryCover")->event("blur", "$('#cover').html(window.beta.imageLoc.substring(0, window.beta.imageLoc.length-12) + 'images/' + $('#GalleryPath').val() + '/thumb/' + $(this).val() + '" />');");
In the jQuery code section of the second line, I used the substring function to remove the last 12 characters in the img tag (0″ alt=”” />). And used the html function to include the generated code into the “cover” div. Every time the “GalleryCover” field is blurred out of focus, the image inside the “cover” div would change to the corresponding images.
Do you have any other tips on how to incorporate jQuery into CakePHP? Please share them in the comment below.