Étiquette : événement

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

01/02/2022 / admin

ATTENTION: la méthode décrite dans ce billet fonctionne très bien pour deux choses bien distinctes:

déléguer un événement à un élément du DOM créé dynamiquement
détecter l’événement click sur un SVG

Néanmoins, dans le 1er cas et pour des raisons de performance, il serait plutôt conseillé de se tourner vers une solution d’event bubbling.

Source: Detecting click events on SVGs with vanilla JS event delegation – Listening for clicks inside an element.

<div id="combinationSummaryList">
    <a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a>
    <a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a> <!-- la délégation d'événement sert pour cet élément -->
</div>

<a class="SelectionSummary-link">Lien présent dans le DOM au chargement de la page</a>

<a class="SelectionSummary-link">Lien ajouté dynamiquement dans le DOM par une action utilisateur</a>

</div>

const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {
    if ( !event.target.closest( '.SelectionSummary-link' ) ) return;
    event.preventDefault();
    // code à exécuter
}, false );

const $_COMBINATION_SUMMARY_LIST = document.getElementById( 'combinationSummaryList' );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {

if ( !event.target.closest( '.SelectionSummary-link' ) ) return;

event.preventDefault();

// code à exécuter

}, false );

Javascript dans le cas d’un SVG:

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {
    if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return;
        event.preventDefault();
        const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' );
}, false );

$_COMBINATION_SUMMARY_LIST.addEventListener('click',function( event ) {

if ( !event.target.closest( '.SelectionSummary-btnRemove' ) ) return;

event.preventDefault();

const $_REMOVE_BUTTON = event.target.closest( '.SelectionSummary-btnRemove' );

}, false );

[Magento 2] Mise à jour du prix final dans une fiche produit lorsqu’on vide dynamiquement via javascript une option sous forme de champ texte

29/06/2020 / admin

Je me suis retrouvé dans un cas extrêmement particulier dans lequel l’utilisateur pouvait, depuis une fiche produit, rajouter des options en cascade: il pouvait en premier lieu choisir une couleur de papier cadeau (+2,00 €).

Une fois le papier cadeau sélectionné (et seulement à cette condition), il pouvait choisir d’ajouter une étiquette avec un prénom (+0,50 €).

Ce champ étiquette était limité à 14 caractères. La fonctionnalité était gérée via un widget remaining-characters.js fourni dans Magento 2.

Problème: lorsque l’utilisateur avait renseigné choisi un papier cadeau et renseigné un prénom, le prix total s’incrémentait de la somme des deux options (+2,00 € +0,50 €). Mais lorsque l’utilisateur décidait finalement de ne pas prendre de papier cadeau en décochant l’option de couleur, seul le prix du papier se décrémentait (-2,00 €) et le prix total comprenait encore celui de l’option étiquette (+0,50 €).

Solution: le plug-in qui compte le nombre de caractères présents dans le champ écoute les événements change keyup paste:

_create: function () {
    [...]
    this.element.on('change keyup paste', this.updateCharacterCount.bind(this));
},

