Blog Symfony - Lexik Montpellier » Ajax http://www.lexik.fr/blog/symfony Blog sur le développement Web PHP Tue, 20 Jul 2010 08:35:36 +0000 en hourly 1 http://wordpress.org/?v=3.0 Liste d’objets ordonnable via AJAX partie 1 bis http://www.lexik.fr/blog/symfony/symfony/liste-d%e2%80%99objets-ordonnable-via-ajax-partie-1-bis-887 http://www.lexik.fr/blog/symfony/symfony/liste-d%e2%80%99objets-ordonnable-via-ajax-partie-1-bis-887#comments Tue, 18 Aug 2009 14:12:40 +0000 Nikaw http://www.lexik.fr/sfblog/?p=887 Ce post a pour but de reprendre la première version de la liste, en utilisant le plugin csDoctrineActAsSortablePlugin.
Ce plugin gère exactement la situation décrite dans la partie 1 en utilisant simplement un behavior dans le schema.

Voilà le lien du plugin : csDoctrineActAsSortablePlugin

Le readme est assez bien fait, cependant pour plus de clarté reprenons l’exemple précédent.

Dans un premier temps, révisons le schema.yml :
schema.yml

?View Code YAML
Item:
  actAs:
    Sortable: ~
  columns:
    name:
      type: string(255)

Le champs « rank » est remplacé par le behavior actAs: Sortable: ~

Il gère les ajout et les suppression, les surcharges des méthodes save() et delete() dans la classe Item.class.php ne sont plus utiles.

Il ajoute aussi des méthodes de tri, de classement, de positionnement etc. les méthodes déclarées dans la class ItemTable.class.php ne sont donc plus utiles non plus.

Nous allons voir maintenant à quel point le listing et les déplacements sont facilités grâce à ce plugin.
Commençons par les actions :
actions.class.php

?View Code PHP
public function executeIndex(sfWebRequest $request)
  {
    $this->items = Doctrine::getTable('Item')->findAllSorted('ASCENDING');
  }

La méthode findAllSorted() est fournie par le plugin et est associée à tout objet comportant le behavior actAs: Sortable dans le schéma.

La vue indexSuccess.php ne change pas.

En revanche, l’action déclenchée par le bouton oui :
actions.class.php:

?View Code PHP
public function executeOrder(sfWebRequest $request)
  {
    $this->elements = explode(",",$request->getParameter('elements'));
 
    Doctrine::getTable('Item')->sort($this->elements);
 
    $this->items = Doctrine::getTable('Item')->findAllSorted('ASCENDING');
    $this->setTemplate('index');
  }

Les changements sont Doctrine::getTable(‘Item’)->sort($this->elements);
Cette méthode est également liée au behavior actAs: Sortable, mais le plugin tel quel contient des erreurs.

Corrections des erreurs de la méthode sort() :
/plugins/csDoctrineActAsSortablePlugin/lib/template/Sortable.php, ligne 221

?View Code PHP
$connection->beginTransaction();

Là il manque juste la lettre « c ».

A la ligne 225 une variable $class est utilisée, mais elle n’est pas définie, ce qui génère une deuxième erreur.
Pour la corriger, il faut donc définir cette $class, qui est en fait une variable contenant la classe de l’objet à trier.
Ici il s’agirait de la classe « Item », mais soyons théorique : il faut se débrouiller pour récupérer la classe d’un objet quelconque.
Voici ma solution :
/plugins/csDoctrineActAsSortablePlugin/lib/template/Sortable.php, fonction sortTableProxy()

?View Code PHP
/**
   * Send an array from the sortable_element tag (symfony+prototype)and it will
   * update the sort order to match
   *
   * @param string $order
   * @return void
   * @author Travis Black
   */
  public function sortTableProxy($order)
  {
    /*
      TODO
        - Make this a transaction.
        - Add proper error messages.
    */
    //on récupère l'objet
    $object = $this->getInvoker();
    //on récupère la connection
    $connection = $object->getTable()->getConnection();
 
    $connection->beginTransaction();
 
    foreach ($order as $position => $id)
    {
      $newObject = $object->getTable()->findOneById($id);
 
      if ($newObject->get($this->_options['name']) != $position + 1)
      {
        $newObject->moveToPosition($position + 1);
      }
    }
 
    // Commit Transaction
    $connection->commit();
  }

