Accueil - jQuery Tout afficher

Si vous tentez d'utiliser certains caractères spéciaux en jQuery, par exemple dans vos noms de sélecteur, cela engendrera une erreur.

Exemple, le code suivant ...

$("#test=").attr("id");

... produira une erreur comme celle-ci :

Uncaught DOMException: Failed to execute '$' on 'CommandLineAPI': '#test=' is not a valid selector.
    at <anonymous>:1:1

En effet, jQuery interdit un certain nombre de caractères dans le nom des sélecteurs :

#;&,.+*~':"!^$[]()=>|/

Heureusement, il est possible de passer outre. Pour cela, il suffit simplement de les échapper en utilisant un double backslash. 

Pour vous faciliter la tâche, voici une regex que vous pourrez utiliser :

/([ #;&,.+*~\':"!^$[\]()=>|\/@])/

Ainsi, pour rendre fonctionnel l'exemple précédent, on utilisera le code suivant :

$("#test=".replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g,'\\$1')).attr("id");

Lorsque l'on souhaite appeler l'élément $(this) dans une fonction Ajax à la suite d'un événement, une erreur survient. En effet, dans la fonction callback, "this" se réfère à l'objet "jqXHR", et non à l'élément sur lequel l'événement a été rattaché.

Heureusement, il existe des solutions simples pour pallier à ce petit désagrément. La première consiste à utiliser l'option "context" :

$("input").click(function()
{
    $.ajax({
        //...
        context: this,
        success: function(json) {
            // `this` se réfère bien à 'input'
        }
    });
});

Utilisation de l'élément de "$.proxy" :

$.ajax({
    //...
    success: $.proxy(function(json) {
         // `this` se réfèrera au second argument de `$.proxy`
    }, this)
});

Une troisième solution :

var element = this;

$.ajax({
    //...
    success: function(json) {
         // `this` se réfère à l'objet jQXHR
         // `element` se réfère à l'élément DOM
         // `$(element)` se réfère à l'objet jQuery de notre élément
    }
});

Dans ce tutoriel, on va créer un lien permettant de cocher toutes les checkbox d'un formulaire.

Code Html

<form id="tablesearch_form" name="tablesearch_form" action="" method="post">
  <input type="checkbox" class="select_document_chkBx" name="entititesIds[]" value="1" />
  <input type="checkbox" class="select_document_chkBx" name="entititesIds[]" value="2" />
  <input type="checkbox" class="select_document_chkBx" name="entititesIds[]" value="3" />
</form>

<a class="select_all">Tout sélectionner</a> / <a class="deselect_all">Désélectionner</a>

Code JQuery

$('.select_all').click(function(){
  $(".select_document_chkBx").each(function () {
    $(this).attr('checked', true);
  });
});

$('.deselect_all').click(function(){
  $(".select_document_chkBx").each(function () {
    $(this).attr('checked', false);
  });
});

Le code suivant va vous permettre de trier les colonnes de type dates + heures avec le plugin JQuery « Datatables » au format français.

Format trié : « dd/mm/YY à HH:ii »

Pour utiliser cette fonction de tri, on utilisera le préfixe « date-euro ». Pour implémenter une fonction de tri avec le plugin « Datatables », il faut implémenter trois fonctions : « date-euro-pre, date-euro-asc, date-euro-desc ».

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-euro-pre": function ( a ) {

        if ($.trim(a) != '') {
            var frDatea = $.trim(a).split(' à ');
            var frTimea = frDatea[1].split(':');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1]) * 1;
        } else {
            var x = 10000000000000; // = l'an 1000 ...
        }

        return x;
    },

    "date-euro-asc": function (a, b) {
        return a - b;
    },

    "date-euro-desc": function (a, b) {
        return b - a;
    }
});

Format trié : « dd/mm/YY HH:ii »

Pour trier ce type de format, il suffit simplement de reprendre le code précédent et de remplacer la ligne :

var frDatea = $.trim(a).split(' à ');

Par :

var frDatea = $.trim(a).split(' ');

Utilisation des tris :

$('#table').dataTable( {
    "aoColumns": [
        null,
        { "sType": "date-euro" },
        null,
        null,
        { "sClass": "no_show_column" }, // Permet d’ajouter une classe à une colonne
        null
    ]
});

Télécharger Datatables : http://www.datatables.net/download/index

Plus d'infos sur les tris : http://datatables.net/plug-ins/sorting

En PHP, la fonction « in_array » a pour but de tester si un élément (string, ou autre) est présent ou non dans un tableau. En JQuery, cette même fonction a été implémentée sous le nom de « inArray ».

$.inArray("valeurAChercher", [0, "ok", "valeurAChercher"]);
// Cet exemple retournera 2

Cette fonction retourne -1 si la valeur à chercher n’a pas été trouvé sinon elle renvoie la position, dans le tableau, de la valeur trouvée.

Plus d'infos : http://api.jquery.com/jQuery.inArray/