Utilisez .data() pour passer des paramètres à une fonction depuis un callback

Version imprimable

Bonjour,

Sous ce titre bien pompeux un problème récurrent dans mon application...

Imaginons le code suivant :
Code:

1 2 3 4 5 6 7 function OuvrePopup(event) { var width = $(this).data("width"); var element_a_afficher = $(this).data("a_afficher"); //... code utilie pour creer la popup de largeur width... // popup.append($("<div />").text(element_a_afficher)); }
on a donc une fonction qui créée dynamiquement une popup a partir d'une largeur et d'un contenu qu'on peut passer en paramètre depuis n'importe quel élément HTML. Ex :
Code:

1 2 3 4 <input type="text" data-width="200" data-a_afficher="coucou" class="input_qui_reagit" /> <script language="javascript"> $("input.input_qui_reagit").on("focus", OuvrePopup); </script>
jusque la, tout va bien.

Maintenant, imaginons que j'ai besoin d'ouvrir cette popup non plus au focus sur un input, mais par exemple lorsque je reçoit la réponse d'un appel ajax...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $.ajax({ url: "ajax.php", type: "POST", dataType: "json", async: true, data: {machin:10} }) .done(function(datas) { // la, je veux appeler ma popup // sachant que datas.width et datas.a_afficher contiennent les 2 valeurs dont j'ai besoin OuvrePopup(); // donc c'est la que j'ai un probleme ! });
Comment puis-je faire pour que dans le dernier exemple, $(this).data("width") soit correctement initialisé lors de l'éxecution de OuvrePopup() ? Est-ce juste possible ?

Je précise que l'idée est bien d'utiliser la même fonction partout, donc pas de modif du prototype de la focntion, et on oublie les astuces type j'insère mes données dans l'event.

En vous remerciant.

14/10/2014, 08h27
SpaceFrog

regarde du coté de trigger() qui te permet de lancer par exemple le focus sur l'element
14/10/2014, 14h39
comode

Mais heuuu... Ca n'a complètement rien à voir avec ma question, l'idée étant justement que je veux appeler OuvrePopup() en dehors de tout élément HTML...

Désolé je pensais que tu cherchais à déclencher le focus ailleurs ...

Ton retour est un json ...
pourquoi ne passes tu pas les paramètre à la fonction ???
Code:

1 2 3 4 5 6 .done(function(datas) { // la, je veux appeler ma popup // sachant que datas.width et datas.a_afficher contiennent les 2 valeurs dont j'ai besoin OuvrePopup(datas.width, datas.height); // donc c'est la que j'ai un problème ! });

15/10/2014, 14h56
comode

C'est ce que je fais pour le moment, mais j'aurais aimé justement ne pas avoir de paramètres et piocher directement dans les .data()

Après, si c'est pas possible, c'est pas possible...
15/10/2014, 16h11
SpaceFrog

tu peux toujours déclarer une variable globale et colle ton datas dedans sur le callback...

ainsi les données seront accessibles en dehors du. done après le callback
mais bon pas très propre

Bonsoir

Exemple :

Code:

1
2
3
<input class="inputDynamique" type="text" data-width="400" data-message="coucou">
 
<button id="btnTest">Test $.getJSON</button>

Code:

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
41
42
43
44
45
$( function(){
 
    var jObjInputDynamique = $( "input.inputDynamique" );
 
    function OuvrePopup(){
        // popup text : jObjInputDynamique.data( "message" ) et jObjInputDynamique.data( "width" )
 
        alert( jObjInputDynamique.data( "message" ) );
    }
 
    jObjInputDynamique.on( "focus", OuvrePopup );
 
    $( "#btnTest" ).on( "click", function(){
 
        var jqXHR = $.getJSON( "ajax.php", { "machin" : 10 } );
 
        jqXHR.done( function( data, textStatus, jqXHR ){
            // succès de la transaction, on doit traiter le contenu de data
            console.log( data, textStatus, jqXHR );
 
            // modification du message, exemple
            jObjInputDynamique.data( "message", textStatus );
 
            OuvrePopup();            
        });
 
        jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
            // échec de la transaction, gérer la catastrophe
            console.log( jqXHR, textStatus, errorThrown );
 
            // modification du message, exemple
            jObjInputDynamique.data( "message", textStatus );
 
            OuvrePopup();
        });
 
        jqXHR.always( function( jqXHR, textStatus ){
            // la transaction est terminée
            console.log( jqXHR, textStatus );
 
        });
 
    });
 
});

16/10/2014, 00h25
comode

@danielhagnoul

Oui mais encore une fois, cette solution passe par un élément HTML (que je pourrais aussi créer dynamiquement dans le done() avant de le "triggeriser", parce que la, je suis limité dans son nombre d'utilisations simultanées)...

L'idée était vraiment de savoir si il y avait moyen de modifier le contexte dans lequel est appelé la fonction (donc le contenu de $(this) une fois à l'intérieur de la fonction), car autant je commence un peu à gérer les méthodes du jquery, autant son arborescence d'objet reste encore pour moi une zone d'ombre.

Enfin bon, vous embêtez pas, je vais considérer la chose comme impossible pour le moment.

Edit : et évidemment merci pour votre temps !