Mois : avril 2019

[Javascript] Supprimer les entrées dupliquées d’un tableau clé/valeur

26/04/2019 / admin

Source: Removing elements from an array of objects based on duplicate values of multiple keys

    var arr = [
        { type_id: "3", full_empty:"true", quantity:1},
        { type_id: "3", full_empty:"true", quantity:1},
        { type_id: "9", full_empty:"true", quantity:4},
        { type_id: "9", full_empty:"false", quantity:4},
        { type_id: "9", full_empty:"true", quantity:4},
        { type_id: "9", full_empty:"true", quantity:4},
        { type_id: "9", full_empty:"true", quantity:4}
    ];

    var a = arr.reduce(function (accumulator, current) {
      if (checkIfAlreadyExist(current)) {
        return accumulator
      } else {
        return accumulator.concat([current]);
      }
      
      function checkIfAlreadyExist(currentVal) {
        return accumulator.some(function(item){
          return (item.type_id === currentVal.type_id &&
                  item.full_empty === currentVal.full_empty);
        });
      }
    }, []);
        
    console.log(a);

var arr = [

{ type_id: "3", full_empty:"true", quantity:1},

{ type_id: "9", full_empty:"true", quantity:4},

{ type_id: "9", full_empty:"false", quantity:4},

{ type_id: "9", full_empty:"true", quantity:4},

{ type_id: "9", full_empty:"true", quantity:4}

];

var a = arr.reduce(function (accumulator, current) {

if (checkIfAlreadyExist(current)) {

return accumulator

} else {

return accumulator.concat([current]);

}

function checkIfAlreadyExist(currentVal) {

return accumulator.some(function(item){

return (item.type_id === currentVal.type_id &&

item.full_empty === currentVal.full_empty);

});

}

}, []);

console.log(a);

[jQuery] Vider des champs de formulaire de manière dynamique

15/04/2019 / admin

Dans cet exemple, on vide tous les champs de formulaire enfant de l’élément qui a la classe .form-group.hidden

  $.fn.clearHiddenControls = function(){
    // https://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery/16105303
    $('.form-group.hidden', $_USER_ASSISTANCE_FORM).each(function(){
      const $_THIS = $(this);
      $_THIS.find('input[type="radio"], input[type="checkbox"]').prop('checked', false);
      $_THIS.find('option').prop('selected', false);
      $_THIS.find('input[type="file"], textarea').val('');
    });    
  }

$.fn.clearHiddenControls = function(){

// https://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery/16105303

$('.form-group.hidden', $_USER_ASSISTANCE_FORM).each(function(){

const $_THIS = $(this);

$_THIS.find('input[type="radio"], input[type="checkbox"]').prop('checked', false);

$_THIS.find('option').prop('selected', false);

$_THIS.find('input[type="file"], textarea').val('');

});

}

$(document).clearHiddenControls();

1	$(document).clearHiddenControls();

[jQuery] Des plugins pour gérer des actions conditionnelles (notamment afficher/masquer des champs de formulaire)

15/04/2019 / admin

conditionize2.js

A flexible jQuery plugin for conditional actions (like showing and hiding elements, triggering events or whatever else you need) based on values of one or many fields. This is an improved version of conditionize.js jQuery plugin. Unlike the previous version, conditionize2.js is not restricted to only show and hide actions. But for simpler migration from conditionize.js to conditionize2.js, show/hide is the default behaviour.

A lot of EXAMPLES available here.

dependsOn

A jQuery plugin to facilitate the handling of form field dependencies. Demo.

[Change 3.6.x] Un modèle pour créer des formulaires spés

12/04/2019 / admin

<script change:javascript="head 'modules.form.lib.js.form'"></script>
<script change:javascript="head 'modules.website.lib.js.form-validation'"></script>
<script type="text/javascript" tal:condition="php: count(jQueryConditionalElement) GT 0">
	jQuery(document).ready(function() {
		<tal:block tal:repeat="jQuery jQueryConditionalElement" tal:content="jQuery" />
		// conditionalForm.handleCheckboxBoolean('groupe7026567', '7026573', "true");
	});