Et voilà, la classe est corrigée, et l’action fonctionne à présent.

Les méthodes principales pour reclasser des éléments Sortable sont (comme indiquées dans le readme) :
pour les Record :
promote()
demote()
moveToFirst()
moveToLast()
moveToPosition($newPosition)

pour les Table :
sort($order)
findAllSorted($sortMode)
findAllSortedWithParent(…)

Voyons comment utiliser ces méthodes.
Mais d’abord, corrigeons encore quelques erreurs :
tout d’abord, le return de la méthode getFinalPosition() :

?View Code PHP
return (integer) $finalPosition;

Il faut faire un cast car cette méthode entraine une erreur de type.
Ensuite, dans la méthode moveToPosition() :

?View Code PHP
public function moveToPosition($newPosition)
  {
    if (!is_int($newPosition))
    {
      throw new Doctrine_Exception('moveToPosition requires an Integer as the new position. Entered ' . $newPosition);
    }
 
    $object = $this->getInvoker();
    $position = $object->get($this->_options['name']);
    $connection = $object->getTable()->getConnection();
 
    //begin Transaction
    $connection->beginTransaction();
 
    // Position is required to be unique. Blanks it out before it moves others up/down.
    $object->set($this->_options['name'], null);
    $object->save();
 
 
    if ($position > $newPosition)
    {
      $q = $object->getTable()->createQuery()
          ->update(get_class($object))
          ->set($this->_options['name'], $this->_options['name'].' + 1')
          ->where($this->_options['name'].' < ?',$position)
          ->andWhere($this->_options['name'].' >= ?',$newPosition)
          ->orderBy($this->_options['name'].' DESC');
 
      foreach ($this->_options['uniqueBy'] as $field)
      {
        $q->addWhere($field.' = '.$object[$field]);
      }
 
      $q->execute();
    }
    elseif ($position < $newPosition)
    {
      $q = $object->getTable()->createQuery()
          ->update(get_class($object))
          ->set($this->_options['name'], $this->_options['name'].' - 1')
          ->where($this->_options['name'].' > ?',$position)
          ->andWhere($this->_options['name'].' <= ?',$newPosition)
          ->orderBy($this->_options['name'].' ASC');
 
      foreach($this->_options['uniqueBy'] as $field)
      {
        $q->addWhere($field . ' = ' . $object[$field]);
      }
 
      $q->execute();
    }
 
    $object->set($this->_options['name'], $newPosition);
    $object->save();
 
    // Commit Transaction
    $connection->commit();
  }

Il manquait tout simplement le orderBy ASC dans le elseif, ce qui engendrait une erreur a cause du unique.

Maintenant que tout est juste, il ne reste plus qu’à créer une route et une action pour chaque méthode :
routing.yml

?View Code YAML
promote:
  url:        /promote/:id
  class:      sfDoctrineRoute
  params:     { module: item, action: promote }
  options:    { model: Item, type: object }
 
demote:
  url:        /demote/:id
  class:      sfDoctrineRoute
  params:     { module: item, action: demote }
  options:    { model: Item, type: object }
 
movetofirst:
  url:        /movetofirst/:id
  class:      sfDoctrineRoute
  params:     { module: item, action: moveToFirst }
  options:    { model: Item, type: object }
 
movetolast:
  url:        /movetolast/:id
  class:      sfDoctrineRoute
  params:     { module: item, action: moveToLast }
  options:    { model: Item, type: object }

actions.class.php

