blog sur le développement web, jquery,css3, Magento, Symphony, php et bien d'autres choses

logo magento

Nous allons voir dans cet article comment soumettre un formulaire de manière asynchrone (AJAX) grace à prototype, la fameuse librairie javascript qu’utilise MAGENTO.

Le concept est simple:

on a un « formulaire » composé de trois champs et un bouton « sauver ».

on va récupérer les valeurs des input (champs text)  grace à javascript.

on va transmettre ces valeures à la fonction PHP en charge de les traiter et on va re afficher le tout.

<script src="<?php echo $this->getJsUrl() ?>mage/adminhtml/loader.js" type="text/javascript"></script>
 <script type="text/javascript" >

 function save()
 {
 var FORM_KEY = "<?php echo $this->getFormKey();?>";
 var reloadurl = '<?php echo $this->getUrl('mbf/index/save') ?>';

 var pnom = $('nom').value;
 var pprenom = $('prenom').value;
 var ptel = $('telephone').value;

 Element.show('loadingmask');
 new Ajax.Request(reloadurl, {
 method: 'post',
 parameters: {nom : pnom , prenom : pprenom , telephone : ptel , form_key: '<?php echo Mage::getSingleton('core/session')->getFormKey() ?>'},
 onComplete: function(transport) {

 Element.hide('loadingmask');
 $('output-div').innerHTML = "";
 $('output-div').innerHTML = transport.responseText;

 }
 });
 }
 </script>

ce code javascript récupère les valeures de mes champs .

reloadurl est la page php que l’on vise qui contient la fonction qui va traiter nos données.

getUrl(‘nomdurouteur/nomducontrolleur/nomdelaction’).
ensuite on précise la methode d’envoi, ici post puis on précise nos paramètres.

oncomplete contient tout ce qui sera exécuté des lors que la page de traitement aura répondu.

et un point très important, le paramètre

form_key: '<?php echo Mage::getSingleton('core/session')->getFormKey() ?>

sans ça magento ne pourra pas traiter notre requête.

 

pour que ce code javascript marche, il nous faut ajouter à notre bouton de formulaire « save » l’evenement  onclick= »save(); »

enfin il nosu faut rajouter la div  <div id= »output-div »></div> pour récupérer l’éventuel texte renvoyé par notre page de traitement PHP

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s