Web service / sélecteur sur un objet créé sur un click

EDIT

j'ai modifié un peu le code ci-dessous mais j'ai toujours un problème de sélecteur
je fais une recherche dans le widget de droite (affiché au click de l'utilisateur) et l'image s'affiche sur le widget de gauche (affiché au chargement de la page)
je pense que le problème se situe au niveau du sélecteur ligne 186 mais je n'arrive pas à trouver la façon de l'écrire

Pièce jointe 463060

Bonjour,

Je travaille sur un projet de services web (widget) utilisant JQuery.
Le principe est d’offrir la possibilité à l’utilisateur d’ajouter des widgets en cliquant sur des icônes permettant l’affichage de l’heure, de la météo, de vidéo YouTube…

Le premier service que j’essaie d’implémenter est un web service de recherche d’image utilisant l’API Flickr.

J’ai donc créé un format de widget standard qui s’affiche au click sur un des icônes.
Ce widget peut être déplacé en ‘drag and drop’.
Donc à chaque création d’un widget, je lui associe la propriété ‘draggable’. Çà fonctionne.

Je souhaite également associer à chaque nouveau widget la fonction de recherche et affichage d’image utilisant l’API Flickr suite à la saisie d’un mot clé.
Je parviens à la faire sur un widget affiché par défaut (affiché au chargement de la page). Je récupère la valeur saisie que j’utilise pour construire la requête au serveur Flickr (apiurl)

Mais je ne parviens pas à récupérer la valeur saisie par l’utilisateur sur un widget créé par l’utilisateur après click sur une icône. Je dois utiliser «*this*» sur mon sélecteur (this représentant mon widget) et récupérer la valeur saisie. J’ai essayé différentes écritures dans mon sélecteur mais sans succès. J’ai essayé notamment*:

recherche = $(this, " input").val(); (ligne 167 : équivalente à ma ligne 166 qui fonctionne sur le widget affiché par défaut)

D’avance merci pour votre aide,

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
 
<!DOCTYPE html>
<html lang="en">
<head>
 
    <!--/home/lecarrou/Documents/Web/iGoogle/Starter template/1cea9f09d6ff4f7e8096-e97dccedfe2d2f231199cc8edc2d4ab2a29f2f93-->
 
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
 
    <title>iGoogle</title>
 
    <!-- Bootstrap Core CSS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 
    <!-- Custom CSS -->
    <style>
        body {
          color:black;
          background-color:white;
          background-image:url(images/surf.png);
          background-repeat:no-repeat;
          background-size: cover;
        }
 
        .row {
          background-color: #222;
          color : white;
        }
 
        /*css pour visualiser les widgets*/
        /*[class*="col-"], footer {
          background-color: #33D4FF;
          border: 2px solid black;
          border-radius: 6px;
          line-height: 40px;
          text-align: center;
        }*/
 
        #widget {
          background-color: #33D4FF;
          width: 450px;
          height: 300px;
          padding: 0;
          border-radius: 5px;
          text-align: center;
          margin-left:150px;
          margin-top:100px;
        }
 
        #entete {
          background-color: #222;
          border-radius: 5px 5px 0 0;
          height: 60px;
          color : white;
          font-style: bold;
        }
 
 
        .navbar-inverse{
          background-color: #222;
        }
 
        .icone{
            margin-top:20px;
        }
 
        #croix{
          text-align:right;
          padding-top:10px;
        }
 
        #titre{
          font-size: 30px;
          padding-top:10px;
        }
 
        #recherche{
          padding-top:10px;
        }
 
        input{
          color:black;
        }
    </style>
 
    <script>
 
    //lancé une fois
    $(document).ready(function() {
 
      //Evènement pour le widget fixe (=TEST)
      $("#boutonRecherche").click(afficherImage);
 
      //Creation de widgets 'draggable'
      $('img').on('click',function(){
        //$(this).attr("alt")) permet de récupérer le nom de l'image sur laquelle l'utilisateur a cliqué
        nouveauWidget($(this).attr("alt"));
      });
 
      //écouteur d'évènement pour chaque nouveau widget créé
      $(".iGoogle").on("DOMNodeInserted", ".draggable", rendreInteractif);
 
    });
 
    //fonction appelée lors de la création d'un écouteur d'évènement
    function rendreInteractif() {
      $(this).draggable();
      $(this, " input #tag").click(affichageImage);
    }
 
    //création d'un widget dont le nom correspond au texte associé à l'icône cliqué
    function nouveauWidget(nomWidget) {
      //var w = $('<div id="widget"><div class="entete"></div><iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=fr&size=medium&timezone=Europe%2FParis" width="100%" height="115" frameborder="0" seamless></iframe></div>').addClass("draggable");
      //var w = $('<div class="row" id="widget"><div class="col-xs-12" id="entete"><div class="col-xs-9" id="titre">'+nomWidget+'</div><div class="col-xs-3" id="croix"><img margin-top:="5px"; src="images/croix.png" alt="croix" height="30px" width="30px" text-align="topright"/></div></div><div class="col-xs-12" id="recherche" ><input type="search"><button>Rechercher</button></div><div class="col-xs-12"></div><div class="col-xs-12" id="contenu">Contenu</div></div>').addClass("draggable");
      var widget = $('\
      <div class="row" id="widget"> \
        <div class="col-xs-12" id="entete"> \
          <div class="col-xs-9" id="titre">'+nomWidget+'</div> \
          <div class="col-xs-3" id="croix"> \
            <img margin-top:="5px"; src="images/croix.png" alt="croix" height="30px" width="30px" text-align="topright"/> \
          </div> \
        </div> \
        <div class="col-xs-12" id="recherche"> \
          <input type="text" id="tag" placeholder="surf"> \
          <button type="button" id="boutonRecherche">Rechercher</button> \
        </div> \
        <div class="col-xs-12" id="contenu"></div> \
      </div>').addClass("draggable");
       widget.find('button').click(fficherImage);
      $(".iGoogle").append(widget);
    }
 
 
    //API flickr
    //exmple d'url généré par la méthode photos.search
    //https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=836949a9fc14a32fcaf88c66c9ba6b10&tags=surf&format=rest&api_sig=58f852517a8f557da2ec7cf6a2d819bf
 
    //ci-dessous url Flickr avec l'api Key qui renvoie un fichier json avec la liste des photos correspondant au crotère de recherche (tags)
    var apiurl;
    var apiurl_taille;
    var recherche;//saisie de la recherche de l'utilisateur
    var resultat;//url de l'image correpodant au critère de recherche exemple : https://farm8.staticflickr.com/7898/47507589781_75474ac509.jpg
    var resultat_taille;
    var aleatoire = 0;
 
    //fonction permettant de générer un nombre aléatoire entre 0 et 99
    function getRandomInt(max) {
      return Math.floor(Math.random() * Math.floor(max));
    }
 
    //fonction afficher image
    function afficherImage(){
      //suppression de l'image précédente
      $(".image").remove();
 
      //récupération de la saisie utilisateur
 
      recherche = $(this).parent().find('input')[0].value;
 
      //nombre alétoire entre 0 et 99
      aleatoire = getRandomInt(99);
      apiurl = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=2e7253692d49d606ec82489ade896869&tags="+recherche+"&format=json&nojsoncallback=1";
 
      $.getJSON(apiurl,function(json){
        console.log("apirul :"+apiurl);//100 lignes
        $.each(json.photos.photo,function(index,resultat){
          if(index==aleatoire){
            console.log("Nombre aléatoire généré :"+index);
            //on récupère un fichier json qui contient tous les formats d'image correspondante
            apiurl_taille = "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=2e7253692d49d606ec82489ade896869&photo_id="+resultat.id+"&format=json&nojsoncallback=1";
 
            $.getJSON(apiurl_taille,function(json){
              console.log("apirul_taille:"+apiurl_taille);//9 lignes (correpsondant à 9 formats différents)
              //on récupère la ligne correspondant à la taille LABEL='Small' et l'url de la photo (SOURCE='')
              $.each(json.sizes.size,function(index,resultat_taille){
                if(resultat_taille.label=='Small'){
                  //Selecteur qui pose problème je pense car ne sélectionne pas le widget créé au click
                  //j'ai essayé d'utilise le mot this mais çà ne fonctionne pas
                  $("#contenu").append('<p class="image"><img src="'+resultat_taille.source+'"/></p>');
 
                }
              });
            });
          }
        });
      });
    }
 
    /*
    //réucpération de la saisie
    $(document).ready(function(){
      $("#boutonRecherche").click(function() {
        //alert('bouton recherche clické');
        //suppression de l'image de la précédente recherche
        $(".image").remove();
        //récupération de la saisie utilisateur
        recherche = $("#tag").val();
        //nombre alétoire entre 0 et 99
        aleatoire = getRandomInt(99);
        apiurl = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=2e7253692d49d606ec82489ade896869&tags="+recherche+"&format=json&nojsoncallback=1";
      });
    });
 
    $(document).ready(function(){
      $('#boutonRecherche').click(function(){
 
        $.getJSON(apiurl,function(json){
          console.log("apirul :"+apiurl);//100 lignes
          $.each(json.photos.photo,function(index,resultat){
            if(index==aleatoire){
              console.log("Nombre aléatoire généré :"+index);
              //on récupère un fichier json qui contient tous les formats d'image correspondante
              apiurl_taille = "https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=2e7253692d49d606ec82489ade896869&photo_id="+resultat.id+"&format=json&nojsoncallback=1";
 
              $.getJSON(apiurl_taille,function(json){
                console.log("apirul_taille:"+apiurl_taille);//9 lignes (correpsondant à 9 formats différents)
                //on récupère la ligne correspondant à la taille LABEL='Small' et l'url de la photo (SOURCE='')
                $.each(json.sizes.size,function(index,resultat_taille){
                  if(resultat_taille.label=='Small'){
                    $("#contenu").append('<p class="image"><img src="'+resultat_taille.source+'"/></p>');
                  }
                });
              });
            }
          });
        });
      });
    });
    */
    </script>
 
 
