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

Articles tagués ‘prototype’

Prototype: cacher les champs html d’une certaine class en javascript

Voici comment cacher des champs html en filtrant sur le nom de class en utilisant la librairie javascript prototype.

$A(document.getElementsByClassName('your_class_name')).each(
          function(Elem) {
              Elem.hide();
          }
);

équivalent de jquery $(document).ready() en prototype

Voici comment exécuter du code javascript uniquement lorsque la page web est complètement chargée.

version jquery:

$(document).ready(function() {
  // Handler for .ready() called.
});

Version Prototype:

Event.observe(window, 'load', function() {

});

cela évite beaucoup de problème notamment quand il y a de l’ajax en place sur la page

prototype: enable ou disable un élément de formulaire html à l’aide de ce framework javascript

voici comment activer (enable) ou désactiver (disable) un élément (input) de formulaire html avec le framework javascript prototype.

$('idDeMonElement').enable();
// or
$('idDeMonElement').disable();

ceci va griser ou non l’élément ciblé et le rendre inutilisable mais il sera toujours affiché.

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

prototype : requête ajax de type post avec paramètres

logo prototype javascript

Je suis actuellement amené à travailler sur l’outil MAGENTO.

ce dernier utilise la librairie javascript Prototype, il a donc fallu que j’étudie un peu la synthax de cette librairie javascript pour pouvoir éxécuter du code en AJAX.

Voici comment éxécuter une requete ajax de type POST incluant des paramètres.

var ptype = $('type').value;
var pvalue = $('input').value;
var min = $('type').value;
var max = $('type').value;

new Ajax.Request('verification.php, {
    method: post,
    parameters: value='+pvalue+'&type='+ptype+'&min='+pmin+'&max='+pmax,
    onSuccess:verification_php,
    onFailure:errFunc});

dans ce code, je vais donc viser la page verification.php et lui envoyer par la methode post les variables value , type,min et max que j’aurai pris soin de récupérer auparavant.

Suivre

Recevez les nouvelles publications par mail.

Rejoignez 295 autres abonnés