</script>
<script type="text/javascript">
	if (form_Validation instanceof Array) {
		form_Validation.push({id: "form_<form_id>_${configuration/getBlockId}", rules: ${form/getValidationRulesJSON}});
	}
</script>

<form method="post" action="#form_<form_id>_anchor" id="form_<form_id>_${configuration/getBlockId}" class="cmxform" enctype="multipart/form-data" novalidate="novalidate">

		<!--
			 NOTE: 
			 La classe '.isNode' se place sur un '.form-group' dont le champ 
			 (booléen ou <select>) est amené à est amené à diriger l'utilisateur vers différentes directions selon l'option choisie.
			 Elle symbolise le point de départ à partir duquel plusieurs chemins vont être possibles dans le formulaire.
		-->

		<!-- input type="text" -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<div id="field<field_id>" class="">
				<label for="field_<field_id>" class="control-label required"></label>
				<input type="text" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" />
				<p class="help-block"></p>
			</div>
		</div> -->

		<!-- input type="radio" -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<p class="">Votre demande concerne:</p>
			<div id="field<field_id>" class="">
				<label class="" id="field_<field_id>_<incrementing_val>">
					<input name="formParam[f<field_id>]" type="radio" value="<incrementing_val>" />
					_label_text_here_
				</label>
			</div>
			<p class="help-block"></p>
		</div> -->

		<!-- input type="file" -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<div id="field<field_id>" class="">
				<label for="field_<field_id>" class="control-label required"></label>
				<input type="file" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" />
				<p class="help-block"></p>
			</div>
		</div> -->

		<!-- select -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<div id="field<field_id>" class="">
				<label for="field_<field_id>" class="control-label required"></label>
				<select class="form-control" name="formParam[recipientGroups]" id="field_<field_id>">
					<option selected="selected" value="<field_id>_default">Sélectionner...</option>
					<option value="<field_id>_<incrementing_val>"></option>
					<option value="<field_id>_<incrementing_val>"></option>
				</select>
				<p class="help-block"></p>
			</div>
		</div> -->

		<!-- textarea -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<div id="field<field_id>" class="">
				<label for="field_<field_id>" class="control-label required"></label>
				<textarea class="form-control" name="formParam[message]" id="field_<field_id>" cols="50" rows="10" />
				<p class="help-block"></p>
			</div>
		</div> -->

		<!-- Boutons -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<input type="reset" class="btn btn-plus btn-poubelle" value="Annuler" />
			<input type="submit" class="btn btn-plus btn-commande" name="formParam[submit_<form_id>_<block_id>]" id="submit_<form_id>_<block_id>" value="Envoyer" />
		</div> -->
</form>

jQuery(document).ready(function() {

<tal:block tal:repeat="jQuery jQueryConditionalElement" tal:content="jQuery" />

// conditionalForm.handleCheckboxBoolean('groupe7026567', '7026573', "true");

});

</script>

if (form_Validation instanceof Array) {

form_Validation.push({id: "form_<form_id>_${configuration/getBlockId}", rules: ${form/getValidationRulesJSON}});

}

</script>

<form method="post" action="#form_<form_id>_anchor" id="form_<form_id>_${configuration/getBlockId}" class="cmxform" enctype="multipart/form-data" novalidate="novalidate">

<!--

NOTE:

La classe '.isNode' se place sur un '.form-group' dont le champ

(booléen ou <select>) est amené à est amené à diriger l'utilisateur vers différentes directions selon l'option choisie.

Elle symbolise le point de départ à partir duquel plusieurs chemins vont être possibles dans le formulaire.

-->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<div id="field<field_id>" class="">

<label for="field_<field_id>" class="control-label required"></label>

<input type="text" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" />

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<p class="">Votre demande concerne:</p>

<div id="field<field_id>" class="">

<input name="formParam[f<field_id>]" type="radio" value="<incrementing_val>" />

_label_text_here_

</label>

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<div id="field<field_id>" class="">

<label for="field_<field_id>" class="control-label required"></label>

