[AJAX] Saisie d'éléments dans un formulaire et mise à jour d'une autre page en temps réel

**Surfsp33** · 16/06/2010, 21h09

Bonjour,

Je viens de démarrer le développement d'une application PHP qui permettra à mon entreprise d'être informé en temps réel d'une nouvelle intervention.

Pour faire simple, nous avons une plateforme téléphonique qui aurait la charger de saisir les données nécessaires à l'intervention dans un formulaire HTML/PHP (alerte.php) et de l'envoyer.

Dans les différentes agences, la page réception.php serait pré-chargé dans la navigateur et dès qu'une personne valide le formulaire alerte.php, celui-ci enverrai l'intervention dans la bonne agence et surtout mettrai à jour la page réception.php par un système de rafraichissement Ajax.

J'ai déjà deux squelettes de page saisie.php et reception.php

saisie.php :

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
51
52
53
54
55
56
57
58
59
60
61
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="fr" />
<title>Saisie - Alerte</title>
<meta name="description" content="" />
<meta name="keywords" lang="fr" content="" />
<meta name="category" content="" />
<meta name="revisit-after" content="" />
<meta name="author" lang="fr" content="" />
<meta name="copyright" content="" />
<meta name="generator" content="Notepad++" />
<meta name="identifier-url" content="" />
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 
<div>
 
<p class="barre_titre_haut"></p>
<h2>Saisir une alerte</h2>
<p class="barre_titre_bas"></p>
<br />
<form method="post" action="reception.php">
 
<p class="contact">Nom :<br />
<input type="text" name="nom" size="30" /><br /><br />
 
<p class="contact">Prénom :<br />
<input type="text" name="prenom" size="30" /><br /><br />
 
<p class="contact">Adresse :<br />
<input type="text" name="adresse" size="60" /><br /><br />
 
<p class="contact">Commune :<br />
<input type="text" name="adresse" size="60" /><br /><br />
 
<p class="contact">Nature de l'appel :<br />
<input type="text" name="nature" size="40" /><br /><br />
 
<br /><br />
 
Renseignements complémentaires<br />
<textarea name="message" rows="5" cols="50"></textarea>
<br /><br />
 
<br /><br />
<input class="send" type="submit" value="Envoyer" /><br />
</p>
 
 
</form>
 
 
</div>
 
</body>
</html>

reception.php :

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
51
52
53
54
55
56
57
58
59
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="fr" />
<title>Saisie - Alerte</title>
<meta name="description" content="" />
<meta name="keywords" lang="fr" content="" />
<meta name="category" content="" />
<meta name="revisit-after" content="" />
<meta name="author" lang="fr" content="" />
<meta name="copyright" content="" />
<meta name="generator" content="Notepad++" />
<meta name="identifier-url" content="" />
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 
 
<div>
 
<h2>Réception Alerte</h2>
<p class="barre_titre_bas"></p>
<br />
<form method="post" id="contact" action="<?php echo $_SERVER['REQUEST_URI'];?>">
 
<p class="contact">Nom :<br />
<input type="text" name="nom" size="30" /><br /><br />
 
<p class="contact">Prénom :<br />
<input type="text" name="prenom" size="30" /><br /><br />
 
<p class="contact">Adresse :<br />
<input type="text" name="adresse" size="60" /><br /><br />
 
<p class="contact">Commune :<br />
<input type="text" name="adresse" size="60" /><br /><br />
 
<p class="contact">Nature de l'appel :<br />
<input type="text" name="nature" size="40" /><br /><br />
 
<br /><br />
 
Renseignements complémentaires<br />
<textarea name="message" rows="5" cols="50"></textarea>
<br /><br />
 
</p>
 
 
</form>
<br />
 
</div>
 
</body>
</html>

Pensez-vous que cela est faisable facilement ?
J'ai de bonnes notions en HTML/PHP mais je n'en ai aucune ou très peu en Javascript/Ajax.
J'ai regardé plusieurs tutoriels que j'ai du mal à comprendre et qui ne reflète pas exactement ce dont j'aurai besoin.

**zenzo** · 17/06/2010, 13h00

plusieurs solutions s'offre à toi :
un refresh par html que tu mets dans ta page(<META http-equiv="Refresh" content="10"> (pour 10 secondes)
un refresh par ajax avec un intervalle que tu définis (prototype le fait ou tu fais une fonction avec un itervalle d'appel)
la solution la plus intérèssante mais plus difficile : ton serveur doit pouvoir faire du push et ta page ne récupère l'info que si elle existe lien de la technhttp://www.ape-project.org/ique :
A+

[AJAX] Saisie d'éléments dans un formulaire et mise à jour d'une autre page en temps réel

AJAX

Discussions similaires

Partager

Partager