Archives par mot-clé : javascript

jConfirmAction: Quelques modifications

J’utilise pour un de mes projets le plugin jQuery jConfirmAction sous licence GPL version 2. J’y est effectué quelques modifications et les redistribuent donc sous cette même licence.

Le script, téléchargeable ici: jconfirmaction.jquery. Les différences avec le script de Hidayat Sagita sont les suivantes:

Exécution de fonctions

A l’origine le click sur « Oui » n’avait pour effet que de faire suivre le lien d’origine. L’ajout des trois paramètres « onYes », « onOpen » et « onClose » auxquels on transmet des fonctions nous permet de faire un peu plus de choses.

  • onYes est appelé lorsque le bouton « Oui » est cliqué.
  • onOpen est appelé lorsque la boite de confirmation apparaît.
  • onClose est appelé lorsque l’utilisateur

Ces fonctions reçoivent toujours comme argument le lien d’origine (sur lequel a été appliqué jConfirmAction).

$('a.remove').jConfirmAction({
  question : "Supprimer ?",
  yesAnswer : "Oui",
  cancelAnswer : "non",
  onYes: function(link){
    // [...]
    return false;
  },
  onOpen: function(link){
    // [...]
    return false;
  },
  onClose: function(link){
    // [...]
    return false;
  }
});

justOneAtTime

Le paramètre justOneAtTime (par défaut sur vrai) permet de détruire les autre boites de confirmations lorsqu’une s’ouvre. Cela permet donc simplement de d’en n’avoir qu’une a la fois.

Utilisation de ‘live’

J’ai préféré remplacer l’utilisation de bind par live. Décision prise par rapport a ce dont je parlais dans cet article.

Les modification apportés sont essentiellement pour rendre l’utilisation de ce plugin plus souple en particulier dans un contexte ou vous utilisez l’ajax.

Enjoy 😉

jQuery live, pensez-y si vous modifiez du contenu dom

En tant que développeur php je gère de temps en temps des projets web seul. C’est a dire que je suis contraint de m’occuper de la partie CSS et Javascript si il y a. Du coup j’utilise jQuery pour me simplifier la tache du Javascript.

Dans cet article une petite info qui peut vous donner un sérieux coups de main, enfin surtout un économie de temps de recherche quand à un problème que nous somme plusieurs a avoir rencontré.

Prenons par exemple le listener click. La ou ça coince (avec la méthodo ci-dessous), c’est que l’ajout du listener (click ou autre) porte sur le dom existant. Si l’on ajoute du dom il faut re-spécifier le listener sur le nouveau contenu.

Exemple:

<ul id="mylist">
  <li class="element"><a href="#">bla1</a></li>
  <li class="element"><a href="#">bla1</a></li>
</ul>

<script>
  $('a.clickme').click(function()
 {
   alert('hello');
 });
 $.getJSON('/url', function(response) {
    // Adding li to ul#mylist
    // ...
  });
</script>

Dans l’exemple ci-dessus on considère que l’appel ajax ajoute des éléments a la liste.

Après la modification du dom le listener ‘click’ n’écoutera pas les click sur les nouveaux a.clickme. Ce qui est en fait tout a fait logique puisque ces éléments n’existait pas lors de la mise en place de $(‘a.clickme’).click.
Pour cela il faut utiliser live car ce listener prendra en compte les nouveaux éléments du dom :

$('a.clickme').live("click", function(){
  alert('hello);
});