</head>
 
<body>
<div class="row">
  <div class="col-lg-1"></div>
  <div class="col-lg-2"><strong><h2>iGoogle</h2></strong></div>
  <div class="col-lg-8">
    <img
        class="icone"
        src="images/twitter-icon-hover.png"
        alt="Twitter"
        height="50px"
        width="50px"
        margin-top="20px"
    />
    <img
        class="icone"
        src="images/icone_horloge.png"
        alt="Horloge"
        height="50px"
        width="50px"
 
    />
 
  </div>
 
  <div class="col-lg-2"></div>
</div>
 
<!-- Page Content -->
 
<div class="iGoogle">
 
<!--insertion des widget-->
<!--Corps du widget-->
<div class="row" id="widget">
  <!--En-tête du widget-->
  <div class="col-xs-12" id="entete">
    <div class="col-xs-9" id="titre">Titre du widget</div>
    <div class="col-xs-3" id="croix">
      <img margin-top:="5px"; src="images/croix.png" alt="croix" height="30px" width="30px" text-align="topright"/>
    </div>
  </div>
  <div class="col-xs-12" id="recherche">
    <input type="text" id="tag">
    <button type="button" id="boutonRecherche">Rechercher</button>
  </div>
  <div class="col-xs-12" id="contenu"></div>
</div>
 
</div>
<!-- /.container -->
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>