Awesome! The more I see examples with the JsHelper, the more I get excited about it. I’m Really looking forward to the release of 1.3. Keep up the great work!

I do have a question, if I were using Prototype as my JS Library would my update option change from ‘#content’ -> ‘content’ (notice the lack of #). Or does the JsHelper use $$() instead of $() for Prototype element grabbing?

Nick: With prototype you would still use ‘#content’. The prototype adapter will use $() or $$() based on the selector you provide. The same is true of the Mootools adapter.

In order to use mootools, we’ll need to add it to our layout. Download the latest release of mootools, and save it to app/webroot/js

Are we supplosed to save this file as mootools.js and do you recommend the YUI Compressed version of Mootools like it is recommended on the Mootools site?

Jon: I use the compressed mootools, in production situations. While developing I much prefer the uncompressed source. It makes debugging with Firebug/webinspector far less painful.

mark story: What are you using for compressing js files? Nice, simple solution is showen here http://www.milesj.me/blog/read/32/CSSJSAsset-Compression-In-CakePHP What I miss is merge js files into one file.

Is there any way to merge js file in javascript helper? So when I use $javascript->link(array(‘jquery’,‘default’)); the output js file would look like jquery_default.js

Mark, great post and great work. I’ve used your example with jQuery but the events don’t seem to chain correctly. The first ajax request is successful however as it does not seem to bind the events in the ajax reply, it results in a non-ajax request on second event.

evalScripts does not seem to have any affect with jQuery – is this a known limitation or have I missed something?

Thanks – this helped me.

Can I produce two simultaneous effects? For example, can I fade out my content div and show my progress/spinner div, then hide my progress/spinner div and fade in my content div?

can u show the demo ??

- thanks =

ohhh, thats the demo right:)…..!

thanks

Hi, updating a div ‘#tablesajax’ containing only tables and navigation does refresh the whole index.ctp page in this same div? Yet it is still a XHR request as followed through firebug.
Eventhough I have followed this tutorial strictly… any idea why?

What about gif loading image?

Manuel: Well in the before/after callbacks you can apply effects to a loading image instead of the content region.

'before' => $this->Js->get('#loading')->effect('fadeIn', array('buffer' => false)),
'after' => $this->Js->get('#loading')->effect('fadeOut', array('buffer' => false))

Should do the trick I would think.

Thanks for the answer, but I mean how to add effects to two or more elements when Ajax request is succesfull. On CakePHP 1.2 I can do stuff like this:

‘complete’=>“Element.hide(‘myImg’);Effect.Appear(‘myDiv1’);Effect.SlideDown(‘myDiv2’)”)

but how can I do this with JsHelper on 1.3?

Manuel: Well you could either append multiple calls to JsHelper, or you could just use some literal javascript strings like you did before. Both will work.

How make a observerField with mootools in cakePhp 1.3?

I am doing a a observerField in this way:

1. Select
   echo $this->Form->input(‘Vclassroom.type’,array(‘options’=>$types, ‘between’=>’: ‘));

#observerField
$this->Js->get(’#VclassroomType’)->event(‘change’, $this->Js->request(’/admin/vclassrooms/type/’, array(‘update’ =>’#fooDiv’, ‘dataExpression’ => True, ‘before’ => $this->Js->get(’#loading’)->effect(‘fadeIn’, array(‘buffer’ => false)), ‘data’ => $this->Js->serializeForm(array(‘isForm’ => False, ‘inline’ => True)))));

Hey,

i’ve tryed to get this ajax pagination work but not very successfully. Instead of Mootools i use Jquery as default. I baked a brandnew cake application with just one table (posts).

unfortunately i get some prototype links like Event.observe(‘link552139870’, ‘click’, function(event) […]

I even tryed to set jquery as JS Enginge but without success. var $helpers = array(‘Js’ => array(‘Jquery’));

I use the lates stable 1.3.

Does anyone has an idea?

Excellent! And it actually works!

Cheers!
Maciej

I have followed perfectly your guide but it only works at 50%.

I just have two link for pagination: 1 & 2. If I reach page through: http://my_web.com/items/admin/page:1 link to page 2 is active, if I click this link the second page will be opened in ajax style. OK! Now, link for page 2 is disabled and link for page 1 is active, but, if I click this link the page will be reloaded entirely as normal call.

Viceversa happen if I call http://my_web.com/items/admin/page:2. Clicking on page 1 will happen in AJAX, successivly clicking on page 2 will happen with classic call.

Why?