ysJQueryRevolutionsPlugin - 1.0.9

jQuery Plugin

You are currently browsing
the website for symfony 1

Visit the Symfony2 website


« Back to the Plugins Home

Signin


Forgot your password?
Create an account

Tools

Stats

advanced search
Information Readme Releases Changelog Contribute
This plugin is deprecated and is not maintained anymore. Please use jQuery4PHP. http://jquery4php.sourceforge.net/ http://sourceforge.net/projects/jquery4php/
Show source

ysJQueryRevolutionsPlugin

The ysJQueryRevolutionsPlugin provides support for jquery in your app views; Importing the jquery library and simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Everything from PHP code (Symfony helpers). jQuery and Symfony write less, do more.

Installation

  • Install the plugin (from http://plugins.symfony-project.com)

    $ symfony plugin:install http://www.symfony-project.org/plugins/ysJQueryRevolutionsPlugin
    
  • Install the plugin (from .tgz file)
    Download the .tgz from
    http://www.symfony-project.org/plugins/ysJQueryRevolutionsPlugin
    execute command:

    php symfony plugin:install path/to/ysJQueryRevolutionsPlugin-.x.x.x.tgz
    
  • Enable modules in your settings.yml (optional for demos)

    all:
     .settings:
       enabled_modules:      [default, jquery_demo]
  • Enable the plugin if necessary by editing config/ProjectConfiguration.class.php:

    $this->enablePlugins('ysJQueryRevolutionsPlugin');
  • Publish plugin assets (Very Important for version < 0.0.8):

    php symfony plugin:publish-assets
    
  • Clear you cache

    symfony cc
    
  • See the app.yml to change where you load the library jquery (Optional)

    all:
      .ys_jquery_revolutions_plugins:
        ### To load jQuery from ajax.googleapis.com:
        ### - jquery.min.js
        #ys_jquery_path: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
        ### - jquery.js
        #ys_jquery_path: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
     
        ### To load jQuery from localhost
        ### - Only available jquery.min.js
        ys_jquery_path: /ysJQueryRevolutionsPlugin/js/jquery/jquery-1.3.2.min.js
     
        ### Uses structured configuration if you use plugins.
        #ys_jquery_web_dir: ysJQueryRevolutionsPlugin
        #ys_jquery_js_dir:  jquery
        #ys_jquery_core: jquery-1.3.2.min.js
        #ys_jquery_plugins_folder: plugins
        #ys_jquery_js_folder:  js
        #ys_jquery_css_folder: css
        #ys_jquery_images_folder: images
        #path_separattor:       '/'



HELPERS

  • ysJQueryRevolutionsHelper (Recommended): generates the following jQuery syntax

    jQuery('jquery-selector').event();
  • ysJQueryDollarRevolutionsHelper: generates the following jQuery syntax

    $('jquery-selector').event();
  • ysUtilHelper: Add this helper in your wiews to support the php functions json_encode() and boolean_for_javascript() php functions on Symfony 1.0.x

    IMPORTANT: If you use these helpers very often is advisable to add in the settings.yml

    all:
      .settings:
        standard_helpers:       [Partial, Cache, Form, Javascript, ysJQueryRevolutions]



HOW TO USE

The Helper like_function(): Is a helper to represent a javascript function. First Parameter is the body functions. Second Parameter are the functions arguments.

<?php echo like_function(
            "alert('Hello + ' myArg1); alert('Hello + ' myArg2)",
            "myArg1, myArg2")?>
 
//javascript code generated
function(myArg1, myArg2){
alert('Hello + ' myArg1); alert('Hello + ' myArg2);
}


The Helper eval_function(): Is a helper to represent the javascript eval() function. First Parameter is the body functions.

<?php echo eval_function(
            like_function(
              "alert('Hello + ' myArg1); alert('Hello + ' myArg2)",
              "myArg1, myArg2"))?>
 
//javascript code generated
 
eval("function(myArg1, myArg2){
alert('Hello + ' myArg1); alert('Hello + ' myArg2);
})"; ?>


The New Helper jquery_execute(): To execute immediately a javascript or jquery function

<?php/* BEFORE the creation of jquery_execute function
  echo add_jquery_support(
        'document',
        'ready' ,
        like_function(
          jquery_toggle_event(
            'li',
            array(
              like_function('$(this).css({"list-style-type":"disc", "color":"blue"});'),
              like_function('$(this).css({"list-style-type":"disc", "color":"red"});'),
              like_function('$(this).css({"list-style-type":"", "color":"yellow"});'),
          )))); */
 