<input type="file" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" />

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<div id="field<field_id>" class="">

<label for="field_<field_id>" class="control-label required"></label>

<option selected="selected" value="<field_id>_default">Sélectionner...</option>

</select>

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<div id="field<field_id>" class="">

<label for="field_<field_id>" class="control-label required"></label>

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<input type="submit" class="btn btn-plus btn-commande" name="formParam[submit_<form_id>_<block_id>]" id="submit_<form_id>_<block_id>" value="Envoyer" />

</div> -->

</form>

form.js

var conditionalForm =
{
	// hide zone
	clearZone : function(zone, fieldid)
	{
		// remove .inPath class starting from closest .form-group.isNode
		// (aka "clean path")
		jQuery('#groupe'+fieldid+'.form-group.isNode')
			.nextAll()
			.removeClass('inPath')
			.hide();

		// hide selected zone
		jQuery('div#' + zone).each(function()
		{
			// hide sub zone that should be hidden
			jQuery(this).find('li.toHide').each(function()
			{
				jQuery(this).hide('normal');
			});
			jQuery(this).hide('normal');
		});


		// reset text inputs and selects, except radio and checkbox buttons
		jQuery('div#' + zone + ' :input').each(function()
		{
			jQuery(this).not(':radio, :checkbox').val('');
			jQuery(this).removeAttr('checked').removeAttr('selected');
		});
	},
	// manage fields controled by boolean checkbox inputs
	handleCheckboxBoolean : function(zone, fieldid, activationvalue)
	{
		jQuery('div#' + zone).css('display','none');
		jQuery('div#field' + fieldid + ' :checkbox').bind('click change', function()
		{
			if (jQuery(this).is(':checked') && jQuery(this).val() == activationvalue)
			{
				jQuery('div#' + zone).addClass('inPath').show('normal');
			}
			else
			{
				conditionalForm.clearZone(zone, fieldid);
			}
		}).change();
	},
	// manage fields controled by checkbox inputs
	handleCheckbox : function(zone, fieldid, activationvalue)
	{
		jQuery('div#' + zone).css('display','none');
		jQuery('label#' + fieldid + ' :checkbox').bind('click change', function()
		{
			if(jQuery(this).is(':checked'))
			{
				jQuery('div#' + zone).addClass('inPath').show('normal');
			}
			else
			{
				conditionalForm.clearZone(zone, fieldid);
			}
		}).change();
	},
	// manage fields controled by list
	handleList : function(zone, fieldid, activationvalue)
	{
		jQuery('div#' + zone).css('display', 'none');
		jQuery('select#' + fieldid).change(function ()
		{
			jQuery('select#' + fieldid + ' option:selected').each(function()
			{
				if (jQuery(this).val() == activationvalue)
				{
					jQuery('div#' + zone).addClass('inPath').show('normal');
				}
				else
				{
					conditionalForm.clearZone(zone, fieldid);
				}
	        });
		}).change();
	},
	// manage fields controled by radio inputs
	handleRadio : function(zone, fieldid, activationvalue)
	{
		jQuery('div#' + zone).css('display', 'none');
		jQuery('div#field' + fieldid + ' :radio').bind('click change', function()
		{
			if (jQuery(this).is(':checked'))
			{
				if(jQuery(this).val() == activationvalue)
				{
					jQuery('div#' + zone).addClass('inPath').show('normal');
				}
				else
				{
					conditionalForm.clearZone(zone, fieldid);
				}
			}
		}).change();
	}
};

var CAPTCHA =
{
	reload : function(input, url)
	{
		input.setAttribute('src', this.buildCaptchaImageURL(url))
	},
	buildCaptchaImageURL : function(url)
	{
		return url.replace(new RegExp('amp;', 'g'), '') + '&rnd=' + Math.random();
	}
};

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

var conditionalForm =

