SQL dans Javascript

Version imprimable

SQL dans Javascript

Bonjour,

Pour un projet, je dois créer une page web qui permettra d'afficher un tableau de données.
Pour cela j'utilise la librairie UI OpenUI5.
Je suis loin d'être un pro en code donc je vais essayer de bien expliquer mon problème.
J'ai compris comment fonctionnait la création d'un tableau avec des données statiques par contre je sais pas du tout comment faire pour intégrer les données d'une BDD mysql.
Voici le script dans ma page html qui me permettra de mieux expliquer ensuite :

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
<script>  
// create the DataTable control
		var oTable = new sap.ui.table.Table({editable:false});
		// define the Table columns
		var oControl = new sap.ui.commons.TextView({text:"{lastName}"}); // short binding notation
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Last Name"}), template: oControl, sortProperty: "lastName", filterProperty: "lastName", width: "100px"}));
		oControl = new sap.ui.commons.TextView({text:"{name}"}); // more verbose binding notationt
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "First Name"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "100px"}));
		oControl = new sap.ui.commons.CheckBox({checked:"{checked}"});
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Checked"}), template: oControl, sortProperty: "checked", filterProperty: "checked", width: "75px", hAlign: "Center"}));
		oControl = new sap.ui.commons.Link({text:"{linkText}", href:"{href}"});
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Web Site"}), template: oControl, sortProperty: "linkText", filterProperty: "linkText"}));
		oControl = new sap.ui.commons.RatingIndicator({value:"{rating}"});
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Rating"}), template: oControl, sortProperty: "rating", filterProperty: "rating"}));
 
		// create some local data
		var aData = [
			{lastName: "Dente", name: "Al", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", rating: 4},
			{lastName: "Friese", name: "Andy", checked: true, linkText: "https://experience.sap.com/fiori", href: "https://experience.sap.com/fiori"},
			{lastName: "Mann", name: "Anita", checked: false, linkText: "http://www.saphana.com/", href: "http://www.saphana.com/", rating: 3},
		];
 
		// create a JSONModel, fill in the data and bind the Table to this model
		var oModel = new sap.ui.model.json.JSONModel();
		oModel.setData({modelData: aData});
		oTable.setModel(oModel);
		oTable.bindRows("/modelData");
 
		// finally place the Table into the UI
		oTable.placeAt("content");
 
</script>

Comme vous pouvez le voir les données du tableau sont en dur. Je souhaiterais faire une requête SQL et insérer ces données dans la variable aData.
Le problème n'est pas la requête bien entendu mais comment utiliser sql au milieu d'un script Javascript.
Merci d'avance

05/01/2015, 18h48
lysandro

Si je comprends votre question : pour interroger un sgbd, il faut un client généralement fourni par l'éditeur.

Coté client: ClientWeb <==> SGBD

Si le navigateur est IE , il faut regarder vers adodb/oledb avec ActiveX mais cela nécessitera une installation du client du sgbd sur le poste.
Sinon, peut-être qu'il existe un client en javascript communiquant en soap ou json, par exemple, fourni avec le sgbd (voir la doc du sgbd) ?

Coté serveur: ClientWeb <==> Serveur(Web) <==> SGBD

Si vous avez la main sur le serveur web et qu'il est possible d'y exécuter du code (php, java, ...) vous pouvez vous créer des "pages" (ou des composants logiciels) qui répondront à vos différentes demandes envoyées en ajax par votre client web (page html). Le lien avec le sgbd se faisant coté serveur.
Si vous utilisez, coté serveur, node.js, il est aussi possible d'accéder à des sgbd. Vous devrez qd mm créer le protocole d'échange avec le code serveur node.js. Le lien avec le sgbd se faisant coté serveur.

Il existe peut-être d'autres alternatives que je ne connais pas.

Je vais reposer ma question car elle n'a pas du être claire apparemment.
Ce que je veux ce sont les commandes me permettant de me connecter à une base de données mysql, faire des requêtes, integrer le résultat dans un variable ect.... au milieu du javascript.
En php par exemple ont fait :
Code:

1 2 3 4 5 6 7 8 $connexion = mysql_connect(IP, user, password); $choixbase = mysql_select_db(base, $connexion); $sql = "SELECT toto FROM tata"; $requete = mysql_query($sql); $resultat = array(); while($ligne = mysql_fetch_assoc($requete)){ array_push($resultat, $ligne['toto']); }
Et ce que je voudrais c'est la même chose pour du javascript :)
PS : Je découvre totalement le javascript ^^

06/01/2015, 09h40
SylvainPV

PHP = langage serveur
JavaScript = langage client (la plupart du temps)

La question est: où se trouve la base de données ? Si comme dans 99% des cas elle est sur un serveur, alors JavaScript ne peut communiquer autrement avec elle qu'avec des requêtes IP ; le serveur sera le relais entre les requêtes client et la base de données, permettant notamment d'ajouter une couche sécurité.

Ok j'ai compris le principe.
Du coup je suis parti sur un fichier php qui permet de récupérer les données en base et une autre page qui me servira d'index avec le script javascript.
Par contre je reste bloqué ^^ donc voila ce que j'ai fais pour ma page de récupération de données datacontacts.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$connect = mysqli_connect($hostname, $username, $password,$database)
or die('Could not connect: ' . mysql_error());
 
$query = "SELECT contacts.nom_contact, contacts.prenom_contact FROM contacts";
 
$result = mysqli_query($query) or die("SQL Error 1: " . mysqli_error());
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
    $aData[] = array(
        'nom_contact' => $row['nom_contact'],
        'prenom_contact' => $row['prenom_contact']
		);
}
echo json_encode($aData);

