Comment intégrer un plugin jQuery dans un projet Symfony 1.2 ?

La réponse à cette question ne pouvant pas tenir dans le modeste blog de Lexik.fr, je vais seulement vous expliquer comment intégrer la modification d’un champ “INPUT” en ajax dans un formulaire Symfony 1.2, à l’aide du plugin jQuery JEditable.

A ce stade, je vous recommande ce lien : JEditable

Pré-requis

• Comme d’habitude, l’éternel plugin : sfFormExtraPlugin
• Les JS :
  • jquery-1.3.2.min.js
  • jquery.jeditable.js

Le widget

Chemin :
[votre_projet]/plugins/sfFormExtraPlugin/lib/widget/sfWidgetFormInputEditInPlace.class.php

Code source :

object = $object;
    $this->route = $route;
  }
  public function configure($options = array(), $messages = array())
  {
    parent::configure($options, $messages);
  }
  public function render($name, $value = null, $attributes = array(), $errors = array())
  {    
    $prefix = $this->generateId($name);    
    return sprintf(<<%s

EOF
    , $prefix, $value,
      $prefix,
      url_for($this->route, $this->object, array('absolute'=>true))
   );
  }
}

Pour ce widget, j’ai créer 2 attributs.

• object
  Cet attribut contient l’objet de la route objet Symfony.

   public $object;
  

• route
  Cet attribut contient le nom de la route objet Symfony.

   public $route;
  

Ces attributs nous permettent de générer l’URL de la page qui va valider et éventuellement sauvegarder les données postées par le widget JQuery.

url_for($this->route, $this->object, array('absolute'=>true))

Maintenant que l’outil est créé, utilisons le !
Toute la suite de l’article n’est qu’un exemple d’utilisation.

Schéma

Person:
  columns:
    firstname:
      type: string(255)
    lastname:
      type: string(255)
    email:
      type: string(255)

Routing

• show_person
  La route du formulaire.
• save_person_eip
  Route de l’action “executeSaveEIP” qui valide et sauve les champs du modèle “Person”

# Route du formulaire
show_person:
  url:     /person/show/:id
  class:   sfDoctrineRoute
  options: { model: Person, type: object }
  param:   { module: person, action: show }

# Route de la page sauvant les données postées en ajax
save_person_eip:
  url:     /person/saveEIP/:id
  class:   sfDoctrineRoute
  options: { model: Person, type: object }
  param:   { module: person, action: saveEIP }
  requirements:
    id: d+
    sf_method: [post]

Actions

// L'action pour le formulaire de base
public function executeShow(sfWebRequest $request)
{
  $this->person = $this->getRoute()->getObject();
  $this->form = new PersonForm($this->person);
}

// L'action qui traite le post en ajax
public function executeSaveEIP(sfWebRequest $request)
{
  // Récupération de l'objet de la route
  $this->person = $this->getRoute()->getObject();
  
  // Récupération des données postées par le widget JQuery
  $id = $request->getParameter('ajaxfield_id');
  $this->value = $request->getParameter('value');
  
  // Récupération du nom du champ
  if(ereg("person_(.*)$", $id, $key))
  {
    $champ = $key[1]; 
  }

  // Instanciation d'un formulaire lié à notre objet
  $form = new PersonForm();
  
  // Récupération du validateur du champ
  $validator = $form->getValidator($champ);

  // On tente de valider le champ
  try
  {
    $cleaned = $validator->clean($this->value);
    $this->person->set($champ, $this->value);
    $this->joueur->save();
  }
  catch(sfValidatorError $e)
  {
     // Erreur lors de la validation du champ 
     // La valeur à afficher dans le template doit être la valeur actuelle de l'objet
     $this->value = $this->person->get($champ);
  }
}

Templates

• showSuccess.php

  Edition d'une personne
  
  render();?>
  render();?>
  render();?>
  

• saveEIPSuccess.php

Formulaire

• On construit chacun des widgets avec l’objet et le nom de la route.
• On définit les validators.

  public function configure()
  {
    // Widgets
    $this->widgetSchema['firstname'] = new sfWidgetFormEditInPlace(array(), array(), $this->getObject(), 'save_joueur_eip');
    $this->widgetSchema['lastname'] = new sfWidgetFormEditInPlace(array(), array(), $this->getObject(), 'save_joueur_eip');
    $this->widgetSchema['email'] = new sfWidgetFormEditInPlace(array(), array(), $this->getObject(), 'save_joueur_eip');

    // Validators
    $this->validatorSchema['firstname'] = new sfValidatorString();
    $this->validatorSchema['lastname'] = new sfValidatorString();
    $this->validatorSchema['email'] = new sfValidatorEmail();  
  }

View.yml