/* Now with jquery_execute*/
 
echo jquery_execute(
     jquery_toggle_event(
       'li',
       array(
         like_function('$(this).css({"list-style-type":"disc", "color":"blue"});'),
         like_function('$(this).css({"list-style-type":"disc", "color":"red"});'),
         like_function('$(this).css({"list-style-type":"", "color":"yellow"});')))); ?>


Adding click event:

<?php echo add_jquery_support(
            '#jQuerySelector',  // You can use any jquery Selector '# . : < >' ...
            'click' ,   // events 'click' , 'change' , 'dblclick' ...
            like_function("alert('Hello World')")); ?>
 
<input type="button" id="exampleId" value="Click me" />


Symfony Helper inside javascript code (use jquery_support() not add_jquery_support() )

<?php echo core_init_javasacript_tag() ?>  // <= <script language="javascript" type="text/javascript">
   var jsVar = 'Hello world';
<?php echo jquery_support(
            '#jQuerySelector',
            'click' ,
            like_function("alert(jsVar)"); ?>
<?php echo core_end_javasacript_tag() ?>   // <= </script>
 
<input type="button" id="exampleId" value="Click me" />



AJAX SUPPORT
jquery_ajax() Load a remote page using an HTTP request

<?php echo jquery_ajax(array(
            'url' => url_for('module/action')
            'data' => "'varName=value'", // See the double and simple quotes
            'type' => 'POST'));
?>


jquery_periodically_ajax()

<?php echo core_init_javasacript_tag() ?>
    <?php echo jquery_periodically_ajax(array(
                'url' => url_for('module/action'),
                'dataType' => 'json' ,
                'success' =>  like_function("alert(data)" , 'data'),
                'data' => "'varName=' + Math.ceil(Math.random() * 3)",
                'frequency' => 5)); // <- Default value is 10 seconds
    ?>
<?php echo core_end_javasacript_tag() ?>
 
//OR
 
<?php echo jquery_ajax(array(
            'url' => url_for('module/action')
            'data' => "'varName=value'", // See the double and simple quotes
            'type' => 'POST'
            'frequency' => 3));  <- No default value
?>


Ajax call on Click Event

<?php echo add_jquery_support(
           '#jQuerySelector',
           'click' ,
           like_function(
             jquery_ajax(array(
               'url' => url_for('module/action')
               'data' => "'varName=value'", // See the double and simple quotes
               'type' => 'POST'))));  ?>
<a id="exampleId">To Remote Function</a>


Ajax events and another way to add click event

<?php echo jquery_ajax(array(
            'listener' => array(
                'selector' => '#jQuerySelector',
                'event' => 'click'),
            'url' => url_for('module/action'),
            'dataType' => 'json' ,
            'data' => "'varName'=5",
            'type' => 'POST',
            'complete' => like_function("alert('complete')" ),
            'success' => like_function("alert(data)" , 'data'),
            'async' => 'true',
            'beforeSend' => like_function("alert('beforeSend')"),
            'error' => like_function("alert('error')")));
?>


jQuery Submit form with jquery_ajax_form()

<?php echo jquery_ajax_form(
              '#myForm',
              array(
                'url' => url_for('module/action'),
                'success' =>  like_function("alert('Submit success')" , 'data'),
                'type' => 'POST')) ?>



OTHERS AJAX HELPERS:
* jquery_ajax_setup() Setup global settings for AJAX requests

<?php echo  jquery_ajax_setup(
                array(
                    'type' => 'json',)) ?>



* jquery_ajax_get_request()
Load a remote page using an HTTP GET request

<?php echo  jquery_ajax_get_request(
                array(
                    'listener' => array(
                        'selector' => 'document',
                        'event'    => 'ready'),
                    'url' => url_for('module/action'),
                    'callback' => like_function('alert("GET: Data SUCCESS: " + data);', 'data'),
                    //'type' => 'json',
                    'data'    => array ('varName' => 'value'))) ?>



* jquery_ajax_post_request()
Load a remote page using an HTTP POST request

<?php echo jquery_ajax_post_request(
            array(
                'listener' => array(
                    'selector' => 'document',
                    'event'    => 'ready'),
                'url' => url_for('module/action'),
                'callback' => like_function('alert("POST: Data SUCCESS: " + data);', 'data'),
                //'type' => 'json',
                'data'    => array ('varName' => 'value'))) ?>



* jquery_load()
Load HTML from a remote file and inject it into the DOM

<?php echo jquery_load(
        '#spnLoadResult',
        array(
            'listener' => array(
                'selector' => '#jQuerySelector',
                'event'    => 'click'),
            'url' => url_for('module/action'),
            'callback' => like_function('alert("Data Loaded!")'),
            'data'    => array ('varName' => 'value'))) ?>



* jquery_get_json():
Load JSON data using an HTTP GET request

<?php  echo  jquery_get_json(
              array(
                'listener' => array(
                  'selector' => '#jQuerySelector',
                  'event'    => 'click'),
                'url' => url_for('module/action'),
                'callback' => like_function('alert(data)', 'data'),
                'data'    => array ('varName' => 'value')))  ?>



* jquery_get_script():
Load JSON data using an HTTP GET request

<?php  echo  jquery_get_script(
              array(
                'listener' => array(
                  'selector' => '#jQuerySelector',
                  'event'    => 'click'),
                'url' => url_for('module/action'),
                'callback' => like_function('alert(data)', 'data')))  ?>


* jquery_ajax_event():
Attach a function to be executed whenever an AJAX request completes , fails is sent,request begins ,requests have ended and completes successfully

<?php   echo jquery_ajax_event(
           '#jQuerySelector',
           'ajaxComplete',
           like_function("alert('Complete')")); ?>
<?php   echo jquery_ajax_event(
           '#jQuerySelector',
           'ajaxSend',
           like_function("alert('Send')", 'event,request,settings'));?>
<?php   echo jquery_ajax_event(
           '#jQuerySelector',
           'ajaxStop',
           like_function("alert('Stop')", 'event,request,settings'));?>
<?php   echo jquery_ajax_event(
           '#jQuerySelector',
           'ajaxSuccess',
           like_function("alert('Success')", 'event,request,settings'));?>
<?php   echo jquery_ajax_event(
           '#jQuerySelector',
           'ajaxStart',
           like_function("alert('Start')", 'event,request,settings'));?>
<?php   echo jquery_ajax_event(
           '#jQuerySelector',
           'ajaxError',
           like_function("alert('Error')", 'event,request,settings'));?>



EFFECTS SUPPORT
jquery_execute_effect()

jquery_execute_effect('#imageId',  // jquery Selector
  'fadeOut' ,  // event
  array('speed' => 'fast',
'callback' => "alert('Event Excuted')")

Adding effect on click event

<?php echo add_jquery_support(
           '#exampleId',
           'click' ,
           like_function(
             jquery_execute_effect(
               '#sfImg' ,
               'fadeIn' ,
               array('speed' => '900')))) ?>
 
<input type="button" id="exampleId" value="Click me" />
<img id="sfImg" alt="Debug toolbar" src="/sf/sf_web_debug/images/sf.png"/>

Adding effect on Double Click event with callback

<?php echo add_jquery_support(
            '#exampleId',
            'dblclick' ,
            like_function(
              jquery_execute_effect(
                '#sfImg',
                'fadeOut' ,
                array(
                  'speed' => 'fast',
                  'callback' => "alert('Event Excuted')")))) ?>
 
<input type="button" id="exampleId" value="Hide Image" />
<img id="sfImg" alt="Debug toolbar" src="/sf/sf_web_debug/images/sf.png"/>

IMPORTANT: See the demo module for more documentation and source code.


AVAILABLES HELPERS

  • CORE documentation

    • core_init_javasacript_tag
    • core_end_javasacript_tag
    • core_get_jquery_var
    • add_jquery_support
    • jquery_support
    • like_function
    • eval_function
    • jquery_serialize
    • jquery_serialize_array
    • jquery_get
    • jquery_set
    • add_css
    • add_js
  • AJAX documentation

    • jquery_ajax
    • jquery_ajax_setup
    • jquery_ajax_get_request
    • jquery_ajax_post_request
    • jquery_load
    • jquery_get_json
    • jquery_get_script
    • jquery_ajax_event
    • jquery_periodically_ajax
    • jquery_ajax_form
  • EFFECTS documentation

    • jquery_execute_effect
  • EVENTS documentation

    • jquery_live_event
    • jquery_die_event
    • jquery_toggle_event
    • jquery_hover_event
    • jquery_bind_event
    • jquery_one_event
    • jquery_unbind_event
    • jquery_trigger_event
    • jquery_trigger_handler_event
  • ysUtilHelper

    • boolean_for_javascript
    • json_encode
    • set_jquery_plugins_configuration_files
    • merge_plugin_defaults_options

Todo

  • Fix bugs
  • Adding support for popular jquery plugins
  • Upgrade to jQuery 1.4