Extending current sfJqueryPLugin

[simo]

Thanks to Fourat and other contributors for making the Jquery plugin.

I started working on it to add some more methods.

From the latest svn version (rev 7739) I have added some more methods :

* jq_sortable_element
* jq_draggable_element
* jq_drop_receiving_element
* jq_tabs ( http://stilbuero.de/jquery/tabs_3/ )
(some dependent methods based on Javascript default Helper)

These new methods require jquery-ui and for jq_tabs use ui.tabs.css (+ images if needed)


By default javascript files they are localized in /web/js/jq (css is localizes under web/css/jq) but you can specified you own directory.

The sortable_element() methods will not work using jquery-ui v 1.5 because of an internal bug

If you really need it to work with jquery-ui 1.5, remove the { key: 'order'} option in the serialize method oj jq_sortable_element() helper and give your sortable items ID order as prefix.


Follow the link to build your jquery-ui file :
http://ui.jquery.com/download_builder/

Link to the UI docs : http://docs.jquery.com/UI

If someone with svn write access wants to commit the change, It would be nice.
If not, we can centralized here our contributions to this plugin.

[gEndelf]

what about autocomplete ?

[simo]

It would be nice, we're waiting for your contribution ~ ~

[msaspence]

good work btw, this has been a long time coming for me (i hate prototype)

just a little suggestion...

if different javascript libraries are to have equal standing in symfony shouldnt the configuration for the location of the jquery file be sf_jquery_web_dir next to where the existing prototype one is?

[simo]

msaspence > well i'm not sure I get your question but I guess an answer. app_sfJQueryPlugin_library_path was initially set to /js/jquery, you can of course change the location.

That location will for sure be re-organised on the next symfony version (which will not integrate prototype by default).

[mcaleau]

Hello all!,

Based in the "simo" script for jQueryHelper.php, i have added two new functions:

* jq_visual_effect()
* jq_input_auto_complete_tag()

To enable the auto complete feature you have to download the jquery autocomplete plugin from here:
http://jquery.bassistance.de/autocomplete/

This is the code of the two above functions:

Code: Select all

  /**
   * Returns a JavaScript snippet to be used on the AJAX callbacks for starting visual effects.
   * @param string type(show, hide, effect, toggle)
   * @param string name (blind, clip, drop, explode, fold, puff, slide, scale, pulsate) (bounce, highlight, shake, transfer)
   * @param string element_id name value of dom element
   * @param array js_options options for the selected effect
   * @param string speed value for the effect's speed
   *
   * Example:
   *  <?php echo jq_link_to_function('Reload', array(
   *        'update'  => 'posts',
   *        'url'     => '@reload',
   *        'complete => jq_visual_effect('toggle', 'blind', 'posts', array('direction' => 'vertical' ), 'normal'),
   *  )) ?>
   *
   * If no '$element_id' is given, it assumes "element" which should be a local
   * variable in the generated JavaScript execution context. This can be used
   * for example with drop_receiving_element():
   *
   *  <?php echo jq_drop_receving_element( ..., array(
   *        ...
   *        'loading' => jq_visual_effect('fade'),
   *  )) ?>
   *
   * This would fade the element that was dropped on the drop receiving element.
   *
   * You can change the behaviour with various options, see
   * http://http://docs.jquery.com/UI/ for more documentation.
   */
  function jq_visual_effect($type, $name, $element_id = false, $js_options = array(), $speed = "slow")
  {
    $response = sfContext::getInstance()->getResponse();
    $response->addJavascript(sfConfig::get('app_sfJQueryPlugin_ui_folder', 'jq').'/jquery-ui');

    $element = $element_id ? "$('#$element_id')" : 'this';

    return "$element.$type('$name', "._jq_options_for_javascript($js_options).", '$speed');";
  }

  /**
   * wrapper for jquery autocompleter.
   * @param string name value of input field
   * @param string default value for the input field
   * @param string url to server script
   * @param array input tag options. (size, autocomplete, etc...)
   * @param array completion options. (use_style, etc...)
   *
   * @return string input field tag, div for completion results, and
   *                 auto complete javascript tags
   */
  function jq_input_auto_complete_tag($name, $value, $url, $tag_options = array(), $completion_options = array())
  {
    $context = sfContext::getInstance();

    $tag_options = _convert_options($tag_options);

    $response = sfContext::getInstance()->getResponse();
    $response->addJavascript(sfConfig::get('app_sfJQueryPlugin_ui_folder', 'jq').'/jquery-autocomplete');

    //$comp_options = _convert_options($completion_options);
    if (isset($comp_options['use_style']) && $comp_options['use_style'] == true)
    {
      $response->addStylesheet(sfConfig::get('sf_prototype_web_dir').'/css/input_auto_complete_tag');
    }

    $tag_options['id'] = get_id_from_name(isset($tag_options['id']) ? $tag_options['id'] : $name);

    $javascript  = input_tag($name, $value, $tag_options);
    $javascript .= jq_javascript_tag("$('#".$name."').autocomplete('$url', "._jq_options_for_javascript($completion_options).");");

    return $javascript;
  }



I also attach my current jQueryHelper.php file.

I hope that someone find it helpful =).

