Smarty foreach dans un array javascript

Version imprimable

20/03/2014, 00h30
petitours

Smarty foreach dans un array javascript
Bonjour

Je suis grand débutant en Javascript

Je cherche à remplir une variable
Code:

1 2 3 4 5 <script type="text/javascript"> alert(" Ca marche ! "); var tableau = new Array();
avec le contenu d'un foreach smaty.

Le code HTML qui fonctionne en utilisant ce smaty est
Code:

1 2 3 4 <{foreach item=elt from=$block.elt}> <img src="<{$elt.image}>" width="150" height="80" border="0" alt="<{$elt.url}>" /><br /> <br /> <{/foreach}>
J'ai tenté des choses qui ne s’exécutent pas (j'ai vu que c’était en erreur avec la console de firefox (je connais que ca et le alrt("") pour debugger
par exemple
Code:

1 2 3 4 < {foreach item=elt from=$block.elt}> tableau[ <{$elt}>] = "<{$elt.image}>" < {/foreach}>
Merci par avance pour votre coup de pouce
20/03/2014, 01h39
arnogues

Avant toute chose, regarde le code HTML que ton code smarty te génère, donc affiche le code source de ta page (clic droite => code source de la page)
et là tu comprendras mieux tes erreurs
20/03/2014, 09h02
SpaceFrog

La question à te poser, c'est que veux tu mettre dans ton array ??? du code HTML ou veux tu faire un preloader d'images avec des objets image ??

Bonjour

<{$elt.image}> me donne le chemin complet de l'image "http://monsite/cavt5320c62ce952d.jpg" sans les apostrophes, je l'avais vu

mais ca ne me dit pas pourquoi
Code:

1 2 3 < {foreach item=elt from=$block.elt}> tableau[ <{$elt}>] = "<{$elt.image}>" < {/foreach}>
est en erreur.
Je ne sais pas comment débuger le truc en fait. La console me dit que j'ai une erreur là dessus mais ça ne me dit pas quelle erreur ni pourquoi.
Si je laisse le foreach sans le remplissage du tableau
Code:

1 2 < {foreach item=elt from=$block.elt}> < {/foreach}>
Ca me met une erreur aussi, du coup je ne suis pas plus avancé :( le problème semble venir rien de ce foreach (pas syntaxé comme il faut pour javascript ???)

Y a t-il moyen d'avoir plus d'informations sur le debug du javascript ? (je rappelle que je suis grand débutant en javascirpt)

@SpaceFrog : ce que je compte faire c'est remplir la var tableau avec les chemins des images contenues dans le foreach de manière à pouvoir utiliser la suite de mon code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 unction swapImage(){ var el = document.getElementById("mydiv"); el.innerHTML=caption[i]; var img= document.getElementById("slide"); img.src= image[i]; if(i < NbImage ) { i++;} else { i = 0; } setTimeout("swapImage()",2000); }
qui vient remplir le src d'une image
(c'est le code d'un slideshow basique que j'ai pompé sur internet)

pour renseigner l'array il faut boucler en js
Mais tu n'as pas répondu à ma question ...

je suppose que tu veux faire un preloader au vu du code ...
Code:

1 2 3 4 5 6 7 8 preloadimg=new Array(); var i=-1; <{foreach item=elt from=$block.elt}> preloadimg[++i]= new Images(); preloadimg[i].src= "<{$elt.image}>"; preloadimg[i].alt="<{$elt.url}>"; <{/foreach}>

20/03/2014, 09h32
petitours

je n'ai pas compris la question a laquelle je devais répondre...:roll:

j'ai cru le faire en écrivant

Citation:

ce que je compte faire c'est remplir la var tableau avec les chemins des images contenues dans le foreach

mhhh ne fait non l'incrément doit se faire avec smarty

Et je ne sais pas commet marche smarty ...

Dans la théorie ça donnerait un truc comme ça ...
Code:

1 2 3 4 5 6 7 preloadimg=new Array(); <{ variableincrement =-1}> <{foreach item=elt from=$block.elt}> preloadimg[<{ ++variableincrement}>]= new Images(); preloadimg[<{ variableincrement}>i].src= "<{$elt.image}>"; preloadimg[<{ ++variableincrement}>].alt="<{$elt.url}>"; <{/foreach}>

Le code que j'ai récupéré et qui fonctionne avec des images statiques est ceci

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
<div style="text-align: center;">
    <{literal}>
<script type="text/javascript"> 
 
alert(" lancement ");
 
var i = 0; 
var image = new Array();   
 
// LIST OF IMAGES 
image[0] = "image_1.gif"; 
image[1] = "image_2.gif"; 
image[2] = "image_3.gif";  
 
 
//Specify the slider's images
 
var NbImage = image.length-1;    
 
var caption = new Array(); 
 
// LIST OF CAPTIONS  
 
caption[0] = "Caption for the first image"; 
caption[1] = "Caption for the second image"; 
caption[2] = "Caption for the third image";  
 
function swapImage(){ 
 
	var el = document.getElementById("mydiv"); 
 
	el.innerHTML=caption[i]; 
 
	var img= document.getElementById("slide"); 
 
	img.src= image[i];  
 
	if(i < NbImage ) { i++;}  
 
	else  { i = 0; } 
 
	setTimeout("swapImage()",2000);  
} 
 
function addLoadEvent(func) { 
 
var oldonload = window.onload; 
 
if (typeof window.onload != 'function') { 
 
window.onload = func; 
 
} else  { 
 
window.onload = function() { 
 
if (oldonload) { 
 
oldonload(); 
 
} 
 
func(); 
 
} 
 
} 
 
}  
 
addLoadEvent(function() { 
 
swapImage(); 
 
});  
 
 
</script> 
    <{/literal}>
 
<table style="border:3px solid #00aaff;background-color:#00aaaa;"> 
<tr>
	<td> 
		<img name="slide" id="slide" alt ="my images" src="image_1.gif"/> 
	</td> 
</tr> 
 
<tr> 
	<td align="center"style="font:small-caps bold 15px georgia; color:blue;"> 
		<div id ="mydiv"></div>  
	</td> 
</tr>
 
</table>
</div>

et le contenu du foreach smarty est visible nickel en faisant ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<{foreach item=partner from=$block.partners}>
      <a href="<{$xoops_url}>/modules/xoopspartners/vpartner.php?id=<{$partner.id}>" target="_blank">
      <{if $partner.image != ""}>
      <img src="<{$partner.image}>" width="150" height="80" border="0" alt="<{$partner.url}>"  /><br />
      <{/if}>
      <{$partner.title}>
      </a>
      <{if $block.insertBr != ""}>
      <br />
      <{/if}>
      <br />
      <{/foreach}>

du coup je ne pense pas qu'il soit nécessaire de charger un objet image, juste de remplir le tableau image avec le chemin des images.

20/03/2014, 10h21
SpaceFrog

ce n'est qu'un conseil ...

mais si tu ne charges que le string src dans ton array, les images ne sont pas chargées? Ainsi lorsque tu modifieras le src dynamiquement pour la première fois, le navigateur ne chargera l'image qu'a ce moment là. tu auras donc une latence.
Si par contre tu passe par des new Image() l'image sera déja chargée et le swap immédiat.

compris ll'histoir du préchargement

j'ai testé ceci qui semble passer le chargement du foreach (qui est enfin plus en erreur de syntaxe !!!)
j'ai juste du remplacer le new Images() par new Image()
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 <script type="text/javascript"> alert(" lancement "); var i = 0; preloadimg=new Array(); var r=-1; <{foreach item=partner from=$block.partners}> preloadimg[++r]= new Image(); preloadimg[r].src= "<{$partner.image}>"; preloadimg[r].alt="<{$partner.url}>"; <{/foreach}> var NbImage = preloadimg.length-1; // LIST OF CAPTIONS var caption = new Array(); caption[0] = "Caption for the first image"; caption[1] = "Caption for the second image"; caption[2] = "Caption for the third image"; function swapImage(){ var el = document.getElementById("mydiv"); el.innerHTML=caption[i]; var img = document.getElementById("slide"); img.src= preloadimg[i].src; if(i < NbImage ) { i++;} else { i = 0; } setTimeout("swapImage()",2000); }
Problème, sur la ligne

Code:

mg.src= preloadimg[i].src;

ca me met que

Citation:

TypeError: preloadimg[i] is undefined

s'il a pu le remplir, comment ne peut il le trouver pas défini après ?

20/03/2014, 11h30
SpaceFrog

que donne le code source javascript généré ?

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
<script type="text/javascript"> 
 
alert(" lancement ");
 
var i = 0; 
 
preloadimg=new Array();
var r=-1;
preloadimg[++r]= new Image();
preloadimg[r].src= "http://www.id3e.fr/logoComplet1.png";
preloadimg[r].alt="http://www.id3e.fr";
preloadimg[++r]= new Image();
preloadimg[r].src= "http://www.jaguar-mark.fr/uploads/avatars/cavt5320c62ce952d.jpg";
preloadimg[r].alt="http://www.68hc08.net";
preloadimg[++r]= new Image();
preloadimg[r].src= "http://www.jaguar-mark.fr/uploads/avatars/blank.gif";
preloadimg[r].alt="http://www.jaguar-mark.fr";
 
var NbImage = preloadimg.length-1;    
 
// LIST OF CAPTIONS  
var caption = new Array(); 
caption[0] = 'Caption for the first image'; 
caption[1] = "Caption for the second image"; 
caption[2] = "Caption for the third image";  
 
function swapImage(){ 
 
	var el = document.getElementById("mydiv"); 
	el.innerHTML=caption[i]; 
 
	var img = document.getElementById("slide"); 
	img.src= preloadimg[i].src;  
 
	if(i < NbImage ) { i++;}  
 
	else  { i = 0; } 
 
	setTimeout("swapImage()",2000);  
} 
 
function addLoadEvent(func) { 
 
var oldonload = window.onload; 
 
if (typeof window.onload != 'function') { 
 
window.onload = func; 
 
} else  { 
 
window.onload = function() { 
 
if (oldonload) { 
 
oldonload(); 
 
} 
 
func(); 
 
} 
 
} 
 
}  
 
addLoadEvent(function() { 
 
swapImage(); 
 
});  
 
 
</script> 
 
 
<table style="border:3px solid #00aaff;background-color:#00aaaa;"> 
<tr>
	<td> 
		<img name="slide" id="slide" alt ="my images" src="image_1.gif"/> 
	</td> 
</tr> 
 
<tr> 
	<td align="center"style="font: bold 15px ; color:blue;"> 
		<div id ="mydiv"></div>  
	</td> 
</tr>
 
</table>

ça a pas l'air bien joli le preloadimg[++r] :roll:

Je viens d'essayer d'ajouter un <{literal}> autour du script mais ca me met une syntaxe error sur le foreach...

20/03/2014, 11h57
SpaceFrog

la partie preload est correcte :

http://jsfiddle.net/tu9LW/

regarde en console tu as bein les objets image avec les bon src et alt ...

avec ceci
Code:

1 2 3 4 5 <{foreach item=partner from=$block.partners}> preloadimg[<{$partner.id}>]= new Image(); preloadimg[<{$partner.id}>].src= "<{$partner.image}>"; preloadimg[<{$partner.id}>].alt="<{$partner.url}>"; <{/foreach}>
ca semble mieux initialiser le preloadimg
Code:

1 2 3 4 5 6 7 8 9 preloadimg[1]= new Image(); preloadimg[1].src= "http://www.id3e.fr/logoComplet1.png"; preloadimg[1].alt="http://www.id3e.fr"; preloadimg[2]= new Image(); preloadimg[2].src= "http://www.jaguar-mark.fr/uploads/avatars/cavt5320c62ce952d.jpg"; preloadimg[2].alt="http://www.68hc08.net"; preloadimg[3]= new Image(); preloadimg[3].src= "http://www.jaguar-mark.fr/uploads/avatars/blank.gif"; preloadimg[3].alt="http://www.jaguar-mark.fr";
un
Code:

1 2 var NbImage = preloadimg.length-1; alert(NbImage);
me donne bien 3, j'espère que ca répond à la question "regarde en console tu as bein les objets image avec les bon src et alt ... "

mais j'ai toujours l'erreur TypeError: preloadimg[i] is undefined :(

Je ne comprends pas ce que je dois voir sur le lien fourni jsfiddle :oops:

Merci pour le coup de main

une piste peut être

dans la fonction swapImage() où l'appel de preloadimg[i] n'est pas reconnu, j'ai aussi le tableau caption qui ne l'est pas. Ca ne me met pas d'erreur sur la console mais tout ce que retourne

Code:

1
2
var el = document.getElementById("mydiv"); 
	el.innerHTML = caption[i] ;

s'affiche undefined dans le code HTML

rappel, voici le code complet JS + html

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
<script type="text/javascript"> 
 
alert(" lancement ");
 
var i = 1; 
 
preloadimg=new Array();
var r = -1;
<{foreach item=partner from=$block.partners}>
preloadimg[<{$partner.id}>]= new Image();
preloadimg[<{$partner.id}>].src= "<{$partner.image}>";
preloadimg[<{$partner.id}>].alt="<{$partner.url}>";
<{/foreach}>
 
var NbImage = preloadimg.length-1; 
 
 
// LIST OF CAPTIONS  
var caption = new Array(); 
caption[0] = "Caption for the first image"; 
caption[1] = "Caption for the second image"; 
caption[2] = "Caption for the third image";  
 
function swapImage(){ 
	var el = document.getElementById("mydiv"); 
	el.innerHTML = caption[i] ;
 
	var img = document.getElementById("slide"); 
	img.src= preloadimg[i].src;  
 
	if(i <= NbImage ) { i++;}  
 
	else  { i = 1; } 
 
	setTimeout("swapImage()",2000);  
} 
 
function addLoadEvent(func) { 
 
var oldonload = window.onload; 
 
if (typeof window.onload != 'function') { 
 
window.onload = func; 
 
} else  { 
 
window.onload = function() { 
 
if (oldonload) { 
 
oldonload(); 
 
} 
 
func(); 
 
} 
 
} 
 
}  
 
addLoadEvent(function() { 
 
swapImage(); 
 
});  
 
 
</script> 
 
 
<table style="border:3px solid #00aaff;background-color:#00aaaa;"> 
<tr>
	<td> 
		<img name="slide" id="slide" alt ="my images" src="image_1.gif"/> 
	</td> 
</tr> 
 
<tr> 
	<td align="center"style="font: bold 15px ; color:blue;"> 
		<div id ="mydiv"></div>  
	</td> 
</tr>
 
</table>

20/03/2014, 12h54
SpaceFrog

http://jsfiddle.net/tu9LW/2/