Par contre ma page index m'affiche bien un tableau mais il me dit "Aucune donnée", je pense que la récupération de données dans la variable aData n'est pas bonne mais je ne vois pas pourquoi, voici mont index.php

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
<!DOCTYPE html>  
<html><head>  
    <meta name="description" content="UI5 table example with local JSON model" />
	<meta http-equiv='X-UA-Compatible' content='IE=edge' />
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>  
 
    <script id="sap-ui-bootstrap"
   src="resources/sap-ui-core.js"
   data-sap-ui-theme="sap_bluecrystal"
   data-sap-ui-libs="sap.ui.commons,sap.ui.table"></script> 
 
 
 
<script>  
// create the DataTable control
		var oTable = new sap.ui.table.Table({editable:false});
		// define the Table columns
		var oControl = new sap.ui.commons.TextView({text:"{nom_contact}"}); // short binding notation
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Nom"}), template: oControl, sortProperty: "nom_contact", filterProperty: "nom_contact", width: "100px"}));
		oControl = new sap.ui.commons.TextView({text:"{prenom_contact}"}); // more verbose binding notationt
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Prénom"}), template: oControl, sortProperty: "prenom_contact", filterProperty: "prenom_contact", width: "100px"}));
 
 
		// create some local data
		var aData = {
                 datatype: "json",
                 datafields: [{ nom_contact: 'nom_contact' },{ prenom_contact: 'prenom_contact' }],
                 url: 'datacontacts.php'
		};
 
		// create a JSONModel, fill in the data and bind the Table to this model
		var oModel = new sap.ui.model.json.JSONModel();
		oModel.setData({modelData: aData});
		oTable.setModel(oModel);
		oTable.bindRows("/modelData");
 
		// finally place the Table into the UI
		oTable.placeAt("contacts");
 
</script>
</head>
<body class='sapUiBody'>
    <div id='contacts'></div>
</body>
</html>

06/01/2015, 11h54
lysandro

https://openui5.hana.ondemand.com/#d...db0e91070.html
https://openui5.hana.ondemand.com/do....html#loadData