?View Code PHP
public function executePromote(sfWebRequest $request)
  {
    $this->item = $this->getRoute()->getObject();
    $this->item->promote();
    $this->items = $this->item->getTable()->findAllSorted('ASCENDING');
    $this->redirect('@homepage');
  }
 
  public function executeDemote(sfWebRequest $request)
  {
    $this->item = $this->getRoute()->getObject();
    $this->item->demote();
    $this->items = $this->item->getTable()->findAllSorted('ASCENDING');
    $this->redirect('@homepage');
  }
 
  public function executeMoveToFirst(sfWebRequest $request)
  {
    $this->item = $this->getRoute()->getObject();
    $this->item->moveToFirst();
    $this->items = $this->item->getTable()->findAllSorted('ASCENDING');
    $this->redirect('@homepage');
  }
 
  public function executeMoveToLast(sfWebRequest $request)
  {
    $this->item = $this->getRoute()->getObject();
    $this->item->moveToLast();
    $this->items = $this->item->getTable()->findAllSorted('ASCENDING');
    $this->redirect('@homepage');
  }
 
  public function executeOrder(sfWebRequest $request)
  {
    $this->elements = explode(",",$request->getParameter('elements'));
 
    Doctrine::getTable('Item')->sort($this->elements);
 
    $this->items = Doctrine::getTable('Item')->findAllSorted('ASCENDING');
    $this->redirect('@homepage');
  }

Et la vue qui correspond, avec les liens pour tester chaque méthode :
indexSuccess.php

?View Code PHP
<h1>Ordered list of items - AJAX enabled</h1>
<ul id="order">
  <?php foreach($items as $item): ?>
  <li id="<?php echo $item->getId() ?>">
      <?php echo $item->getName() ?> |
      <a href="<?php echo url_for('promote',$item) ?>">Promote</a> |
      <a href="<?php echo url_for('demote',$item) ?>">Demote</a> | 
      <a href="<?php echo url_for('movetofirst',$item) ?>">Move to first</a> |
      <a href="<?php echo url_for('movetolast',$item) ?>">Move to last</a> |
  </li>
  <?php endforeach ?>
</ul>
 
<input type="button" value="Enregistrer" onclick="submitOrder()"/>
<script type="text/javascript">
  $(function() {
    $("#order").sortable();
    $("#order").disableSelection();
  });
 
  function submitOrder()
  {
    var elements = "";
    var i=0;
    $('ul#order li').each(function()
    {
      elements += $(this).attr('id')+",";
      i++;
    })
//alert(elements.substr(0, elements.length-1));
$.post('<?php echo url_for('@order') ?>', { elements: elements.substr(0, elements.length-1) });
  }
</script>

Voilà donc tout ce qu’il faut pour utiliser basiquement ce plugin.

]]> http://www.lexik.fr/blog/symfony/symfony/liste-d%e2%80%99objets-ordonnable-via-ajax-partie-1-bis-887/feed 2 Du Javascript dynamique dans une vue en utilisant sf_format http://www.lexik.fr/blog/symfony/symfony/du-javascript-dynamique-dans-une-vue-en-utilisant-sf_format-746 http://www.lexik.fr/blog/symfony/symfony/du-javascript-dynamique-dans-une-vue-en-utilisant-sf_format-746#comments Wed, 08 Jul 2009 08:13:32 +0000 olivier http://www.lexik.fr/sfblog/?p=746 Il arrive que l’on ai besoin d’utiliser un script javascript spécifique dans une vue. Un script dynamique qui nécessite d’être renseigné par des informations de php (utiliser des variables ou des méthodes de nos objets).

Dans mon précédent post j’évoquais les différentes possibilités d’inclure le javascript dans les vues.

  • Mettre des balises <script> directement au milieu du html (un peu crade mais efficace)
  • Faire un fichier .js « en dur » dans le dossier /web/js (mais là on perd la possibilité d’utiliser du php)
  • Utiliser un slot dans le <head> du template
  • Utiliser une vue

C’est ce dernier point que je vous propose de voir aujourd’hui.

Pour se dessiner un petit background on va prendre l’exemple d’une vue index dans un module d’actualités.
Dans cette vue on veut faire un appel ajax sur un lien et on veut utiliser le routing pour définir l’url du script à appeler.

