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

Articles tagués ‘requete post’

AJAX in MAGENTO Using PROTOTYPE : ou comment soumettre un formulaire de manière asynchrone dans Magento

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

Suivre

Recevez les nouvelles publications par mail.

Rejoignez 295 autres abonnés