Merci pour les liens lysandro par contre j'ai un soucis dans mon php avec json_encode :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$connect = mysqli_connect($hostname, $username, $password,$database)
or die('Could not connect: ' . mysql_error());
 
$aDate = array();
$query = "SELECT contacts.nom_contact, contacts.prenom_contact FROM contacts";
$result = mysqli_query($connect,$query) or die("SQL Error 1: " . mysqli_error());
while ($row = mysqli_fetch_array($result)) {
   		$aData[] = array(
        'nom_contact' => $row['nom_contact'],
        'prenom_contact' => $row['prenom_contact']
		);
}
 
echo ("test");
echo json_encode($aData);
echo ("test2");

En fait je vois bien mon "test" mais après rien. Je json_encode m'affiche rien et en plus le "test2" ne s'affiche pas.

06/01/2015, 16h13
lysandro

mpff ... je ne connais rien à php malheureusement ...
Vous avez 'json_last_error()' qui peut peut-être vous donner plus d'infos. ~~Dans la syntaxe $aData[] = array( les crochets me semblent inhabituels~~ Vous avez écrit $aDate = array(); et vous utilisez $aData[] = array( ? mais encore fois, mieux vaut l'avis de connaisseurs sur le sujet.
06/01/2015, 16h33
ABCIWEB

Salut,

A mon avis ce n'est pas json_encode qui pose problème mais plutôt la récupération des données de la requête.
A la place de echo ("test"); (qui ne sert à rien) on peut déjà faire print_r($aDate); pour voir s'il y a un retour.

Attention tu utilises mysql_error() pour la connexion or tu utilise mysqli, et mysqli demande l'identifiant de connexion en style procédural soit

Code:

mysqli_error($connect)

à corriger dans la requête.
07/01/2015, 10h00
fripou

J'ai remarqué que mon php n’était apparemment pas en bonne version et je l'ai donc upgrade en 5.3.3 mais cela ne change rien. Lorsque je met print_r($aDate); cela me renvoie Array ( ).
La récupération de données est bonne car lorsque je fais

Code:

echo $aData[0]['nom_contact'];

ou

Code:

echo $aData[0]['prenom_contact'];

cela me renvoie les bonnes informations
07/01/2015, 10h57
fripou

Alors bonne nouvelle le json_encode est fonctionnel. J'ai bien les bonnes données d'afficher au bon format.
Par contre je n'arrive toujours pas à récuper les data dans ma page principale ^^

