SQL dans Javascript

**Bovino** · 07/01/2015, 16h21

Code :

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

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

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.

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.

**lysandro** · 07/01/2015, 16h25

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..!

, vais aller me coucher ... Bien vu en attendant !

**fripou** · 07/01/2015, 16h26

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 ^^

**lysandro** · 07/01/2015, 23h25

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

**fripou** · 09/01/2015, 08h38

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 ?

**lysandro** · 09/01/2015, 16h50

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 ...

**lysandro** · 09/01/2015, 17h31

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 :

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
<!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 :

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

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.

**fripou** · 12/01/2015, 10h18

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 :

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

{"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 :

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

[{"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 :

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

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

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

SQL dans Javascript

JavaScript

Discussions similaires

Partager

Partager