Discussion :

[Fooshi]

Bonjour,
je suis en train de développer un Widget Yahoo.
Les widgets yahoo utilisent le XML pour la mise en forme et le javascript pour les events.
j'aimerais me connecter a la base de donnée MySQl de mon site web de vente en ligne pour y récupérer des des données (promotions, compte client) mais il semble qu'il n'existe pas de fonction pour se connecter a une base de donnée MySQL en javascript
comment faire dans ce cas la ?
merci a tous

[Kerod]

En AJAX, pour utiliser le JavaScript. Sinon le PHP au chargement de la page

[Bovino]

Passe par Ajax...

[Fooshi]

Appeler une page PHP ? pour lire mes données c'est tres bien, mais je ne vois pas trop comment récupérer mes données dans le code javascript.

recuperer les données comme ceci ?
http://gael-donat.developpez.com/web/intro-ajax/#LIII-A

[Kerod]

Ben voilà tu as déjà tout trouvé

[Fooshi]

Ca avance ...

traitement.php hébergé a la racine de mon site :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
echo "<text><name>Donnees</name>\n";
 
 
//on lance la requete
$query = "SELECT specials_id FROM specials";
$result = mysql_query($query) or die (mysql_error());
 
//On boucle sur le resultat
while ($row = mysql_fetch_array($result, MYSQL_NUM))
{
	echo "<data>" . $row[0] . "</data>\n";
}
echo "</text>\n";

Main.js (fichier appelé au chargement du widget) :

Code :

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
/* Refresh Preferences */
function updateBehavior()
		{
		myText.color = preferences.textColorPref.value;
		}
 
/* Donnees DB */
function ajax()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { retour_ajax(xhr); };
 
    //on appelle le fichier reponse.php
    xhr.open("GET", "http://www.cadline.fr/traitement.php", true);
    xhr.send(null);
 
}
 
/* Retour Serveur */
function retour_ajax(xhr)
{
	var docXML= xhr.responseXML;
	var items = docXML.getElementsByTagName("data")
	//on fait juste une boucle sur chaque element "donnee" trouvé
	for (i=0;i<items.length;i++)
	{
		Donnees.data = (items.item(i).firstChild.data);
	}
}
 
 
updateBehavior();
ajax();

Fichier.kon (widget en lui meme) :

Code :

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
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
<?xml version="1.0" encoding="UTF-8"?>
<widget>
	<debug>off</debug>
	<window>
	<bgColor>#CCCCCC</bgColor>
			<image name="baseTopLeft" src="images/Colorized/Top Left.png"/>
			<image name="baseTopMiddle" src="images/Colorized/Top Middle.png" hOffset="32"/>
			<image name="baseTopMiddle1" src="images/Colorized/Top Middle.png" hOffset="64"/>
			<image name="baseTopMiddle2" src="images/Colorized/Top Middle.png" hOffset="96"/>
			<image name="baseTopMiddle3" src="images/Colorized/Top Middle.png" hOffset="128"/>
			<image name="baseTopMiddle4" src="images/Colorized/Top Middle.png" hOffset="160"/>
			<image name="baseTopRight" src="images/Colorized/Top Right.png" hAlign="right"/>
			<image name="baseMiddleLeft" src="images/Colorized/Middle Left.png" vOffset="32"/>
			<image name="baseMiddle" src="images/Colorized/Middle.png" hOffset="32" vOffset="32"/>
			<image name="baseMiddle1" src="images/Colorized/Middle.png" hOffset="64" vOffset="32"/>
			<image name="baseMiddle2" src="images/Colorized/Middle.png" hOffset="96" vOffset="32"/>
			<image name="baseMiddle3" src="images/Colorized/Middle.png" hOffset="128" vOffset="32"/>
			<image name="baseMiddle4" src="images/Colorized/Middle.png" hOffset="160" vOffset="32"/>
			<image name="baseMiddleRight" src="images/Colorized/Middle Right.png" vOffset="32" hAlign="right"/>
			<image name="baseBottomLeft" src="images/Colorized/Bottom Left.png" vAlign="bottom"/>
			<image name="baseBottomMiddle" src="images/Colorized/Bottom Middle.png" hOffset="32" vAlign="bottom"/>
			<image name="baseBottomMiddle1" src="images/Colorized/Bottom Middle.png" hOffset="64" vAlign="bottom"/>
			<image name="baseBottomMiddle2" src="images/Colorized/Bottom Middle.png" hOffset="96" vAlign="bottom"/>
			<image name="baseBottomMiddle3" src="images/Colorized/Bottom Middle.png" hOffset="128" vAlign="bottom"/>
			<image name="baseBottomMiddle4" src="images/Colorized/Bottom Middle.png" hOffset="160" vAlign="bottom"/>
			<image name="baseBottomRight" src="images/Colorized/Bottom Right.png" hAlign="right" vAlign="bottom"/>
		<name>main_window</name>
		<title>Cadline</title>
		<height>80</height>
		<width>200</width>
		<visible>true</visible>
 
		<bgColor>#CCCCCC</bgColor>
		<text>
			<name>myText</name>
			<color>#FFFFFF</color>
			<size>18</size>
			<font>Verdana</font>
			<alignment>center</alignment>
			<vOffset>40</vOffset>
			<hOffset>100</hOffset>
		</text>
		<text>
			<name>Donnees</name>
			<color>#FFFFFF</color>
			<size>18</size>
			<font>Verdana</font>
			<alignment>center</alignment>
			<vOffset>50</vOffset>
			<hOffset>100</hOffset>
		</text>
	</window>
 
	<!-- Preference -->
	<preference>
		<name>textColorPref</name>
		<title>Couleur du texte :</title>
		<type>color</type>
		<defaultValue>#FFFFFF</defaultValue>
		<description>Selectionner une couleur de texte.</description>
	</preference>
 
 
	<!-- timer -->
	<timer>
		<name>timer</name>
		<interval>1</interval>
		<ticking>true</ticking>
		<onTimerFired>
		<![CDATA[
		<!--var cpuLoad = system.cpu.activity;
		myText.data = cpuLoad + "% CPU load";
		if ( cpuLoad < 40 )
		{
		myText.opacity = 102;
		}
		else
		{
		myText.opacity = cpuLoad * 2.55;
		}-->
		]]>
		</onTimerFired>
	</timer>
 
	<!-- Action -->
 
 
	<action trigger="onLoad">
	<![CDATA[
			include( "main.js" );
		]]>
 
	</action>
 
	<action trigger="onPreferencesChanged">
		updateBehavior();
	</action>

j'ai défini une zone de texte comme dans l'exemple "hello world" de yahoo Widget mais mes données ne se retournent pas, elles ne s'affichent pas dans le widget.


<text>
<name>Donnees</name>
<color>#FFFFFF</color>
<size>18</size>
<font>Verdana</font>
<alignment>center</alignment>
<vOffset>50</vOffset>
<hOffset>100</hOffset>
</text>

pourtant dans la fonction retourajax, j'ai bien 'bouclé' chaque champ et rempli donnees.data.