Discussion :

[comode]

Bonjour,

Je veux créer (tranformer) des éléments HTML d'une certaine class pour en faire des genres de sélecteurs évolués.

Pour se faire, je spécifie dans les attributs data de l'élément une fonction de callback qui sera appelé lorsqu'un élément sera sélectionné, et le sélecteur s'ouvre en réaction à un .on("click", ...

Ce que je veux, c'est que mon callback dont le prototype doit être et rester

Code :

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

function callback(event, json_returned_item)

modifie des attributs de l'élément HTML dans lequel il a été spécifié...

exemple :

Code html :

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

1
2
<div class="search_item" />Selecteur 1</div>
<div class="search_item" />Selecteur 2</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$('div.search_item')
	.data('can_be_null', true)
	.data('filtered', true)
	.data('default_value', 1)
	.data('my_callback', function(event, json_returned_item){
		if(json_returned_item !== null){
                    alert(json_returned_item.id); // affiche l'ID de l'element selectionné, ça, ça marche
		    // ici, changer le .text() de l'élément div sur lequel on a cliqué
		}
})
	.on('click', OpenSelector);

LE résultat devant être que quand je click sur un des 2 DIV, mon selecteur s'affiche (géré par openselector, pas de probleme là), et quand j'effectue une sélection dedans, il execute my_callback et modifie le texte de la dic pour afficher l'id de l'item selectionné par exemple... Et c'est là que ça pèche...

Comment accéder à cette DIV si j'ai pas d'ID (la ligne commenté du code) ?

En vous remerciant

[danielhagnoul]

Bonsoir

Exemple :

Code HTML :

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

1
2
<div class="search_item">Selecteur 1</div>
<div class="search_item">Selecteur 2</div>

Code :

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
$( function(){
 
    var dataset = {
        "id" : "myID",
        "text" : "Ajouter du texte"
    };
 
    $( 'div.search_item' )
        .data( 'can_be_null', true )
        .data( 'filtered', true )
        .data( 'default_value', 1 )
        .data( 'my_callback', 
            function( event, json_returned_item ){
                var jObj = $( event.target );
 
                if ( json_returned_item !== null ){
                    jObj.text( jObj.text() + ", " + json_returned_item.id + ", " + json_returned_item.text );
                }
            }
         )
         .one( 'click', function( event ){
             // on : fonctionne toujours
             // one : fonctionne uniquement pour le premier click sur l'élément de DOM
 
             ( $( this ).data( 'my_callback' ) )( event, dataset );
         });
 
});

[comode]

Mais heuuuu... ça ne fait plus du tout ce qu'il faut cet exemple ?!

Le fait de cliquer sur mon item ne doit en aucun cas lancer ma fonction de callback ! Le callback en question est la fonction qui doit être lancée lorsque l'utilisateur fait sa sélection dans le sélecteur ouvert par la fonction OpenSelector(event) qui est elle définie dans un autre fichier (et qui marche bien).

ex :

Code :

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

Sélectionnez un ID d'utilisateur : <input type="number" class="search_item" />

du coup, quand on clique sur l'input, mon sélecteur apparait (c'est une fenetre modale), et quand on sélectionne un utilisateur dans la liste, la fonction callback est appelée pour renseigner cet input avec l'ID de l'utilisateur sélectionné...

Code :

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

1
2
3
4
5
6
$('.search_item')
	.data('my_callback', function(event, json_returned_item){
		if(json_returned_item !== null){
                    var mon_input = ??? // le probleme est de définir mon_input !
                    mon_input.val(json_returned_item.id);
		});

J'utilise cette architecture car mon sélecteur est lui même capable d'ouvrir des sous-fenetres qui reçoivent elle même ce callback (le sélecteur permet par exemple de créer un nouvel utilisateur si celui qu'on cherche n'existe pas).

Edit : et merci d'avoir pris le temps de me répondre

[danielhagnoul]

Bonsoir

var mon_input = ??? // le probleme est de définir mon_input !

J'ai répondu dans mon code, je récupère l'élément concerné par event.target : var jObj = $( event.target );.

Pour vous répondre, j'ai uniquement le texte et les codes contenus dans votre question. Avec des éléments partiels, on peut parfois mettre au point un code qui fonctionne très bien , mais il est souvent difficile de voir le vrai problème et la vraie solution.