---

[jjoaco]

hi everyone, i wrote the method jq_observe_field some months ago....

few days ago, i asked for contribute but for now, i don't have answers from plugin's lead.

[simo]

Fourat is not anymore into the plugin development.
He told me we can do anything with this plugin.

ACtually, we should organise ourselves and commit the plugin into the svn ....
any volunteer?

[jjoaco]

Fourat is not anymore into the plugin development.
He told me we can do anything with this plugin.

ACtually, we should organise ourselves and commit the plugin into the svn ....
any volunteer?

but, for commit we need to be plugin's packager or not?

i can be the volunteer ~ ~

[simo]

jjoaco > so, just Be the volunteer!!

http://www.symfony-project.org/plugins/FAQ

and let us know! ~ ~

[spiderjoe02]

why can't i download the attachment? ~ ~

[halfer]

I think the attachments on the forum corrupted recently. If one of the original posters can re-post it, please do, but meantime I will drop a line to one of the Sensio folks to see if they can kick it...

[simo]

Hi,
Here it comes!

[_Andreas_]

Hello jjoaco,

hi everyone, i wrote the method jq_observe_field some months ago....

few days ago, i asked for contribute but for now, i don't have answers from plugin's lead.

it would be very nice if you could share your ''jq_observe_field'' ~ ~

@simo, mcaleau: Thank you very much for you work!

Greetings from Austria
Andreas

[jjoaco]

Hello jjoaco,

hi everyone, i wrote the method jq_observe_field some months ago....

few days ago, i asked for contribute but for now, i don't have answers from plugin's lead.

it would be very nice if you could share your ''jq_observe_field'' ~ ~

@simo, mcaleau: Thank you very much for you work!

Greetings from Austria
Andreas

no problem, letme find

..................

i dont use the same sintaxis that use the standard observe_field because i think the field being observed must be passed automatically to the function...

if i put the "with" option this code is concatenated to the ajax call ....

Code: Select all


function jq_observe_field($name, $options = array())
{
  if (isset($options['with']))
  {
    $options['with'] .= "+'&'+$('#".$name."').attr('id')+'='+$('#".$name."').val()";
  }
  else
  {
    $options['with'] = "$('#".$name."').attr('id')+'='+$('#".$name."').val()";
  }
  return jq_javascript_tag("$('#".$name."').change(function(){".jq_remote_function($options).";});" ;);
}



examples:

Code: Select all

<?php echo jq_observe_field('sucursal_id', array(
  'update'   => 'departament_id',
  'url'      => 'module/action',
)) ?>

<?php echo jq_observe_field('departament_id', array(
  'update'   => 'document_id',
  'url'      => 'module/action',
  'with'     => "'suc_id='+$('#suc_id').val()"
)) ?>


[_Andreas_]

Hi jjoaco,

if I use your code for observe_field I get the following error message:

Code: Select all