edit: Le code ci-dessous est un code de test. Sa forme inhabituelle vient de ce que j'utilise ce code dans un autre environnement, Windows/CScript en l'occurence. Dans cet environnement, il y a plusieurs contrôles ActiveX différents qui sont instantiables chacun avec leurs particularités, chacun avec leurs erreurs. Certains ne gèrent pas les redirections HTTP par exemple. C'est un code de mise au point. Dans le contexte présent, il assure une remontée des erreurs quoi qu'il se produise (enfin je l'espère !) tout en sachant où l'erreur s'est produite quel que soit l'environnement. Il n'est pas destiné à être mis en production tel quel. Il n'est en aucune façon une référence quelconque de programmation web. Son seul objectif, était de me permettre de savoir si une erreur se produisait, où elle s'était produite, ainsi que de m'assurer que fripou aurait connaissance de l'erreur pour la retransmettre, pas spécialement pour qu'il l'a comprenne. D'où le alert plutot qu'un console.log.

Vous pouvez vérifier le retour de votre page 'datacontacts.php' avec une page de test :
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 ... <script type="text/javascript"> var step, xhr = null; try { step = "create"; if ( typeof window.XMLHttpRequest == "function" ) xhr = new XMLHttpRequest(); else xhr = new ActiveXObject("MSXML2.XMLHTTP"); if ( xhr == null ) throw new Error("failed to create an XMLHttpRequest"); step = "open"; xhr.open("GET","datacontacts.php",false); step = "send"; xhr.send(); step = "receive"; if ( xhr.readyState != 4 ) alert("readyState : "+xhr.readyState); else if ( xhr.status != 200 && xhr.status != 0 ) alert("status : "+xhr.status); else alert("responseText : "+String(xhr.responseText)); } catch( ex ) { alert("exception at "+step+" : "+ex.name+": "+ex.message); } </script> ...
Si vous avez bien votre 'responseText' avec vos données, il ne vous restera plus qu'à aller piocher dans la doc de sap.ui ...

07/01/2015, 15h13
Bovino

Quelques précisions quand même.

Code:

if ( typeof window.XMLHttpRequest == "function" )

Ca me semble un peu compliqué par rapport à un classique

Code:

if ( window.XMLHttpRequest )

voire si tu veux un peu de rigueur

Code:

if ( 'XMLHttpRequest' in window )

Code:

xhr = new ActiveXObject("MSXML2.XMLHTTP");

Cette condition devient quelque peu caduque à moins que ton public cible concerne les utilisateurs d'IE 6.

Code:

throw new Error("failed to create an XMLHttpRequest");

~~Pourquoi mettre ça dans un throw plutôt que d'inclure une clause catch prévue par le try ?~~
De plus, le message est complètement incompréhensible par le commun des mortels qui ne sait pas ce qu'est un "XMLHttpRequest" et qui n'a d'ailleurs aucun intérêt à le savoir. ;)

EDIT
Ah oui, je viens de voir le pourquoi du throw. ;)
Sauf que je vois mal l'utilité car à part à la création de l'objet XMLHttpRequest, aucune autre partie du code n'est supposée générer d'erreur... :?
07/01/2015, 15h26
lysandro

Citation:

Envoyé par Bovino

Code:

if ( typeof window.XMLHttpRequest == "function" )

Ca me semble un peu compliqué par rapport à un classique ...
...

Code:

xhr = new ActiveXObject("MSXML2.XMLHTTP");

Cette condition devient quelque peu caduque à moins que ton public cible concerne les utilisateurs d'IE 6.

Sans doute, mais comme en l'occurence je test avec IE8 et en local, cela m'oblige à changer mes sécurités sur ma zone locale et ça m'em...nnuie. C'est une solution de facilité. edit: ce n'est peut-être pas trés clair: dans IE8, window.XMLHttpRequest existe mais n'est pas une fonction (il ne passe pas le test) ça cascade sur le ActiveXObject qui lui n'a pas les mêmes restrictions (pourquoi ? je ne veux même pas le savoir, enfin si mais je n'ai pas envie de chercher :))

Citation:

Envoyé par Bovino

Code:

throw new Error("failed to create an XMLHttpRequest");

Pourquoi mettre ça dans un throw plutôt que d'inclure une clause catch prévue par le try ?
De plus, le message est complètement incompréhensible par le commun des mortels qui ne sait pas ce qu'est un "XMLHttpRequest" et qui n'a d'ailleurs aucun intérêt à le savoir. ;)

Bin, comme tu l'as remarqué tout le code est dans un bloc 'try catch' avec un affichage des erreurs rudimentaire, le 'throw' m'évite d'alourdir le code et ainsi de passer par ce qui est déjà prévu. Le message est complétement incompréhensible :D c'est pas faux ! en même temps fripou est ingénieur sytèmes et réseaux, pas vraiment le commun des mortels, mais sutout, il confesse ne pas être à l'aise avec javascript et donc (un poil long cette phrase) l'idée est simplement que si ça lui pète une erreur, il viendra le dire et on saura lui répondre alors, n'est il pas ;)

Si, tu peux avoir des erreurs à l'open' (toujours mes tests en local) et peut-être ailleurs je n'ai pas fait le tour de la question, je me borde simplement.
07/01/2015, 15h31
fripou

Je viens de tester et j'ai bien dans le 'responseText' mes données.
Il me reste plus qu'a comprendre comment je peux faire ca avec sapui mais c'est gagner car comme tu as dis lysandro c'est ma premiere expérience en javascript et donc je galère pas mal ^^
07/01/2015, 15h46
Bovino