On va donc utiliser une action et deux vues, une pour la page html et une pour le javascript qui sera inclus dans la vue html. On utilise des sf_format différents.

On créé la route qui servira pour les deux vues (/app/frontend/config/routing.yml).

?View Code YML
...
actu_index:
  url:   /actualites/index.:sf_format
  param: { module: actu, action: index, sf_format: html }
...

Dans notre action on récupère juste les dernières actualités à afficher dans la page html (/app/frontend/modules/actu/actions/actions.class.php).

?View Code PHP
<?php
 
class actuActions extends sfActions
{
 
  public function executeIndex(sfWebRequest $request)
  {
    $this->actus = Doctrine::getTable('Actu')->getLast();
  }
 
}

La vue Html. C’est la que ca se passe ! On fais un use_javascript() auquel on passe le url_for() de la même vue en spécifiant juste le sf_format à ‘js’ (/app/frontend/modules/actu/templates/indexSuccess.php).

?View Code PHP
<?php use_javascript(url_for('@actu_index?sf_format=js')) ?>
<div class="liste_actus">
  <?php foreach($actus as $actu): ?>
    <div class="actu">
      <h3><?php echo $actu->getTitre() ?></h3>
      <p><?php echo $actu->getTexteCourt() ?></p>
      <div class="action"><?php echo link_to('Lire la suite', '@actu_detail') ?><div>
    </div>
  <?php endforeach; ?>
</div>

Et donc la vue js sera inclue par la vue html qui rajoute dans le head l’appel au fichier.

?View Code HTML
<script type="text/javascript" src="/actualites/index.js"></script>

Il ne reste plus qu’a faire la script javascript dans la vue /app/frontend/modules/actu/templates/indexSuccess.js.php ou on peut avoir accès à tous les éléments de symfony que l’on désire.

Par exemple là un peut appel ajax en jQuery ou je récupère l’url du script appelé grâce au routing.

?View Code JAVASCRIPT
jQuery(function() {
 
  $('div.action a').click(function(event) {
    event.preventDefault();
    $.post(
      '<?php echo url_for('@actu_detail') ?>',
      { url: $(this).attr('href') },
      {},
      'script'
    );
  });
 
});

Il se peut que dans la vue javascript on n’ait pas besoin d’exécuter toute l’action.
Par exemple ici, dans ma vue javascript, je n’ai pas besoin des dernières actualités, il est donc possible de filtrer pour alléger l’action grâce au sf_format.

?View Code PHP
<?php
 
class actuActions extends sfActions
{
 
  public function executeIndex(sfWebRequest $request)
  {
    if($request->getParameter('sf_format') != 'js')
    {
      $this->actus = Doctrine::getTable('Actu')->getLast();
    }
  }
 
}

Après, libre a chacun de voir si on doit utiliser la même action que la vue html ou si la vue javascript nécessite sa propre action.

En utilisant une action séparée pour la vue javascript on peut s’amuser à pousser le vice du camouflage en utilisant un routing qui fasse croire que l’on appelle un fichier .js (Attention si jamais un fichier avec le même nom existe réellement dans le répertoire /web/js c’est ce dernier qui sera inclus).

?View Code YML
...
actu_index_js:
  url:   /js/actu.:sf_format
  param: { module: actu, action: index, sf_format: js }
...

Avantage de cette technique :

  • Un code source html super « clean »