Error: illegal character
Sourcefile: http://localhost/frontend_dev.php/iceMenuPages/show/ice_menu_id/53
Row: 214, Column: 86
Sourcecode:
$('#sucursal_id').change(function()
{jQuery.ajax({type:'POST',dataType:'html',data:'$('#sucursal_id').attr('id')+'='+$('#sucursal_id').val()',success:function(data, textStatus)
{jQuery('#departament_id').html(data);},url:'/frontend_dev.php/module/action'});

Do you have an idea which character should be illegal?
I think it has something to do with the qoutes in the data parameter...

I'm using jQuery 1.3.2.

Thank you
Andreas

[jjoaco]

i think ....

$('#sucursal_id').change(function()
{
jQuery.ajax({
type:'POST',dataType:'html',
data: '$('#sucursal_id').attr('id')+ '=' + $('#sucursal_id').val()',
success:function(data, textStatus)
{
jQuery('#departament_id').html(data);
},
url:'/frontend_dev.php/module/action'
});

[_Andreas_]

Hi,

you are right, after removing those quotes, it's working. But the problem is that "jq_remote_function" adds those quotes:

Code: Select all

elseif (isset($options['with'])) $formData = '\''.$options['with'].'\'';

I could change this line and remove the quotes, but I'm not sure if this is really a bug in the "jq_remote_function".

Andreas

[JoeZ99]

Hey there.

I had the very same issue with the quotes. and with those quotes, I'm not able to send any javascript-evaluated expression, and it's rather frustrating.

anyway, I just created a ticket about it:

http://trac.symfony-project.org/ticket/6047

In there I also posted a small patch which adds a new "raw_with" option, intented to be used for passing javascript/evaluable strings.

[simo]

guys, which version are you working with?

In the file I've posted, I read the following (around line 273) :

Code: Select all

 elseif (isset($options['with'])) $formData = $options['with'];

and not :

Code: Select all

elseif (isset($options['with'])) $formData = '\''.$options['with'].'\'';

[JoeZ99]

16093

I'm working with the repository via svn:external.

http://svn.symfony-project.com/plugins/sfJqueryReloadedPlugi n/1.2/trunk

See it for yourself here:

http://svn.symfony-project.com/plugins/sfJqueryReloadedPlugi n/1.2/trunk/lib/helper/jQueryHelper.php

[_Andreas_]

Hi Simo,

guys, which version are you working with?

I've installed JqueryReloadedPlugin v 1.2.1 via PEAR and added the changes found in this thread manually.

@JoeZ99: Your suggestion for using raw_with sounds good, I'll try it out.

Thank you all
Andreas

[simo]

To keep the compatibility with the initial logic you should have a look on the first javascriptHelper based on scriptaculous ....

[JoeZ99]

???

Do you mean the "raw_data" ooption having a wild name? I just put it temporarily , in the expectation that the main developer of the plugin (who I assume is you) give us more specific instructions / recommendations / explanations.

[simo]

Hi JoeZ

I'm not the project leader. Fourat was the one. He left... I took his plugin and implemented some more methods but I don't have time to take the charge of maintenance....

It seems Boutell is involved (the only one to commit now ...) ... I don't know him. You can try to contact him
http://trac.symfony-project.org/browser/plugins/sfJqueryRelo adedPlugin/1.2/trunk/lib/helper/jQueryHelper.php

[JoeZ99]

right. I'll try to reach him then. I guess I could also replace the "with" option with the un-quoted one and commit it myself (I'm not sure if there is a permission issue on that, or is just a matter of "good behavior" with the "man in charge".

Now I only have to figure out how to write to this "boutell".

[simo]

> boutell : tom[__at__]punkave.com

[JoeZ99]

txs!!!

[JoeZ99]

Just for you to know.

Thanks to boutell, the issue with the "with" parameter is already fixed. quotes are removed, so now it works passing javascript evaluable strings and everybody happy!

[_Andreas_]

Just for you to know.

Thanks to boutell, the issue with the "with" parameter is already fixed. quotes are removed, so now it works passing javascript evaluable strings and everybody happy!

That is good to hear ~ ~

Unfortunately jq_draggable_element, jq_drop_receiving_element, jq_tabs, jq_input_auto_complete_tag and jq_observe_field are still missing in the newly commited version of sfJqueryReloadedPLugin.

Did you send a link to this thread to boutell?

It would be a pitty if the work of Simo, mcaleau and jjoaco would not be added to this great plugin!

Andreas

[_Andreas_]

Hello together,

I wrote a wrapper for jQuery-UI dialog today:

Code: Select all

/**
* wrapper for jquery dialog.
* @param string element id of dialog content element
* @param array options (bgiframe: true requires jQuery bgiframe plugin
* @param array optional element id to open the dialog if an user clicks on this element
*
* @return string jQuery dialog call
*
* Example:
* <div id="myDialog" title="My jQuery Dialog">I'm in the dialog</div>
* <span id="showMyDialog" style="text-decoration: underline; cursor: pointer;">Click me to open dialog</span>
* <?php echo jq_dialog('myDialog', array(
*      'autoOpen'  => 'false',
*       'modal'     => 'true',
*       'bgiframe'  => 'true',
*       'position'  => '\'center\'',
*       'resizable' => 'false',
*       'width'       => '640',
*       'maxWidth'  => '640',
*       'height'    => '480',
*       'maxHeight' => '480'
*     ),
*     'showMyDialog'
*   );
* ?>
*/
function jq_dialog($element_id, $options = array(), $open_element_id = '')
{
  $response = sfContext::getInstance()->getResponse();
  $response->addJavascript(sfConfig::get('sf_jquery_web_dir', '/sfJqueryReloadedPlugin/js/jquery-ui.min.js').'js/jquery-ui.min.js'); 
  $response->addStyleSheet(sfConfig::get('sf_jquery_web_dir', '/sfJqueryReloadedPlugin/css/jquery-ui.css').'css/jquery-ui.css');

  if (isset($options['bgiframe']))
  {
     $response->addJavascript(sfConfig::get('sf_jquery_web_dir', '/sfJqueryReloadedPlugin/js/jquery.bgiframe.min.js').'js/jquery.bgiframe.min.js'); 
  }
 
  $openDialog = (empty($open_element_id)) ? '' : "; $('#$open_element_id').click(function(){\$('#$element_id').dialog('open');})";
 
  return jq_javascript_tag("$(document).ready(function(){jQuery('#$element_id').dialog("._jq_options_for_javascript($options).")".$openDialog."});");
}

I found it usefull because otherwise you need to include the needed JavaScript and Stylesheets manually. I think the bgiframe-plugin could be loaded only if the browser is IE < Version 7, but as I'm not sure if there are other browsers with the very same select-box problem, I've choosen this way.

Greetings from Austria
Andreas

[JackJones]

Hi all..

I wrote the follow line:

Code: Select all

'success'  => "updateJSON(data,'abo_sub_contact_id');".jq_visual_effect('blind','abo_sub_contact_id'),

Firebug return me:
jQuery("abo_sub_contact_id").blind is not a function

and my used javascripts are:

Code: Select all

   public function getJavascripts()
   {
      return array(
         'jquery/jquery-1.3.2.min.js',
         'jquery/ui/js/jquery-ui-1.7.2.custom.min.js',
         '/sfFormExtraPlugin/js/jquery.autocompleter.js',
      );
   }

Do i have to download other javascript files?

[simo]

does it works with :

Code: Select all

'success'  => "updateJSON(data,'abo_sub_contact_id');".jq_visual_effect('highlight','abo_sub_contact_id'),

[JackJones]

Same error:

Code: Select all

jQuery("abo_sub_contact_id").highlight is not a function

[simo]

Well it seems not to be implemented...
http://svn.symfony-project.com/plugins/sfJqueryReloadedPlugi n/1.2/trunk/lib/helper/jQueryHelper.php

Try it out with fadeIn or slideUp for exemple

[JackJones]

Yes FadeIn will work.

I will create a ticket for this Feature Request.

Any idea, why this is not implementated?

[simo]

Yes FadeIn will work.

I will create a ticket for this Feature Request.

Any idea, why this is not implementated?

Why?? because someone as to do it .... And you can be the One!

http://docs.jquery.com/UI/Effects/Blind
It would not take longer than submiting a new ticket by the way

[JackJones]

Hey Simo, sorry :_)

Yeah, I'm not very familar with jQuery. But i will try it...

[simo]

Don't worry, I was joking. ~ ~

I mean, my reply is still valid but i'm not feeling offended as you suspected ~ ~

[JackJones]

no problem.

What you think, i have to download the JS-File from the jquery site with the hightlight effect implemented?

Or what i have to do. (just show me the right way)