Bon, désolé de dévier un peu du post d'origine, mais lysandro, pour tester des appels AJAX en local, je te conseillerais plutôt d'utiliser un serveur local (type WAMP) plutôt qu'un appel à partir d'un file: qui risque de ne pas s'effectuer de la même façon que sur un serveur. ;)
D'autant que là, tu laisses à penser que ton code correspond à une façon habituelle de procéder ce qui est loin d'être le cas.

Bin, je connais encore moins sap.ui que toi ... mais j'essaierai ça dans un premier temps
Code:

1 2 3 var oModel = new sap.ui.model.json.JSONModel(); oModel.loadData("datacontacts.php",null,true); // charge les données en synchrone alert(oModel.getJSON()); // affiche ce qui a été récupéré
Cela étant que ça fonctionne ou pas, je te conseille de chercher des forums où on connait ce framework, j'ai atteint mes limites :/

edit: suite à la remarque pertinente de Bovino, le code de test correct pour une requête synchrone est
Code:

1 2 3 var oModel = new sap.ui.model.json.JSONModel(); oModel.loadData("datacontacts.php",null,false); // charge les données en synchrone alert(oModel.getJSON()); // affiche ce qui a été récupéré

07/01/2015, 15h57
Bovino

Je pense qu'il serait de toute façon utile de faire un point sur l'état actuel du code et sur ce qui ne fonctionne pas.
De même, utiliser la console (touche F12) pour nous donner les éventuels messages d'erreur.

Ceci dit, il y a des chances que ce soit lié au fait que tu récupères tes données via AJAX.
Voir : Un classique AJAX : utiliser les données au bon moment ! pour plus d'explications.
07/01/2015, 15h59
lysandro

@Bovino: Mm je comprends ce que tu veux dire ... Je pourrais utiliser une des vm où je dois bien avoir ça, plutot un LAMP d'ailleurs, mais ici je fais du support bénévole je n'ai pas envie de monter une vm qui met trois plombes à démarrer, pas plus que d'installer un WAMP pour un bout de code. J'ai quand même installé spécialement pour répondre aux questions, une nouvelle version de ffx, c'est dire ... :D

