Symfony-IT » ajax http://www.symfony.it Just another Symfony Framework weblog Mon, 26 Jul 2010 09:23:28 +0000 en hourly 1 http://wordpress.org/?v=3.0 Javascript & Ajax? eval()! http://www.symfony.it/articoli/14/javascript-ajax-eval/ http://www.symfony.it/articoli/14/javascript-ajax-eval/#comments Fri, 10 Aug 2007 09:13:52 +0000 giorg http://www.symfony.it/articoli/14/javascript-ajax-eval/ Oggi dovevo eseguire del codice Javascript nel risultato di una chiamata ajax. La template è fatta circa così:

PLAIN TEXT
CODE:
  1. <?php echo __('Aggiungi prodotto') ?><input type="button" value="+" onclick="addprod()" />
  2. <?php echo javascript_tag("
  3.     function addprod() {
  4.         alert('ciao')
  5.     }
  6. ") ?>

Se chiamata "direttamente", questa template funziona è visualizzerà correttamente l'alert. Ciò non si verificherà invece se la template in questione è il risultato di una chiamata Ajax. Come spiega il buon Sergio Pereira, ciò dipende dal fatto che il codice Javascript nel risultato di una chiamata ajax viene valutato (tramite la funzione eval()) per cui la template deve essere riscritta nel seguente modo:

PLAIN TEXT
CODE:
  1. <?php echo __('Aggiungi prodotto') ?><input type="button" value="+" onclick="addprod()" />
  2. <?php echo javascript_tag("
  3.     addprod = function() {
  4.         alert('alora')
  5.     }
  6. ") ?>

in modo che la funzione venga creata.

]]> http://www.symfony.it/articoli/14/javascript-ajax-eval/feed/ 3 Albero ajax http://www.symfony.it/articoli/9/albero-ajax/ http://www.symfony.it/articoli/9/albero-ajax/#comments Thu, 19 Jul 2007 15:56:07 +0000 giorg http://www.symfony.it/articoli/9/albero-ajax/ Ho avuto il problema di creare un albero prendendo categorie e subcategorie dal database; il tutto con una certa user experience, per cui possibilmente ajax. Avevo provato il plugin sfgWidgetsPlugin ma non permette più di un innesto (manca qualcosa tipo evalScript: true nella chiamata ajax), per cui ho dovuto fare a mano.

A seguito la mia soluzione.

Prima di tutto nella mia action tiro fuori la prima serie di categorie:

PLAIN TEXT
CODE:
  1. private function getCategorie()
  2. {
  3. $c = new Criteria();
  4. $c->addAscendingOrderByColumn(CategoriePeer::CATEGORIE);
  5. $this->categorie = CategoriePeer::doSelect($c);
  6. $this->forward404Unless($this->categorie);
  7. }

Dopodichè, nella template, ciclo sulle tuple trovate:

PLAIN TEXT
CODE:
  1. <?php foreach ($categorie as $categoria): ?>
  2. <p class="categoria">
  3. <p class="catname_div">

Voglio mettere l'iconcina con il classico "+" nel caso ci sia almeno una sottocategoria, per cui:

PLAIN TEXT
CODE:
  1. <?php $c = new Criteria(); $c->add(SottocategoriePeer::RIF_CATEGORIE, $categoria->getIdCategorie(), Criteria::EQUAL); $sottocat_count = SottocategoriePeer::doCount($c); ?>
  2. <?php if ($sottocat_count> 0) echo image_tag('explode.gif', array('id' => 'img_'.$categoria->getIdCategorie())); ?>

Ora ci occorrerebbe il famoso helper link_to_remote per poter accedere alle sub-sub-categorie; però mi piacerebbe poter clikkare sul nome di una categoria sia per espandere l'albero che per chiuderlo. Per questo motivo la chiamata ajax deve essere condizionale con un ramo else, cosa non permessa dall'helper, per cui vado a mano:

PLAIN TEXT
CODE:
  1. <a href="#" onclick="if (document.getElementById('sottocat_<?php echo $categoria->getIdCategorie() ?>').innerHTML == '') {new Ajax.Updater('sottocat_<?php echo $categoria->getIdCategorie() ?>', 'categorie/trovasotto/id/<?php echo $categoria->getIdCategorie() ?>', {asynchronous:true, evalScripts:true, onComplete:function(request, json){document.getElementById('img_<?php echo $categoria->getIdCategorie() ?>').src='/images/implode.gif'; Element.hide('indicator');}, onLoading:function(request, json){Element.show('indicator')}}); return false;} else {document.getElementById('sottocat_<?php echo $categoria->getIdCategorie() ?>').innerHTML = ''; document.getElementById('img_<?php echo $categoria->getIdCategorie() ?>').src='/images/explode.gif'}">
  2. <?php echo $categoria->getCategorie() ?></a>

Non faccio altro che dire "se il div che riempio tramite la chiamata remota ha del contenuto (leggi: è espanso) allora setta il suo contenuto a vuoto e metti come iconcina di nuovo il "+" (leggi: chiudilo), altrimenti fai la chiamata remota e l'iconcina diventa un "-" (leggi: espandilo).

Infine la chiamata remota per poter aggiungere nuove sottocategorie ed i div necessari:

PLAIN TEXT
CODE:
  1. <div id="addsottocateg_div"><?php echo link_to_remote('+', array(
  2.                     'url' => 'categorie/aggiungiSotto?id='.$categoria->getIdCategorie(),
  3.                     'update' => 'acs_'.$categoria->getIdCategorie(),
  4.                     'script' => true,
  5.     )) ?>
  6.     </div>
  7.     <div class="acs" id="acs_<?php echo $categoria->getIdCategorie() ?>"></div>
  8.     <div class="sottocategoria_div" id="sottocat_<?php echo $categoria->getIdCategorie() ?>"></div>
  9. </div>
  10. <?php endforeach; ?>

Tutto questo non sarebbe stato necessario se il mitico sfgWidgetsPlugin avesse una opzione "scripts => true" per permettere l'evaluate di script anche nella destinazione.

]]> http://www.symfony.it/articoli/9/albero-ajax/feed/ 1