Discussion :

[Pelote2012]

Bonjour,

J'ai créé un composant graphique jquery. Je souhaiterai maintenant l'interroger.
L'idée serait par une fonction javascript faire un appel à une fonction de mon composant.
J'ai fais un exemple simple http://jsfiddle.net/szy4gj6v/
Dans mon exemple, je voudrai que la fonction GetInfo me retourne 'blue'.

[Darkaurora]

Pour arriver à ce genre de manipulation il te faudra passer par les classes et l'instanciation. Voici un pattern que j'utilise souvent pour écrire des plugins et qui est directement dérivé de bootstrap:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
+function ($) {
  'use strict';
 
  var BK = function (element, options) {
    this.options = options;
    this.$element = $(element);
    this.n = this.$element.attr('id');
 
    this.$element.css('background', this.options.bkg);
  }
 
  BK.DEFAULTS = {
    bkg: 'yellow'
  }
 
  BK.prototype.GetInfo = function () {
    return this.options.bkg;
  }
 
  function Plugin(option) {
    return this.each(function () {
      var $this   = $(this);
      var options = $.extend({}, BK.DEFAULTS, option, typeof option == 'object' && option);
 
      $this.data('bk', new BK(this, options));
    });
  }
 
  var old = $.fn.bk
 
  $.fn.bk             = Plugin
  $.fn.bk.Constructor = BK
}(jQuery);
 
$('#div').bk({bkg: 'red'});
$('#div1').bk({bkg: 'blue'});
 
$('#btnGetSel').click(function () {
   alert($('#div1').data('bk').GetInfo());
});

Le principe est d'écrire une classe très classique en JS puis d'utiliser une fonction "plugin" qui va permettre d'encapsuler la classe en jQuery et d'initialiser le tout. Le principe reste simple, le tout est de stocker quelque part l'instanciation de ta classe, personnellement je le stock sur l'élément via data.

[Pelote2012]

Bonjour

Merci pour ta réponse
Voici une autre réponse qu'on m'a donné sur un autre forum
http://jsfiddle.net/jakecigar/szy4gj6v/2/

[Darkaurora]

C'est pratiquement pareil la seule différence réside dans l'instanciation que j'effectue et qui n'est pas présent dans le deuxième exemple. Il est possible que la solution que l'on t'a proposé peut avoir certaine contrainte sur une utilisation poussé en JS, toutefois et c'est la seule remarque que j'ai à faire sur pour l'exemple proposé: pour un plugin important la lecture, la maintenance et les risques de collisions peuvent également augmenter.

[Pelote2012]

J'ai bien vu que les 2 solutions sont proches.
Mais ce n'est pas vraiment ce que je cherche.
Je veux accéder vraiment à ma div et l'inspecter pour trouver l'info et pas la mettre en data.
Je vais avoir dans cette div un tableau avec des cases à cocher et je voudrais me retourner un array des case cochées.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this)[0].style.background

retourne bien Blue mais je trouve pas top le [0]
et

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).attr("style")

me retourne background:Blue et pas Blue...

Et suis-je obligé de faire

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

 if (typeof options === "string") { return $(this).data("BK")[options].apply(this, [].splice.call(arguments, 1)); }

pour appeler la fonction getInfo dans Settings?

[Darkaurora]

Code javascrit :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$(this)[0].style.background
this.style.background

c'est la même chose

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$(this).attr("style") // Ok mais...
$(this).css('background') // Pourquoi pas ça ?

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

if (typeof options === "string") { return $(this).data("BK")[options].apply(this, [].splice.call(arguments, 1)); }

Ok cette solution est chiante à écrire même si je l'adore , mais pourquoi ne pas utilisé la mienne ?

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#div1').data('bk').GetInfo()

[Pelote2012]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.style.background

me répond une erreur this.style n'existe pas et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).css('background')

est vide...

Pour

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (typeof options === "string") { return $(this).data("BK")[options].apply(this, [].splice.call(arguments, 1)); }

est dans la définition du plugin, si je comprend l'idée, c'est d'enregistrer le settings dans le data de ma div? et de pourvoir y accéder après, même avec la fonction accessible de l'extérieur?

[Pelote2012]

Au final, j'ai mis setting dans data
et j'utilise la boucle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 $('#' + nameW + 'Datas tr td:first-child').each(function () {
                 if ($(this).find('#chkSel').is(':checked')) { arr.push($(this).closest('tr').attr('id')); };
            });

ou nameW est le nom de ma div et nameW+ datas = table créé dynamiquement

[Darkaurora]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.style.background

me répond une erreur this.style

Effectivement si "this" représente un objet jQuery. Cependant je t'assure que ceci fonctionne

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var test = document.getElementById('div1');
console.log(test.style.background);
console.log(test.style.backgroundColor);

n'existe pas et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).css('background')

est vide...

Alors la propriété background n'est pas remplie

Pour

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (typeof options === "string") { return $(this).data("BK")[options].apply(this, [].splice.call(arguments, 1)); }

est dans la définition du plugin, si je comprend l'idée, c'est d'enregistrer le settings dans le data de ma div? et de pourvoir y accéder après, même avec la fonction accessible de l'extérieur?

C'est tout à fait ça, par contre pour ton dernier post je n'ai pas du tout compris ce que tu fais en fait

[Pelote2012]

le this est effectivement déjà un élément jquery. Si tu regarde les posts précédents, tu verra les syntaxes qui me retournent des infos.
Mais c'est pas grave, car j'ai maintenant trouvé ce qui me manquais

Sinon dans mon dernier post, en fait je parcours la première colonne de ma table (là où il y a la case à cocher que je veux contrôler)
je regarde si elle est cocher. Si oui je mets l'ID de ma ligne dans un tableau
à la fin je m'envoi un tableau avec les id pour faire un traitement sur plusieurs ligne de mon tableau (suppression...)