Intégrer timeline twitter dans un élément inséré dynamiquement dans le DOM
Bonjour,
je travaille sur une page web permettant d'afficher dynamiquement des widgets (météo, photos, vidéo, etc...) aux click sur des icones
l'une des widget est une timeline Twitter
j'arrive à intégrer une timeline dans un élément du DOM existant mais la timeline ne s'affiche pas sur une widget créée au click
je ne comprends pas bien d'où vient le problème
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
|
<script>
//lancé une fois
$(document).ready(function() {
//Récupération heure
/*var now = new Date();
//Heure courante
var annee = now.getFullYear();
var mois = now.getMonth() + 1;
var jour = now.getDate();
var heure = now.getHours();
var minute = now.getMinutes();
var seconde = now.getSeconds();*/
//Evènement pour le widget dynamique <div class="col-xs-9" class="titre">'+nomWidget+'</div> \
$('img').click(function(){
//nom du widget en fonction de l'icône clické
nomWidget = $(this).attr("alt");
//contenu du widget paramétré en fonction de l'icône cliqué
switch($(this).attr("alt"))
{
case 'Horloge' :
//Construction du widget
widget = $(' \
<div class="row widget"> \
<div class="col-xs-12 entete"> \
<div class="col-xs-9 titre">'+nomWidget+'</div> \
<div class="col-xs-3 croix"> \
<img class="fermeture" margin-top:="5px"; src="images/croix.png" alt="croix" height="30px" width="30px" text-align="topright"/> \
</div> \
</div> \
<div class="col-xs-12 contenu"> \
<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> \
</div>').draggable();
break;
case 'Photos' :
var contenuWidget = afficherImage;
//Construction du widget
widget = $(' \
<div class="row widget"> \
<div class="col-xs-12 entete"> \
<div class="col-xs-9 titre">'+nomWidget+'</div> \
<div class="col-xs-3 croix"> \
<img class="fermeture" margin-top:="5px"; src="images/croix.png" alt="croix" height="30px" width="30px" text-align="topright"/> \
</div> \
</div> \
<div class="col-xs-12 recherche"> \
<input type="text tag"> \
<button type="button boutonRecherche">Rechercher</button> \
</div> \
<div class="col-xs-12 contenu"></div> \
</div>').draggable();
break;
case 'Twitter' :
widget = $(' \
<div class="row widget"> \
<div class="col-xs-12 entete"> \
<div class="col-xs-9 titre">'+nomWidget+'</div> \
<div class="col-xs-3 croix"> \
<img class="fermeture" margin-top:="5px"; src="images/croix.png" alt="croix" height="30px" width="30px" text-align="topright"/> \
</div> \
</div> \
<div class="col-xs-12 contenu"> \
<a class="twitter-timeline" data-lang="fr" data-width="300" data-height="250" data-theme="dark" href="https://twitter.com/@MichelBillaud?ref_src=twsrc%5Etfw"></a> \
</div> \
</div>').draggable();
break;
case 'Météo' :
var contenuWidget = afficherImage;
break;
case 'News' :
var contenuWidget = afficherImage;
break;
}
widget.find('button').click(contenuWidget);
widget.find('.fermeture').click(fermeture);
$(".iGoogle").append(widget);
});
});
//fermeture d'un widget
function fermeture(){
$(this).closest('.row').remove();
}
//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));
}
var widgetCourant;
//fonction afficher image
//API Flickr
function afficherImage(){
//récupération de l'élément courant
widgetCourant = $(this).parent();
//suppression de l'image précédente
$(this).parent().find('img').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'){
widgetCourant.append('<img src="'+resultat_taille.source+'"/>');
}
});
});
}
});
});
}
</script> |
