Discussion :

[lingenieur]

Je travail sur une application, mais le problème c'est que je suis débutant en javascript (Jquery, Ajax).
Je fais ce post en espérant qu'ensemble nous pourrons relever ce défi. Je compte sur votre aide car je ne sais par ou commencer

1-La page présente en premier lieu la liste des services


2- Lorsqu'on clique sur Ajouter, on a la liste des employer du service


Lorsqu'on click sur Supprimer qui est en face de service il déplace le service dans la liste des services plus haut et faire disparaitre les employes de ce service.
Lorsqu'on Click sur Ajouter qui est devant service, Il ajoute tous les employés du service au tableau Liste de diffusion
Lorsqu'on click sur Ajouter qui est devant la liste des employés, ces employés selectionner sont déplacés dans le tableau Liste de diffusion

3-Au lieu de Ajouter, c'est Supprimer


Lorsqu'on clique sur Supprimer, cet employé est déplacer dans le tableau Liste des employés par service.
Lorsqu'on Click sur Envoyer, il récupère tous les employés présent dans la table Liste de diffusion, les enregistre dans la table assigner et leur envoie un mail (Notification), Ceux qui n'ont pas pu être traités demeurent dans le tableau, jusqu'à ce qu'ils soient traités.

Ceux qui ont été traités ne sont plus dans le tableaux, de sorte à ceux qu'on puissent savoir ceux qui ont été enregistrés et notifiés.

Lorsque toutes les données on été traitées, le tableau se vide et un message de réussite est afficher (10 secondes).

En clair c'est le travail qui m'a été assigner.

Merci de m'aider.

[vandenn3]

Salut,

Je te conseillerais de commencer à réfléchir à la structure de l'application: les différentes listes à afficher dans le html, les fonctions javascript qu'il faudra écrire pour chaque action,...
Il faut dégrossir le projet en petites parties.

Ton appli dois utiliser une base de donnée ?

[lingenieur]

je travail avec Mysql

[vandenn3]

D'accord, pourquoi ne pas commencer par créer les tables dans la base de donnée et les remplir?

Enfin, peut être que tu a déja fait certaines choses.. a-tu des questions précises ?

[lingenieur]

Au fait, j'ai déjà la liste des service, mon problème c'est comment faire la liste des employés du service lorque je click sur Ajouter
tout ceci en ajax

[vandenn3]

Si la liste des employés est dans ta base de donnée, tu peux par exemple faire une requête de type GET vers une page php/asp pouvant communiquer avec la bdd:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function clickOnService(idService) {
    var ajax = new XMLHttpRequest(); //on instancie un nouvel objet ajax
    ajax.onreadystatechange = function() { //fonction appelée à chaque changement du statut de la requète
        if (ajax.readyState == 4 && ajax.status == 200) { //vérifie si la requète est terminée et avec succès (on a reçu les données)
            var reponse = JSON.parse(ajax.responseText); //->si la réponse est au format JSON, reponse sera un objet javascript
            //traitement des données reçues ici, par exemple remplir un tableau html
        }
    };
    ajax.open('GET', 'mapage.php?requete=demander_liste_employes&idservice='+idService, true); //paramétrer la requète ajax: envoie une requète de type GET, asynchrone
    ajax.send(null); //envoie la requète
 
}

[lingenieur]

visionne la deuxième image que j'ai posté pour voir si ton script peut faire pareil.
Aussi, oui les employés sont dans une base de données Mysql
Merci

[vandenn3]

Oui il peut faire pareil. ce que j'ai posté est un morceau du script, il faut compléter à l’endroit ou on a reçu les données (voir le commentaire): insérer des lignes dans un tableau html.

par exemple si tu a:

Code :

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

1
2
3
4
5
6
7
8
 
<table id='tableau_employers'>
    <tr>
        <td>élément 1</td>
        <td>élément 2</td>
        <td>élément 3</td>
    </tr>
</table>

en javascript tu peux ajouter une ligne à ce tableau:

Code :

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

1
2
3
4
5
6
 
var contenu = ["texte1", "texte2", "texte3"]; //les données
 
var newTR = document.createElement("tr"); //je crée l'élément
newTR.innerHTML = "<td>"+contenu[0]+"</td> <td>"+contenu[1]+"</td> <td>"+contenu[2]+"</td>"; //je défini son contenu
document.getElementById("tableau_employers").appendChild(newTR); //je l'ajoute au tableau

vois tu comment combiner le code ajax et celui-ci pour afficher la liste des membres d'un service?

[lingenieur]

Je n'arrive pas à agencer l'Ajax au Javascript, il est bon de noter que tout se passe dans la même page.

Si je peux avoir le script complet cela m'aiderait beaucoups

[vandenn3]

voila les codes rassemblés:

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
 
