ezjscore: eZ Publish JavaScript and Ajax framework

jQuery

jQuery is a fast and concise JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. In order to use jQuery with ezjscore, simply put the following line in an eZ Publish template:

{ezscript_require( array( 'ezjsc::jquery' ) )}

This will provide a minified version of the jQuery library served from the Google CDN as mentioned earlier.

<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

jQuery syntax is well documented in the official jQuery documentation [http://docs.jquery.com/Main_Page]. As with YUI 3, ezjscore provides a jQuery IO wrapper. The following example code is taken from the ezjscore_demo extension:

{* On demand require some custom css *}
{ezcss_require( 'ezjscdemo.css' )}

{* Some simple html where we want to load some content from server *}
<div id="hello-world-id" class="my-custom-css-class">
   Waiting for ezjscore ajax call... (See FAQ if you get script error and / or nothing happens!)
</div>

{* On demand require jQuery and ezjscore's jQuery.ez *}
{ezscript_require( array( 'ezjsc::jquery', 'ezjsc::jqueryio' ) )}

Notice the jqueryio item, which provides a wrapper for the ezjscore server call router. To make an XML HTTP request call to the router, use the jQuery.ez() function, where the first parameter is a string containing the name of the method to call, the second is for the post parameters, and the third parameter is the callback function.

{*
  Use more or less standard jQuery code, only custom 
  ezjscore bit is: jQuery.ez : 
  A jQuery.post wrapper generated by "ezjsc::jqueryio" 
  that figures out the server url for you.  
*}
<script type="text/javascript">
{literal}
// $(document).ready() alias without $ globally 
// (used in several library's)
jQuery(function( $ )
{
    // Parameters can be sent as post data ({arg1: 'hi!'}) or as 
    // call parameter (eg: "ezjscdemo::search::hello" )
    // Use post for string values to not end up reaching url path limit..
    $.ez( 'ezjscdemo::search', {arg1: 'hi!'}, function( data )
    { 
        if ( data.error_text )
            $( '#hello-world-id' ).html( data.error_text );
        else
            $( '#hello-world-id' ).html( data.content );
    });
});
{/literal}
</script>