Masquer un tableau lors du demarrage ,et le manipuler avec une authentification

Version imprimable

bonjour ,j'ai crée un tableau d'annuaire (grid) avec un boutton ajouter qui fait apparaitre un formulaire de saisi
http://img148.imageshack.us/img148/5580/gridw.png
voici mon code :

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
<div class="header form-area">
                <div class="searcharea">
                    <div dojoType="dijit.form.TextBox" type="text" id="search" name="search"></div>
                </div>
                <div class="right-button">
                    <div dojoType="dijit.form.Button" onclick="dijit.byId('dialogAdd').show()">Ajouter</div>
                    <div dojoType="dijit.form.Button" id="delete">Supprimer la s&eacute;l&eacute;ction</div>
                </div>
            </div>
            <div dojoType="dojox.grid.DataGrid" jsId="grid" store="store" structure="layout" query="{}" rowSelector="20px"></div>
            <div class="footer form-area">
                <div dojoType="dijit.form.Button" id="save" onclick="grid.store.save();">Sauvegarder les modifications</div>
            </div>
            <div dojoType="dijit.Dialog" id="dialogAdd" jsId="dialogAdd" title="Ajouter &agrave; l'annuaire">
                <table>
                    <tr>
                        <td><label for="name">code</label></td>
                        <td><input dojoType="dijit.form.ValidationTextBox" required="true" type="text" id="name" name="name"></td>
                    </tr>
                    <tr>
                        <td><label for="firstname">designation</label></td>
                        <td><input dojoType="dijit.form.ValidationTextBox" require="true" type="text" id="firstname" name="firstname"></td>
                    </tr>
                    <tr>
                        <td><label for="phone">prix</label></td>
                        <td><input dojoType="dijit.form.ValidationTextBox" require="true" type="text" id="phone" name="phone"></td>
                    </tr>
                </table>
                <button dojoType="dijit.form.Button" type="submit" id="add" class="my-button">Enregistrer</button>
            </div>

par ailleur jai crée un boutton pour s'authentifier
http://img602.imageshack.us/img602/3070/authentif.png*
avec comme code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div dojoType="dijit.form.Button" onclick="dijit.byId('dialogAdd2').show()">s'authentifier</div>
<div dojoType="dijit.Dialog" id="dialogAdd2" jsId="dialogAdd2" title="espace authentification">
                <table>
                    <tr>
                        <td><label for="name">login</label></td>
                        <td><input dojoType="dijit.form.ValidationTextBox" required="true" type="text" id="login" name="login"></td>
                    </tr>
                    <tr>
                        <td><label for="firstname">mot de passe</label></td>
                        <td><input dojoType="dijit.form.ValidationTextBox" require="true" type="text" id="mdp" name="mdp"></td>
                    </tr>
 
                </table>
                <button dojoType="dijit.form.Button" onclick="doAnimation(2);">s'authentifier</button>
            </div>

mes questions sont :
- comment faire disparaitre mon tableau(grid) ,lors du lancement de ma page html ,et afficher seulement mon boutton d'authentification ?(jai trouve la fct 'fadOut' mais j'ai pas su comment l'utiliser )
-afficher mon tableau depend de l'authentification ,en d'autres termes le grid ne sera affiché que lors d'un succés dauthentification ,sinon un message d'erreur s'affiche sur le dialog d'authentification meme ! comment implementer les tests d'authentification en se basant sur un fichier JSON ??

Code:

1
2
3
4
5
6
{ identifier: 'name1',
  label: 'name1',
  items: [
      { login:'ut1', mdp:'Alex'},
     { login:'ut2', mdp:'country'}
]}

merci d'avance pour votre aide !

22/12/2010, 15h17
Daniel_Gibot
Rebonjour,

Je pense qu'avec un style (display=none) ca devrait suffire. Tout dépend si tu souhaites que le code soit visible dans le source avant authentification...
Code:

1 2 <div id='header' class="header form-area" style='display:none;'>
Ensuite, au niveau de l'authentification, lorsque tu as le retour comme quoi le login et le mot de passe sont ok tu fais un display=block.

Pour ce qui est de l'authentification, il suffit de faire avec un xhrget ou xhrpost et d'analyser le retour comme expliqué dans ton autre post. Par contre, je n'ai jamais fait avec un fichier json. Mais je pense qu'il n'y a rien de bien complique. Je vais faire quelques tests.