Maintenant si tu penses que le code est un mauvais exemple (il n'était là que pour un test) sens toi libre de le supprimer, l'aménager ou ce que tu veux, pas de problème en ce qui me concerne, il a rempli son office. Je peux le supprimer si tu préféres ?

J'avais déjà tester ce code :

Code:

1
2
3
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("datacontacts.php",null,true); // charge les données en synchrone
alert(oModel.getJSON()); // affiche ce qui a été récupéré

Et cela me renvoyais "{}". Merci quand même pour l'aide :) le soucis de ce framework c'est que les forums sont plus ou moins inexistant ^^

Je vais donc faire un point sur mes codes :
page datacontacts.php qui est maintenant fonctionnelle :

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
<?php
#Include the connect.php file
include('connect.php');
#Connect to the database
//connection String
$connect = mysqli_connect($hostname, $username, $password,$database)
or die('Could not connect: ' . mysqli_error($connect));
 
$aDate = array();
// get data and store in a json array
$query = "SELECT contacts.nom_contact, contacts.prenom_contact FROM contacts";
 
$result = mysqli_query($connect,$query) or die("SQL Error 1: " . mysqli_error($connect));
while ($row = mysqli_fetch_array($result)) {
   		$aData[] = array(
        'nom_contact' => $row['nom_contact'],
        'prenom_contact' => $row['prenom_contact']
		);
}
mysql_close($connect);
 
echo json_encode($aData);
 
?>

page index.php qui ne fonctionne pas :

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
<!DOCTYPE html>  
<html><head>  
    <meta name="description" content="UI5 table example with local JSON model" />
	<meta http-equiv='X-UA-Compatible' content='IE=edge' />
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>  
 
    <script id="sap-ui-bootstrap"
   src="resources/sap-ui-core.js"
   data-sap-ui-theme="sap_bluecrystal"
   data-sap-ui-libs="sap.ui.commons,sap.ui.table"></script> 
 
<script>  
// create the DataTable control
		var oTable = new sap.ui.table.Table({editable:false});
		// define the Table columns
		var oControl = new sap.ui.commons.TextView({text:"{nom_contact}"}); // short binding notation
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Nom"}), template: oControl, sortProperty: "nom_contact", filterProperty: "nom_contact", width: "100px"}));
		oControl = new sap.ui.commons.TextView({text:"{prenom_contact}"}); // more verbose binding notationt
		oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Prénom"}), template: oControl, sortProperty: "prenom_contact", filterProperty: "prenom_contact", width: "100px"}));
		// create a JSONModel, fill in the data and bind the Table to this model
		var oModel = new sap.ui.model.json.JSONModel();
		oModel.loadData("datacontacts.php",null,true); // charge les données en synchrone
		alert(oModel.getJSON()); // affiche ce qui a été récupéré
		oTable.setModel(oModel);
		oTable.bindRows("/modelData");
		// finally place the Table into the UI
		oTable.placeAt("contacts");
 
</script>
</head>
<body class='sapUiBody'>
    <div id='contacts'></div>
</body>
</html>

En tout cas merci pour l'aide ça me permet d'avancer pas à pas

07/01/2015, 16h21
Bovino

Code:

oModel.loadData("datacontacts.php",null,true); // charge les données en synchrone

:nono:

Si on en croit https://openui5.hana.ondemand.com/#d...JSONModel.html le paramètre true indique que la requête est bien asynchrone et qu'il est donc nécessaire soit de modifier ce paramètre, soit d'attendre la réponse pour traiter les données reçues, comme indiqué dans mon précédent lien. ;)

lysandro.
J'espère que tu ne te méprends pas sur mes remarques, il ne s'agit pas de dénigrer ce que tu fais, juste de faire remarquer que ce n'est pas la façon "standard" d'effectuer une requête AJAX. Mais ton aide est tout à fait appréciée. :ccool:
Pour ce qui est des tests en local, à partir du moment où un appel se fait généralement sur un serveur (pour appeler un script serveur type PHP), la présence d'un serveur local semble habituellement implicite. :)
07/01/2015, 16h25
lysandro

Citation:

Envoyé par Bovino

Si on en croit https://openui5.hana.ondemand.com/#d...JSONModel.html le paramètre true indique que la requête est bien asynchrone

Tu me crois si je te dis que je suis allé lire la doc, et que j'ai fais attention à ce que la requête soit synchrone pour éviter les problèmes (d'où le commentaire !) ... Quel c..! :D, vais aller me coucher ... Bien vu en attendant !
07/01/2015, 16h26
fripou

En effet si je passe le parramètre à true le alert(oModel.getJSON()); m'affiche les données elles sont donc bien récupérés. Par contre elles ne sont toujours pas dans mon tableau ^^
07/01/2015, 23h25
lysandro

Comme l'a fait remarquer Bovino, je me suis trompé, le paramètre doit-être à 'false' pour avoir une requête synchrone (qui attend les données).
Il faut essayer avec le moins de code possible et tester :?
09/01/2015, 08h38
fripou

Je ne comprend pas trop ce système "synchrone" "asynchrone" ... Et surtout pourquoi lorsque je suis en asynchrone le alert(oModel.getJSON()); me revoie bien les données alors qu'en synchrone non ?
09/01/2015, 16h50
lysandro

synchrone: lors d'une requête synchrone, tu récupères la main dans ton code quand la réponse est reçue. Donc, tu bloques le déroulement du programme.
asynchrone: la requête est envoyée, tu récupères la main tout de suite mais la réponse n'est pas forcémment reçue. Donc, il faut enregistrer ce qu'on appelle un 'callback' qui est déclenché par le processus de requête/réponse quand il a reçu les données.