_create: function () {

[...]

this.element.on('change keyup paste', this.updateCharacterCount.bind(this));

Lorsqu’un utilisateur décoche l’option papier cadeau, on vide l'input text de l’option étiquette avec la méthode .val(''), mais de cette manière le plug-in qui écoute les événements change keyup paste n’a pas « capté » que le champ a été vidé et, de ce fait, ne remet pas le pric total à jour correctement.

Pour lui signifier que le champ a été vidé de manière dynamique, il faut chaîner notre déclaration avec la méthode .trigger() qui contient en argument l’événement change:

// Vider le champ Etiquette et reset le compteur de lettres
$('.input-text', $giftWrapSticker)
    .val('')
    .trigger('change');
$('.character-counter', $giftWrapSticker).addClass('no-display');

// Vider le champ Etiquette et reset le compteur de lettres

$('.input-text', $giftWrapSticker)

.val('')

.trigger('change');

$('.character-counter', $giftWrapSticker).addClass('no-display');

Le code complet pour gérer les deux options en cascade

La deuxième contrainte était de faire fonctionner des checkboxes un peu comme des boutons radio (un seul des x checkboxes devait pouvoir être sélectionné à la fois), mais de pouvoir n’en sélectionner aucune.

    <script>
        require([
            'jquery'
        ], function ($) {
            // option PAPIER CADEAU + ETIQUETTE

            const $giftWrapOptions = $('#giftWrapOptions'),
                  $giftWrapPrice   = $('#giftWrapPrice'),
                  $giftWrapSticker = $('#giftWrapSticker');

            // On récupère le prix de la 1ère option (ttes les options ont le même prix) pour l'afficher à côté du libellé
            let giftWrapOptionPrice = $('.field:first-of-type .price-wrapper', $giftWrapOptions).text();
            $giftWrapPrice.text(giftWrapOptionPrice);

            // Au clic sur l'une des options
            $('input[type="checkbox"]', $giftWrapOptions).on('click', function(event){
                let $this = $(this);

                // S'assurer que seule UNE option (ou aucune) est sélectionnée
                if($this.hasClass('is-current-choice')){
                    $this.removeClass('is-current-choice');
                } else {
                    $giftWrapOptions
                        .find('.is-current-choice')
                        .click()
                        .removeClass('is-current-choice');
                    $this.addClass('is-current-choice');
                }

                // Afficher/masquer le champ Etiquette
                if($('input[type="checkbox"]', $giftWrapOptions).is(':checked')){
                    $giftWrapSticker.removeClass('is-hidden');
                } else {
                    $giftWrapSticker.addClass('is-hidden');
                    // Vider le champ Etiquette et reset le compteur de lettres
                    $('.input-text', $giftWrapSticker)
                        .val('')
                        .trigger('change');
                    $('.character-counter', $giftWrapSticker).addClass('no-display');
                }
            });
        });
    </script>

require([

'jquery'

], function ($) {

// option PAPIER CADEAU + ETIQUETTE

const $giftWrapOptions = $('#giftWrapOptions'),

$giftWrapPrice = $('#giftWrapPrice'),

$giftWrapSticker = $('#giftWrapSticker');

// On récupère le prix de la 1ère option (ttes les options ont le même prix) pour l'afficher à côté du libellé

let giftWrapOptionPrice = $('.field:first-of-type .price-wrapper', $giftWrapOptions).text();

$giftWrapPrice.text(giftWrapOptionPrice);

// Au clic sur l'une des options

$('input[type="checkbox"]', $giftWrapOptions).on('click', function(event){

let $this = $(this);

// S'assurer que seule UNE option (ou aucune) est sélectionnée

if($this.hasClass('is-current-choice')){

$this.removeClass('is-current-choice');

} else {

$giftWrapOptions

.find('.is-current-choice')

.click()

.removeClass('is-current-choice');

$this.addClass('is-current-choice');

}

// Afficher/masquer le champ Etiquette

if($('input[type="checkbox"]', $giftWrapOptions).is(':checked')){

$giftWrapSticker.removeClass('is-hidden');

} else {

$giftWrapSticker.addClass('is-hidden');

// Vider le champ Etiquette et reset le compteur de lettres

$('.input-text', $giftWrapSticker)

.val('')

.trigger('change');

$('.character-counter', $giftWrapSticker).addClass('no-display');

}

});

</script>

[jQuery] Vérifier en cours de saisie en live si un input[type= »text »] contient du contenu avec l’événement Input et la méthode Val

24/04/2018 / admin

Dans l’exemple qui suit, on procède à cette vérification pour désactiver une fonctionnalité de Collapse (Bootstrap) des champs de formulaires si du texte est saisi.

    <div class="form-group address-extra-info-trigger">
        <span class="control-label">
            <spring:theme code="address.line2"/>
        </span>
        <button id="triggerBillingAddressExtraInfo" class="btn-naked" type="button" data-toggle="collapse" data-target="#collapseBillingAddressExtraInfo" aria-expanded="false" aria-controls="collapseBillingAddressExtraInfo">
            <span class="show-extra-fields">
                <i class="glyphicon glyphicon-chevron-down"></i> <spring:theme code="naos.show"/></span>
            <span class="hide-extra-fields">
                <i class="glyphicon glyphicon-chevron-up"></i> <spring:theme code="naos.hide"/></span>
        </button>
    </div>

    <div class="collapse address-extra-info-fields" id="collapseBillingAddressExtraInfo">
        <input type="text" id="one" />
        <input type="text" id="two" />
        <input type="text" id="three" />
        [...]
    </div>

<spring:theme code="address.line2"/>

</span>

</button>

</div>

[...]

</div>

Si un seul champ à vérifier:

Si le champ qui a le focus n’est pas vide, on agit sur #triggerBillingAddressExtraInfo en ajoutant un style inline pointer-events: none; (qui désactive la possibilité de cliquer sur l’élément).

    $('input').on('input', function(e){
        var toto = $(this).val();
        console.log(toto);

        if(!toto == ''){
            $('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');
        }
        else{
            $('#triggerBillingAddressExtraInfo').removeAttr('style');
        }
    });

$('input').on('input', function(e){

var toto = $(this).val();

console.log(toto);

if(!toto == ''){

$('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');

}

else{

$('#triggerBillingAddressExtraInfo').removeAttr('style');

}

});

Si plusieurs champs à vérifier:

Sources: jQuery check if any text input has value et Detect changed input text box.

On ajoute la condition: si tous les champs au sein de #collapseBillingAddressExtraInfo sont vides, on retire le style inline pointer-events: none;.

    function hasValue(elem) {
        return $(elem).filter(function() { return $(this).val(); }).length > 0;
    }

    $('input', '#collapseBillingAddressExtraInfo').on('input', function(e){
        var toto = $(this).val();
        var titi = hasValue('#collapseBillingAddressExtraInfo input');
        // console.log(toto);
        // console.log(titi);

        if(!toto == ''){
            $('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');
        }
        else if(!titi == true) {
            $('#triggerBillingAddressExtraInfo').removeAttr('style');
        }
    });

function hasValue(elem) {

return $(elem).filter(function() { return $(this).val(); }).length > 0;

}

$('input', '#collapseBillingAddressExtraInfo').on('input', function(e){

var toto = $(this).val();

var titi = hasValue('#collapseBillingAddressExtraInfo input');

// console.log(toto);

// console.log(titi);

if(!toto == ''){

$('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');

}

else if(!titi == true) {

$('#triggerBillingAddressExtraInfo').removeAttr('style');

}

});

Mieux, avec deux fonctions

    function hasValue(elem) {
        return $(elem).filter(function() { return $(this).val(); }).length > 0;
    }

    function deactivateCollapse(collapseElement, triggerElement){
        $('input', collapseElement).on('input', function(e){
            var focusedInputValue = $(this).val();
            var inScopeInputsValues = hasValue(collapseElement+' input');

            if(!focusedInputValue == ''){
                $(triggerElement).css('pointer-events', 'none');
            }
            else if(!inScopeInputsValues == true) {
                $(triggerElement).removeAttr('style');
            }
        });
    }

    deactivateCollapse('#collapseBillingAddressExtraInfo', '#triggerBillingAddressExtraInfo');
    deactivateCollapse('#collapseDeliveryAddressExtraInfo', '#triggerDeliveryAddressExtraInfo');

function hasValue(elem) {

return $(elem).filter(function() { return $(this).val(); }).length > 0;

}

function deactivateCollapse(collapseElement, triggerElement){

$('input', collapseElement).on('input', function(e){

var focusedInputValue = $(this).val();

var inScopeInputsValues = hasValue(collapseElement+' input');

if(!focusedInputValue == ''){

$(triggerElement).css('pointer-events', 'none');

}

else if(!inScopeInputsValues == true) {

$(triggerElement).removeAttr('style');

}

});

}

deactivateCollapse('#collapseBillingAddressExtraInfo', '#triggerBillingAddressExtraInfo');

deactivateCollapse('#collapseDeliveryAddressExtraInfo', '#triggerDeliveryAddressExtraInfo');

Articles récents

Catégories

Archives

Méta

Étiquette : événement

[JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)

Javascript dans le cas d’un SVG:

[Magento 2] Mise à jour du prix final dans une fiche produit lorsqu’on vide dynamiquement via javascript une option sous forme de champ texte

Le code complet pour gérer les deux options en cascade

[jQuery] Vérifier en cours de saisie en live si un input[type= »text »] contient du contenu avec l’événement Input et la méthode Val

Si un seul champ à vérifier:

Si plusieurs champs à vérifier:

Mieux, avec deux fonctions