<html>
<head>
<title>test</title>
</head>
<body>
 
  <table id='tableau_employers'>
    <tr data-identifiant_service='1'>
      <td>élément 1</td>
      <td>élément 2</td>
      <td>élément 3</td>
    </tr>
    <tr data-identifiant_service='2'>
      <td>élément 1</td>
      <td>élément 2</td>
      <td>élément 3</td>
    </tr>
  </table>
  <script src='http://code.jquery.com/jquery-1.11.2.min.js'></script> <!-- j'utilise la bibliothèque jquery pour les évènements; on peux faire sans mais c'est plus rapide -->
  <script>
    function clickOnService(idService) {
      var ajax = new XMLHttpRequest(); //on instancie un nouvel objet ajax
      ajax.onreadystatechange = function() { //fonction appelée à chaque changement du statut de la requète
          if (ajax.readyState == 4 && ajax.status == 200) { //vérifie si la requète est terminée et avec succès (on a reçu les données)
              var reponse = JSON.parse(ajax.responseText); //->si la réponse est au format JSON, reponse sera un objet javascript
              //traitement des données reçues ici, par exemple remplir un tableau html:
 
              for(var i=0,newTR,len=reponse.length;i<len;i++) { //je parcours un éventuel tableau de données, cela dépend comment tu compte afficher les données sur la page php/asp (pour php, regarde la fonction json_encode() )
                  newTR = document.createElement("tr"); //je crée l'élément
                  newTR.innerHTML = "<td>"+contenu[i][0]+"</td> <td>"+contenu[i][1]+"</td> <td>"+contenu[i][2]+"</td>"; //je défini son contenu
                  document.getElementById("tableau_employers").appendChild(newTR); //je l'ajoute au tableau
 
              }
 
          }
      };
      ajax.open('GET', 'mapage.php?requete=demander_liste_employes&idservice='+idService, true); //paramétrer la requète ajax: envoie une requète de type GET, asynchrone
      ajax.send(null); //envoie la requète
    }
 
    //évènement click sur chaque TR du tableau des services
    $("table#tableau_employers tr").click(function(){
        clickOnService(parseInt($(this).attr("data-identifiant_service")));
    });
  </script>
</body>
</html>

voila, mais je ne vais pas écrire tout ton programme non plus

[lingenieur]

je teste et te reviens sous peu

[lingenieur]

voici comment je récupère la liste des services

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
<div style="margin-top:10px">
				<div class="row">
					<div class="col-md-12">
						<div class="widget box">
							<div class="widget-header">
								<h4><i class="icon-reorder"></i> Liste du personnel</h4>
								<div class="toolbar no-padding">
									<div class="btn-group">
										<span class="btn btn-xs widget-collapse"><i class="icon-angle-down"></i></span>
									</div>
								</div>
							</div>
							<div class="widget-content no-padding">
								<table class="table table-striped table-bordered table-hover table-checkable datatable" data-horizontal-width="195%">
									<thead>
										<tr>
											<th class="checkbox-column">
												<input type="checkbox" class="uniform">
											</th>
											<th>Id</th>
											<th>Libelle</th>
 
											<th>Actions</th>
										</tr>
									</thead>
									<tbody>
									         <?php
                                                                 $objs_service= new Services();
                                                     $liste_service=$objs_service->getlist();
                                                 while($rsr=$liste_service->fetchObject()){
                                             ?>
										<tr>
											<td class="checkbox-column">
												<input type="checkbox" class="uniform">
											</td>
											<td><?php echo $rsr->idservice ?></td>
											<td><?php echo $rsr->libelleservice ?></td>
 
											<td><span class="label label-success"><a href="test.php?idservice=<?php echo $rsr->idservice ?>">Ajouter</a></span></td>
										</tr>
										<?php
                                                                                }
                                                                                ?>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				</div>

il fonctionne correctement.

lorque j'y ajoute ton code ça ne fonctionne pas, j'ai manqué quelque chose

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
<div style="margin-top:20px">
				 <table id='tableau_employers'>
    <tr data-identifiant_service='1'>
      <td>élément 1</td>
      <td>élément 2</td>
      <td>élément 3</td>
    </tr>
    <tr data-identifiant_service='2'>
      <td>élément 1</td>
      <td>élément 2</td>
      <td>élément 3</td>
    </tr>
  </table>
  <script src='http://code.jquery.com/jquery-1.11.2.min.js'></script> <!-- j'utilise la bibliothèque jquery pour les évènements; on peux faire sans mais c'est plus rapide -->
  <script>
    function clickOnService(idService) {
      var ajax = new XMLHttpRequest(); //on instancie un nouvel objet ajax
      ajax.onreadystatechange = function() { //fonction appelée à chaque changement du statut de la requète
          if (ajax.readyState == 4 && ajax.status == 200) { //vérifie si la requète est terminée et avec succès (on a reçu les données)
              var reponse = JSON.parse(ajax.responseText); //->si la réponse est au format JSON, reponse sera un objet javascript
              //traitement des données reçues ici, par exemple remplir un tableau html:
 
              for(var i=0,newTR,len=reponse.length;i<len;i++) { //je parcours un éventuel tableau de données, cela dépend comment tu compte afficher les données sur la page php/asp (pour php, regarde la fonction json_encode() )
                  newTR = document.createElement("tr"); //je crée l'élément
                  newTR.innerHTML = "<td>"+contenu[i][0]+"</td> <td>"+contenu[i][1]+"</td> <td>"+contenu[i][2]+"</td>"; //je défini son contenu
                  document.getElementById("tableau_employers").appendChild(newTR); //je l'ajoute au tableau
 
              }
 
          }
      };
      ajax.open('GET', 'test.php?idservice='+idService, true); //paramétrer la requète ajax: envoie une requète de type GET, asynchrone
      ajax.send(null); //envoie la requète
    }
 
    //évènement click sur chaque TR du tableau des services
    $("table#tableau_employers tr").click(function(){
        clickOnService(parseInt($(this).attr("data-identifiant_service")));
    });
  </script>

Je pense que le problème se trouve au niveau de la recuperation des données dans la table employé.

Merci

[vandenn3]

Le code que j'ai écris effectue une action lorsque l'on clic sur Ajouter. Or Ajouter est ici un lien et te redirige vers une page. (qui pourrait d'ailleurs afficher le tableau des employés)

Mais faire ce que tu veux peut aussi s'effectuer avec un lien; dans ce cas pas besoin d'ajax...
Il suffit que ta page test.php affiche la liste des employés, à partir de l'id du service.

[lingenieur]

merci, je fais comme ça