{

// hide zone

clearZone : function(zone, fieldid)

{

// remove .inPath class starting from closest .form-group.isNode

// (aka "clean path")

jQuery('#groupe'+fieldid+'.form-group.isNode')

.nextAll()

.removeClass('inPath')

.hide();

// hide selected zone

jQuery('div#' + zone).each(function()

{

// hide sub zone that should be hidden

jQuery(this).find('li.toHide').each(function()

{

jQuery(this).hide('normal');

});

jQuery(this).hide('normal');

});

// reset text inputs and selects, except radio and checkbox buttons

jQuery('div#' + zone + ' :input').each(function()

{

jQuery(this).not(':radio, :checkbox').val('');

jQuery(this).removeAttr('checked').removeAttr('selected');

});

// manage fields controled by boolean checkbox inputs

handleCheckboxBoolean : function(zone, fieldid, activationvalue)

{

jQuery('div#' + zone).css('display','none');

jQuery('div#field' + fieldid + ' :checkbox').bind('click change', function()

{

if (jQuery(this).is(':checked') && jQuery(this).val() == activationvalue)

{

jQuery('div#' + zone).addClass('inPath').show('normal');

}

else

{

conditionalForm.clearZone(zone, fieldid);

}

}).change();

// manage fields controled by checkbox inputs

handleCheckbox : function(zone, fieldid, activationvalue)

{

jQuery('div#' + zone).css('display','none');

jQuery('label#' + fieldid + ' :checkbox').bind('click change', function()

{

if(jQuery(this).is(':checked'))

{

jQuery('div#' + zone).addClass('inPath').show('normal');

}

else

{

conditionalForm.clearZone(zone, fieldid);

}

}).change();

// manage fields controled by list

handleList : function(zone, fieldid, activationvalue)

{

jQuery('div#' + zone).css('display', 'none');

jQuery('select#' + fieldid).change(function ()

{

jQuery('select#' + fieldid + ' option:selected').each(function()

{

if (jQuery(this).val() == activationvalue)

{

jQuery('div#' + zone).addClass('inPath').show('normal');

}

else

{

conditionalForm.clearZone(zone, fieldid);

}

});

}).change();

// manage fields controled by radio inputs

handleRadio : function(zone, fieldid, activationvalue)

{

jQuery('div#' + zone).css('display', 'none');

jQuery('div#field' + fieldid + ' :radio').bind('click change', function()

{

if (jQuery(this).is(':checked'))

{

if(jQuery(this).val() == activationvalue)

{

jQuery('div#' + zone).addClass('inPath').show('normal');

}

else

{

conditionalForm.clearZone(zone, fieldid);

}

}).change();

}

};

var CAPTCHA =

{

reload : function(input, url)

{

input.setAttribute('src', this.buildCaptchaImageURL(url))

buildCaptchaImageURL : function(url)

{

return url.replace(new RegExp('amp;', 'g'), '') + '&rnd=' + Math.random();

}

};

[jQuery] Vérifier si au moins une checkbox est cochée

09/04/2019 / admin

Source: jQuery see if any or no checkboxes are selected

  // jQuery see if any or no checkboxes are selected
  // https://stackoverflow.com/a/4087006
  $.fn.areAnyCheckboxesChecked = function(HTMLScope){
    // Retourne true/false
    return !!$('input[type=checkbox]:checked', HTMLScope).length;

    // Retourne le nombre de checkboxes qui sont checked (0 si aucune)
    return $('input[type=checkbox]:checked', HTMLScope).length;
  }

// jQuery see if any or no checkboxes are selected

// https://stackoverflow.com/a/4087006

$.fn.areAnyCheckboxesChecked = function(HTMLScope){

// Retourne true/false

return !!$('input[type=checkbox]:checked', HTMLScope).length;

// Retourne le nombre de checkboxes qui sont checked (0 si aucune)

return $('input[type=checkbox]:checked', HTMLScope).length;

}

[jQuery] Cliquer sur une zone contenant un input type radio ou checkbox actionne le booléen

08/04/2019 / admin

Ressources en ligne: Setting “checked” for a checkbox with jQuery?

<td class="col-damaged col-boolean" onClick="$(this).booleanIntent(event);">
  <input type="checkbox" id="product_00001_damaged" name="product_00001" />
</td>

</td>

ATTENTION: l’utilisation de $(this) dans la fonction pour récupérer l’élément cliqué empêche le clic sur l’élément <input type="checkbox" /> lui-même! On préférera utiliser event.target pour cibler l’élément cliqué.

Code non commenté

  $.fn.booleanIntent = function(event){
    const $_TARGET = $(event.target);

    if ( $_TARGET.is('input') ) {
      return false;
    } else {
      const $_INPUT = $_TARGET.children('input'),
            CHECKED_VALUE = $_INPUT.prop('checked');

      if ( CHECKED_VALUE != true ) {
        $_INPUT.prop('checked', true);
      } else {
        $_INPUT.prop('checked', false);
      }
    }
  }

$.fn.booleanIntent = function(event){

const $_TARGET = $(event.target);

if ( $_TARGET.is('input') ) {

return false;

} else {

const $_INPUT = $_TARGET.children('input'),

CHECKED_VALUE = $_INPUT.prop('checked');

if ( CHECKED_VALUE != true ) {

$_INPUT.prop('checked', true);

} else {

$_INPUT.prop('checked', false);

}

Code commenté

  $.fn.booleanIntent = function(event){
    const $_TARGET = $(event.target);

    if ( $_TARGET.is('input') ) {
      console.log('is input');
      return false;
    } else {
      console.log('is not input');
      const $_INPUT = $_TARGET.children('input'),
            CHECKED_VALUE = $_INPUT.prop('checked');
      console.log('CHECKED_VALUE: '+CHECKED_VALUE);

      if ( CHECKED_VALUE != true ) {
        console.log('input is not checked, so we check it');
        $_INPUT.prop('checked', true);
      } else {
        console.log('input is checked, so we uncheck it');
        $_INPUT.prop('checked', false);
      }
    }
  }

$.fn.booleanIntent = function(event){

const $_TARGET = $(event.target);

if ( $_TARGET.is('input') ) {

console.log('is input');

return false;

} else {

console.log('is not input');

const $_INPUT = $_TARGET.children('input'),

CHECKED_VALUE = $_INPUT.prop('checked');

console.log('CHECKED_VALUE: '+CHECKED_VALUE);

if ( CHECKED_VALUE != true ) {

console.log('input is not checked, so we check it');

$_INPUT.prop('checked', true);

} else {

console.log('input is checked, so we uncheck it');

$_INPUT.prop('checked', false);

}

[HTML] Le positionnement d’un contenu ancré est décalé à l’écran par rapport à l’emplacement où est placé l’ancre dans le code source de la page.

08/04/2019 / admin

Source: Anchor link landing in wrong position.

Code qui pose problème:

<a name="sponsors"></a>
    <div class="sponsors">
        <div class="sponsors-left">
            <h2>Sponsors</h2>
                <p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
            </div>

<h2>Sponsors</h2>

<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>

</div>

Suggestion de correction:

I think the problem is resulting from the anchors with no contents that you are using.

Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.

I’d try sticking the fragment identifier in the actual renderable entity such as:

<h2 id="sponsors">Sponsors</h2>

1

<h2 id="sponsors">Sponsors</h2>

and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.

Réponse de l’OP:

Aha! Got it, worked a charm, thanks mate. Incidentally – I’m one of the conference organiser, no web dev! So not only will I be at the conference, but also drinking whiskey with the speakers 🙂

[Vanilla JavaScript][jQuery] L’événement Click sur un élément parent, mais trouver l’élément enfant qui est cliqué avec event.target

05/04/2019 / admin

Délégation d’événements avec event.target, event.target.closest si on écoute le clic sur un lien ou un bouton qui contient une icône SVG

Mise à jour: 09/12/2021

Nouvelle source avec deux solutions proposées (la 1ère fonctionne, je l’ai testée): Codepen: CodePen Home
Event delegation with SVGs and closest() et Codepen: CodePen Home
Event Delegation with an SVG.

<button class="click-me">
	<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 800 800" aria-describedby="menu-title">
		<title id="menu-title">User Menu</title>
		<path fill="currentColor" d="M725 0H75C33.75 0 0 33.75 0 75v450c0 41.25 33.75 75 75 75h125v200l240-200h285c41.25 0 75-33.75 75-75V75c0-41.25-33.75-75-75-75zM400 100.258c55.086 0 99.742 44.656 99.742 99.742S455.086 299.742 400 299.742 300.258 255.086 300.258 200s44.656-99.742 99.742-99.742zM550 500H250v-50c0-55.231 44.772-100 100-100h100c55.231 0 100 44.769 100 100v50z"/>
	</svg>
</button>

</svg>

</button>

document.addEventListener('click', function (event) {
	if (!event.target.closest('.click-me')) return;
	console.log(event.target);
}, false);

document.addEventListener('click', function (event) {

if (!event.target.closest('.click-me')) return;

console.log(event.target);

}, false);

Sources:

Description du problème

J’ai le markup HTML suivant:

<div id="p">
    <div id="c1">
        <div id="c2"></div>
        <div id="c3"></div>
    </div id="c4">
        <div id="c5"></div>
    </div>
</div>

</div id="c4">

</div>

…et je souhaite récupérer l’ID de l’élément enfant qui est cliqué lorsque je clique sur l’ensemble de la zone #p. Mais c’est systématiquement l’ID #p qui m’est remonté.

$('#p').bind('click', function() {
    alert($(this).attr('id'));
});

$('#p').bind('click', function() {

alert($(this).attr('id'));

});

Solution en passant event en paramètre de fonction et en utilisant event.target pour récupérer les informations sur le noeud du DOM qui est effectivement cliqué

 $('#p').bind('click', function(event) {
    alert(event.target.id);
 });

$('#p').bind('click', function(event) {

alert(event.target.id);

});

Note importante: ne pas tenter de passer this ou thisobj à la place de event en paramètre de la fonction. Le libellé du paramètre est important et doit rester event à cet endroit là. Plus d’info ici: Difference between this and event.target.

Cas plus complexe où la fonction est déclenchée via un attribut `onClick` dans la source HTML…

…et où une classe précise doit être mise à l’écart.

<tr onClick="jQuery(this).toggleAssociatedDetailByClickingRow(event);" ng-repeat-start="(lineIndex, lineData) in supplierData.stockV2" class="product-isContacto product-isLens row-triggersExpandableContent">
  <td class="col-item"></td>
  <td class="col-toggleDetail">
    <button class="btn-showChildrenTable"><svg><path /></svg></button>
  </td>
  <td class="col-description"></td>
  [...]
</tr>

</td>

[...]

</tr>

  /*
   * Afficher/Masquer un détail en cliquant n'importe où dans la rangée concernée 
   */
  $.fn.toggleAssociatedDetailByClickingRow = function(event){
    const TARGET = $(event.target);

    if (TARGET.is('.btn-showChildrenTable, svg, path', '.col-toggleDetail')) {
      return false;
    } else {
      $(this)
        .children('.col-toggleDetail')
        .find('.btn-showChildrenTable')
        .toggleAssociatedDetail(); 
    }
  }
  // fin: Afficher/Masquer un détail en cliquant n'importe où dans la rangée concernée

* Afficher/Masquer un détail en cliquant n'importe où dans la rangée concernée

$.fn.toggleAssociatedDetailByClickingRow = function(event){

const TARGET = $(event.target);

if (TARGET.is('.btn-showChildrenTable, svg, path', '.col-toggleDetail')) {

return false;

} else {

$(this)

.children('.col-toggleDetail')

.find('.btn-showChildrenTable')

.toggleAssociatedDetail();

}

// fin: Afficher/Masquer un détail en cliquant n'importe où dans la rangée concernée

[AngularJS] Utiliser un filtre pour récupérer le nombre de clés contenues dans un objet JSON.

03/04/2019 / admin

Source JS du filtre:

// Is there a way to count the number of keys in a json object directly in angular expressions?
// https://stackoverflow.com/questions/33520317/is-there-a-way-to-count-the-number-of-keys-in-a-json-object-directly-in-angular

app.filter('numKeys', function() {
  return function(json) {
    var keys = Object.keys(json)
    return keys.length;
  }
});

// Is there a way to count the number of keys in a json object directly in angular expressions?

// https://stackoverflow.com/questions/33520317/is-there-a-way-to-count-the-number-of-keys-in-a-json-object-directly-in-angular

app.filter('numKeys', function() {

return function(json) {

var keys = Object.keys(json)

return keys.length;

}

});

Utilisation qui en est faite dans le template:

Pour l’objet JSON lineData.details.config, numKeys me donne le nombre d’items présents dans l’objet.

  <td>
    <span style="color: red; font-weight: bold;">{{lineData.details.config | numKeys}}</span>
  </td>
  <td ng-repeat="(id, config) in lineData.details.config" class="td-nobor" ng-init="resultCode=config.resultCode;stockMessage=config.stockMessage">
    [...]
  </td>

<td>

<span style="color: red; font-weight: bold;">{{lineData.details.config | numKeys}}</span>

</td>

[...]

</td>

[AngularJS] Utiliser ng-hide et $index pour gérer nativement un rowspan ou un colspan dans une boucle ng-repeat (dans un tableau HTML)

03/04/2019 / admin

Pas tenté: mais peut probablement être utilisé également avec l’attribut HTML colspan.

Il suffit d’ajouter un attribut ng-hide="$index>0" sur l’ensemble des cellules du tableau qui contiennent l’attribut rowspan.
Source jsfiddle.net: AngularJS: ngRepeat & rowspan.

        <tbody ng-repeat="group in groups">
            <tr ng-repeat="member in group.members">
                <td rowspan="{{group.members.length}}" ng-hide="$index>0">
                </td>
            </tr>
        </tbody>

</td>

</tr>

</tbody>

Articles récents

Catégories

Archives

Méta

Mois : avril 2019

[Javascript] Supprimer les entrées dupliquées d’un tableau clé/valeur

[jQuery] Vider des champs de formulaire de manière dynamique

[jQuery] Des plugins pour gérer des actions conditionnelles (notamment afficher/masquer des champs de formulaire)

conditionize2.js

dependsOn

[Change 3.6.x] Un modèle pour créer des formulaires spés

form.js

[jQuery] Vérifier si au moins une checkbox est cochée

[jQuery] Cliquer sur une zone contenant un input type radio ou checkbox actionne le booléen

Code non commenté

Code commenté

[HTML] Le positionnement d’un contenu ancré est décalé à l’écran par rapport à l’emplacement où est placé l’ancre dans le code source de la page.

[Vanilla JavaScript][jQuery] L’événement Click sur un élément parent, mais trouver l’élément enfant qui est cliqué avec event.target

Délégation d’événements avec event.target, event.target.closest si on écoute le clic sur un lien ou un bouton qui contient une icône SVG

Description du problème

Solution en passant event en paramètre de fonction et en utilisant event.target pour récupérer les informations sur le noeud du DOM qui est effectivement cliqué

Cas plus complexe où la fonction est déclenchée via un attribut `onClick` dans la source HTML…

[AngularJS] Utiliser un filtre pour récupérer le nombre de clés contenues dans un objet JSON.

Source JS du filtre:

Utilisation qui en est faite dans le template:

[AngularJS] Utiliser ng-hide et $index pour gérer nativement un rowspan ou un colspan dans une boucle ng-repeat (dans un tableau HTML)

form.js

Code non commenté

Code commenté

Délégation d’événements avec event.target, event.target.closest si on écoute le clic sur un lien ou un bouton qui contient une icône SVG

Description du problème

Solution en passant event en paramètre de fonction et en utilisant event.target pour récupérer les informations sur le noeud du DOM qui est effectivement cliqué

Cas plus complexe où la fonction est déclenchée via un attribut onClick dans la source HTML…

Source JS du filtre:

Utilisation qui en est faite dans le template:

Cas plus complexe où la fonction est déclenchée via un attribut `onClick` dans la source HTML…