Les méthodes pour enregistrer les 'callback's sont définis dans https://openui5.hana.ondemand.com/do...del.Model.html, dont hérite sap.ui.model.JSONModel : attachRequestCompleted, attachRequestFailed, ... N'ayant fait aucun test, je ne sais pas ni comment, ni s'il faut les utiliser. Dans ma petite tête, vu la forme du framework, j'avais l'impression que c'était géré par les composants eux mêmes, mais c'est peut-être une grossière erreur.

Pour ta question: pourquoi ça marche en asynchrone et pas en synchrone, aucune idée ...

Bon, j'ai fais un test (en local :/ - Firefox: 31, OpenUI5: 1.24.5), je te mets le code utilisé (le tien à peu de choses)

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
<!DOCTYPE html>  
<html><head>  
    <meta name="description" content="UI5 table example with local JSON model" />
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>  
 
    <script id="sap-ui-bootstrap" src="scripts/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.ui.commons,sap.ui.table"></script> 
 
 
 
<script>  
        // create the DataTable control
        var oTable = new sap.ui.table.Table({editable:false});
        // define the Table columns
        var oControl = new sap.ui.commons.TextView({text:"{nom_contact}"}); // short binding notation
        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Nom"}), template: oControl, sortProperty: "nom_contact", filterProperty: "nom_contact", width: "100px"}));
        oControl = new sap.ui.commons.TextView({text:"{prenom_contact}"}); // more verbose binding notationt
        oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Prénom"}), template: oControl, sortProperty: "prenom_contact", filterProperty: "prenom_contact", width: "100px"}));
 
        // create a JSONModel, fill in the data and bind the Table to this model
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.loadData("datacontacts.php");
 
        oTable.setModel(oModel);
        oTable.bindRows("/modelData");
 
        // finally place the Table into the UI
        oTable.placeAt("contacts");
</script>
</head>
<body class='sapUiBody'>
    <div id='contacts'></div>
</body>
</html>

Le script de sap.ui n'est pas chargé à partir du même emplacement mais cela n'a aucun impact, juste mon installation est différente.

J'ai rajouté le 'oModel.loadData', et j'ai créé un fichier local appellé 'datacontacts.php' dont le contenu est :

Code:

1
2
3
4
{"modelData": [
    {"nom_contact": "Doe", "prenom_contact": "John"},
    {"nom_contact": "Doe", "prenom_contact": "Jane"}
]}

Comme en plus je ne connais pas JSON, j'ai un peu tatonné mais bref, résultat j'ai un tableau avec des lignes contenant les valeurs du fichier 'datacontacts.php'.
Au vu des données, je pense qu'il ne te manquait en fait que la racine 'modelData' que tu lies dans 'bindRows'.

A partir de là, si ca fonctionne aussi chez toi, tu pourras essayer de revenir à ton écriture initiale, i.e. sans le 'loadData' pour voir.

12/01/2015, 10h18
fripou

Merci lysandro grâce à ton exemple j'ai réussi à faire marcher mon cas.

En visualisant ta page "datacontacts.php" j'ai remarqué qu'elle renvoyait les data au format

Code:

{"Data": [ {"nom_contact": "Doe", "prenom_contact": "John"}, {"nom_contact": "Doe", "prenom_contact": "Jane"} ]}

Or ma page "datacontacts.php" renvoyait avec le json_encode($aData); des données de la forme

Code:

[{"nom_contact": "Doe", "prenom_contact": "John"}, {"nom_contact": "Doe", "prenom_contact": "Jane"} ]

J'ai donc du ajouté dans le écho du json_encode($aData) la chaîne {"Data": et mettre à la fin }
Mon renvoie de données dans datacontacts.php devient donc

Code:

echo '{"aData":'.json_encode($aData).'}';

Je vous remercie grandement de votre aide je vais pouvoir avancer maintenant que j'ai un template qui marche :)