Masquer un tableau lors du demarrage ,et le manipuler avec une authentification [Résolu]

[execrable]

bonjour ,j'ai crée un tableau d'annuaire (grid) avec un boutton ajouter qui fait apparaitre un formulaire de saisi

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

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

[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);
		}
	});

[execrable]

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

[vermine]

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.

[execrable]

messieurs merci pour votre aide

[vermine]

Au plaisir.

Si votre problème est résolu, n'oubliez pas de cliquer sur le bouton qui se trouve en bas (au centre) de la discussion.

[Daniel_Gibot]

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

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

[execrable]

Envoyé par Daniel_Gibot

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

Code :

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

merci d'avance

[Daniel_Gibot]

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'
 
		}
 
 
]}