Fo Nko
Fo Nko

Reputation: 632

trying to load a content inside div with jquery using CAKEPHP

Ok i have been looking for a while now... and i wasnt able to find nothing related to jquery and cakephp when loading content to a div using the helper $this->Js->link... so i decided to post my question here in this awesome site... my first question and its so silly (i guess).

So... mechanics works fine, i mean.. it loads the content into a div called "algo" but now i try to add some effects (fadein) and im not being able to find the correct syntaxys for this! im brand new with cake... just 1 month old using it.

How do i add "fadeIn" effect when showing this damn div? i have tried lots of things but so far nothing makes the div load content with fadein effect whatsoever...

echo $this->Js->link('Categoria 1',  array('controller' => 'Categories', 'action' => 'categorias1'), array('update' => '#algo'));

this perfectly loads a bunch of pictures that i have on category 1 inside the div that im asking... what should i do to add fadeIn effect? i have added some crazy things to see if they work but... nope... no luck

i have even tried this crazy one:

echo $this->Js->link('Categoria 1',  array('controller' => 'Categories', 'action' => 'categorias1'), array('update' => '#algo', array('effect' =>array('fadeIn', array('speed' => 'slow'), true))));

any help will be apreciated! nobody shows examples of divs with cakephp.. or at least i wasnt able to find one that suits my needs!

great site by the way! it helped me a lot all this years!

Upvotes: 0

Views: 1178

Answers (2)

Fo Nko
Fo Nko

Reputation: 632

i finally manage myself to accomplish what i was trying to do and i want to share with you guys what i did:

echo $this->Js->link('categoria 1', array('controller' => 'Categories', 'action' => 'categorias1'),array('update' => '#categorias', 'evalscripts' => true, 'before' => $this->Js->get('#algo,#categorias2')->effect('fadeOut', array('buffer' => false)), 'complete' => $this->Js->get('#categorias')->effect('fadeIn', array('buffer' => false))));                                                                                              

This huge piece of code is doing what i was expecting to, i also have added some editing to my jquery helper in order to pass them more than one div so i can have them all refreshed at the same time.

if you guys want to hack your helper here is the code:

cake/libs/view/helpers/jquery_engine.php

find this line:

$success .= $this-jQueryObject . '("' . $options['update'] . '").html(data);';

and have it replaced with:

if(is_array($options['update'])){
                $success .= 'var temp = ' . $this->jQueryObject . '("     <div/>").html(data);';
                foreach($options['update'] as $divId){
                    $success .= $this->jQueryObject . '("' . $divId . '").html('     . $this->jQueryObject . '("' . $divId . '", temp).html());';
                }
            } else {


            $success .= $this->jQueryObject . '("' . $options['update'] .     '").html(data);'; //linea que ya estaba

            }
            //termina agregado

Upvotes: 1

RichardAtHome
RichardAtHome

Reputation: 4313

As suggested by Dunhamzzz, I write all my jQuery by hand and never use the helpers. There doesn't seem to be any point tbh.

One useful tip, pass the base URL and any other useful cake variables into your page as a javascript variable. Add this to your layout:

<?php 
$baseUrl = Router::url('/');

echo $this->Html->scriptBlock(<<<EOJS
var baseUrl = '{$baseUrl}';
EOJS
); ?>

Upvotes: 0

Related Questions