Inconvéniant :

  • Pour une page html, on fait deux appels à symfony.
    A utiliser avec parcimonie et bien optimiser les actions pour ne pas faire des requêtes inutiles sur la base de donnée.
]]> http://www.lexik.fr/blog/symfony/symfony/du-javascript-dynamique-dans-une-vue-en-utilisant-sf_format-746/feed 0 Listes déroulantes mises à jours en Ajax avec jQuery http://www.lexik.fr/blog/symfony/symfony/listes-deroulantes-mises-a-jours-en-ajax-avec-jquery-704 http://www.lexik.fr/blog/symfony/symfony/listes-deroulantes-mises-a-jours-en-ajax-avec-jquery-704#comments Wed, 17 Jun 2009 08:49:39 +0000 olivier http://www.lexik.fr/sfblog/?p=704 Un petit TIPS pour faire des listes déroulantes liées qui s’enrichissent en fonction de la valeur choisie sur l’une d’entre elles.
(J’ai l’impression que la phrase est très compliqué pour pas grand chose ^^)
Le tout en Ajax en utilisant jQuery.

Dans mon exemple, ça sera tout simplement un formulaire Lambda avec des listes déroulante pour les Régions et les Départements.
Le fonctionnement est le suivant. Par défaut les listes déroulantes sont initialisées avec toutes les valeurs. Dés que l’on choisi une valeur pour la région, la liste déroulante des département affine sa liste pour ne proposer que les départements de la région saisie.

Vite fait, le schéma utilisé :

?View Code YML
...
Region:
  tableName:  region
  actAs:
    Sluggable:
      unique: true
      fields: [nom]
  columns:
    id:       { type: integer(4), unsigned: true, primary: true, autoincrement: true }
    nom:      { type: string(255), notnull: true }
 
Departement:
  tableName: departement
  actAs:
    Sluggable:
      unique: true
      fields: [nom]
  columns:
    id:        { type: integer(4), unsigned: true, primary: true, autoincrement: true }
    nom:       { type: string(255), notnull: true }
    region_id: { type: integer(4), unsigned: true }
  relations:
    Region:
      local:        region_id
      foreign:      id
      foreignAlias: Departements
      onDelete:     CASCADE
...

Juste pour mettre en évidence la relation entre le Département et la Région, avec le très important le foreignAlias que j’aime tant :D

Pour faire fonctionner tout ça on va avoir besoin de :
– 1 route
– 1 action minuscule
– 1 partial de 4 lignes
– 1 tout petit bout de javascript

La route :

?View Code JAVASCRIPT
# routing.yml
...
ajax_departement:
  url:   /ajax/departement
  param: { module: lambda, action: ajaxDepartement }
...

L’action :

?View Code PHP
// actions.class.php
 
  /**
   * requete ajax pour avoir la liste des déparements de la région
   *
   * @param sfWebRequest $request
   */
  public function executeAjaxDepartement(sfWebRequest $request)
  {
    $region = Doctrine::getTable('Region')->findOneById($request->getParameter('region'));
    return $this->renderPartial('lambda/selectDepartement', array('region' => $region));
  }

Le partial :

?View Code PHP
// _selectDepartement.php
<option value=""></option>
<?php foreach($region->getDepartements() as $departement): ?>
<option value="<?php echo $departement->getId() ?>"><?php echo $departement->getNom() ?></option>
<?php endforeach; ?>

Et enfin le petit bout de code jQuery à rajouter au formulaire :

?View Code JAVASCRIPT
<script language="javascript">
$(document).ready(function(){
  $("#mon_formulaire_lambda_region_id").change( function() {
    $.post("/ajax/departement", { region: $(this).val() },
    function(data){
      $("#mon_formulaire_lambda_departement_id").html(data);
    });
  });
});
</script>

Pour le javascript plusieurs solutions. Soit l’inclure directement dans la vue avec les balises comme je l’ai fait ici.
Soit faire un fichier .js que l’on met dans /web/js/mon_fichier.js (bien mais pas top :P ).

Le plus « propre » est de faire une vue et d’utiliser le sf_format et d’inclure le fichier via une route.
On verra ça lors d’un prochain post ;)

@bientôt !

NB : Bien entendu il faut que jQuery soi inclus :
– Soit il est inclus dans le view.yml
– Soit directement dans la vue avec un use_javascript(‘jQuery.js’)

]]> http://www.lexik.fr/blog/symfony/symfony/listes-deroulantes-mises-a-jours-en-ajax-avec-jquery-704/feed 7