Discussion :

[comode]

Bonjour,

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

Imaginons le code suivant :

Code :

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

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 :

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

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 :

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

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.

[SpaceFrog]

regarde du coté de trigger() qui te permet de lancer par exemple le focus sur l'element

[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...

[SpaceFrog]

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 :

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

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 !
 });

[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...

[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

[danielhagnoul]

Bonsoir

Exemple :

Code HTML :

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

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

Code JS :

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
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 );
 
        });
 
    });
 
});

[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 !