Bon j'ai testé un ptit truc je pense que ca peut convenir.

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
 
//cree un objet store avec le contenu du json
var authStore = new dojo.data.ItemFileReadStore({
		jsId:'users',
		data: { items: [
					{ login:'ut1', mdp:'Alex'},
					{ login:'ut2', mdp:'country'}
				]}
                //ou
                //url:'monfichier.json'
	});
        //permet de lire le contenu du store
	authStore.fetch({
                //requete ou l'on va ajouter les valeurs saisies dans les champs
		query: {
				login:'ut1', //champ login
				mdp:'test'}, //champ mdp
                //a la fin de la recherche
		onComplete: function (items,request){
                        //on scanne le resultat contenu dans items
			for (i = 0; i < items.length; i++) {
			var item = items[i];
				alert(authStore.getValue(item, "login"));
			}
                        //si rien n'est trouve
			if(i==0){
				alert("mauvais login / mot de passe");
			}
		},
		onError : function (error,request){
			alert(error.message);
		}
	});

22/12/2010, 17h00
execrable

merci bcp ,ca marche parfaitement !
en cas de succés je dois rendre mon display=block ,comment pourrais-je le faire ?:oops:

Bonjour,

Dans ce cas là vous devez définir un else :
Code:

1 2 3 4 5 6 7 8 //si rien n'est trouve if(i==0){ alert("mauvais login / mot de passe"); }else{ document.getElementById("header").style.display = "block"; //dojo.byId("header").style.display = "block"; }
Je ne sais plus si la variante dojo.byId fonctionne de la même manière pour les style.

22/12/2010, 22h57
execrable

messieurs merci pour votre aide :ccool:
23/12/2010, 07h47
vermine

Au plaisir. ;)

Si votre problème est résolu, n'oubliez pas de cliquer sur le bouton :resolu: qui se trouve en bas (au centre) de la discussion.
23/12/2010, 08h56
Daniel_Gibot

Je n'avais pas précisé le "else" histoire de ne pas faire tout le code :)

Citation:

Je ne sais plus si la variante dojo.byId fonctionne de la même manière pour les style.

La variante fonctionne.

Et au plaisir :)

Citation:
Envoyé par Daniel_Gibot
Bon j'ai testé un ptit truc je pense que ca peut convenir.
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 //cree un objet store avec le contenu du json var authStore = new dojo.data.ItemFileReadStore({ jsId:'users', data: { items: [ { login:'ut1', mdp:'Alex'}, { login:'ut2', mdp:'country'} ]} //ou //url:'monfichier.json' }); //permet de lire le contenu du store authStore.fetch({ //requete ou l'on va ajouter les valeurs saisies dans les champs query: { login:'ut1', //champ login mdp:'test'}, //champ mdp //a la fin de la recherche onComplete: function (items,request){ //on scanne le resultat contenu dans items for (i = 0; i < items.length; i++) { var item = items[i]; alert(authStore.getValue(item, "login")); } //si rien n'est trouve if(i==0){ alert("mauvais login / mot de passe"); } }, onError : function (error,request){ alert(error.message); } });
bonsoir
je reviens sur ce sujet ,car j'ai une erreur au niveau de la creation d'un objet store avec le contenu du json !
en effet la creation d'un objet directement marche impec
Code:

1 2 3 4 ata: { items: [ { login:'ut1', mdp:'Alex'}, { login:'ut2', mdp:'country'} ]}
mais parcontre pour

Code:

url:'auth.json'

ca ne marche pas !
ca me sort l'erreur suivante

Code:

_4c is undefined

voici mon fichier json
Code:

1 2 3 4 5 6 7 8 9 10 11 { identifier: 'auth', label: 'auth', items: [ { "login":'ut1', "mdp":'Alex' } ]}
la premiere facon marche parfaitement ,mais j'ai besoin du fichier json ,car il me faut une fonction qui ecrit dans le fichier json (un formulaire d'ajout d'un nouveau compte) donc ajouter un login et un mdp au fichier Json via un formulaire . d'ailleur je serais reconnaissant si quelqun me montre comment le faire ,mais biensur aprés avoir resolu le premier problem:aie:

merci d'avance

Bonjour,

Tout d'abord, meilleurs vœux pour cette nouvelle année.

As-tu essayé sans mettre des doubles quotes ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 { identifier: 'auth', label: 'auth', items: [ { login:'ut1', mdp:'Alex' } ]}