live – devfrontend.info

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');

UPDATE : jquery-migrate – Migrate older jQuery code to jQuery 1.9+.

Sources : http://stackoverflow.com/questions/14354040/jquery-1-9-live-is-not-a-function | http://stackoverflow.com/questions/14703646/jquery-how-to-use-the-on-method-instead-of-live/14703668#14703668

A lire avant que vous n’entrepreniez un Rechercher et Remplacer automatique:

Pour une migration rapide sur un site en production, ne vous contentez pas d’un remplacement automatique du mot-clé live par on, car les paramètres des deux fonctions sont différents :

.live(events, function)

1	.live(events, function)

devrait devenir :

.on(eventType, selector, function)

1	.on(eventType, selector, function)

La présence du sélecteur est très importante! Si vous n’avez pas besoin de l’utiliser, déclarez le comme null.

Migration Example 1:

Avant :

$('#mainmenu a').live('click', function)

1	$('#mainmenu a').live('click', function)

Après, il faut déplacer l’élément enfant (a) sur le paramètre selector de la fonction .on() :

$('#mainmenu').on('click', 'a', function)

1	$('#mainmenu').on('click', 'a', function)

Migration Example 2:

Avant :

$('.myButton').live('click', function)

1	$('.myButton').live('click', function)

Après, il faut déplacer l’élément (.myButton) sur le paramètre selector de la fonction .on(), et cible l’élément parent le plus proche (de préférence un ID) :

$('#myMenu').on('click', '.myButton', function)

1	$('#myMenu').on('click', '.myButton', function)

Si vous ne savez pas quoi mettre comme élément parent, body fonctionne toujours :

$('body').on('click', '.myButton', function)

1	$('body').on('click', '.myButton', function)

Migration Example 3 :

Avant :

$("[data-role='page']").live('click',function(){
    $("#my").html(result);
});

$("[data-role='page']").live('click',function(){

$("#my").html(result);

});

Après :

$('body').on('click', "[data-role='page']", function(){
    $("#my").html(result);
});

$('body').on('click', "[data-role='page']", function(){

$("#my").html(result);

});

Articles récents

Catégories

Archives

Méta

Étiquette : live

[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

[JQuery] J’ai mis jQuery à jour et la fonction .live() ne fonctionne plus. Méthode de migration.

A lire avant que vous n’entrepreniez un Rechercher et Remplacer automatique:

Migration Example 1:

Migration Example 2:

Migration Example 3 :