Modélisation file d'attente de commande avec html/ajax/mysql [Résolu]

soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 29 juil. 2010 à 05:10 - Dernière réponse : PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention
- 3 août 2010 à 22:25
Salut à tous, je souhaiterai développer une file de commande (FIFO premier entré, premier sorti).
J'ai une table Mysql (ID++(n°commande)|Date|Nom|Prénom|adresse|descriptif|prix|statut (attente/préparation/livraison)) que je souhaiterai afficher dans une table avec pour la partie :

user: ajout (ajax) des nouvelles entrées, rafraichissement des statuts des autres et pour la partie
admin: pareil que user + possibilité suppression, changement du statut, possibilité modification, possibilité création.

J'ai pensé pour se faire utiliser de l'Ajax, Php et Xml. Le php1 à chaque modification de la table Mysql ,recréera un fichier Xml (pour évité trop de charge serveur) et enverra un signal à la page Html avec Ajax qui à son tour interrogera le Xml, construira la table(html) et actualisera les entrées.

Pour la partie admin, pareil mais pour la gestion + un php2 qui récupérera les POST d'un formulaire envoyé par Ajax et actualisera la table Mysql.

Avant de me lancer dans le code, je voulais avoir des avis concernant la technique utiliser ici, qu'en pensez vous ? Je suis persuader qu'il existe mile autres façon de faire plus simple tout en gardant cet aspect "ressource serveur minim" ...
Afficher la suite 

Votre réponse

19 réponses

Meilleure réponse
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 3 août 2010 à 21:25
3
Merci
corrigeons pour commencer un erreur dans la génération du code de ta table
for (i = 0; i < count; i++) {
  html += '<tr>'; // ouverture de la balise
  ...bla bla...
  html += '</tr>'; // ERREUR ICI fermer la balise
}

donc ce sont tes fonctions montre et cache qui posent problème !

à quoi sert le
if( i == false)
vu qu'il y a alternance entre le montre et le cache d'une part
et d'autre par tu utilises la même variable pour c'est test et pour ta boucle lors de la génération de la table
for(i = 0; i < count; i++) {
en absence de mot clé var elle est considérée comme globale, donc c'est la même, ton problème vient de là...

;O)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 96 internautes ce mois-ci

Commenter la réponse de PetoleTeam
soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 31 juil. 2010 à 17:21
0
Merci
Pour le moment tout fonctionne à peut près pas mal, sauf que là je sèche, je voudrai caché la description (Desc) de toute les entrées et après un hover affiché le Desc correspondant. J'ai essayé avec jquery mais j'arrive pas. Avez vous une idée de la marche à suivre svp ?

function charge() { 
rand = Math.random();
var xhr = getXMLHttpRequest();

var url = "file2.xml'a="+escape(rand);
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(null);

xhr.onreadystatechange = function () {
if(xhr.readyState 4 && xhr.status 200) {
response     = cleanXML(xhr.responseXML.documentElement);
var items    = response.getElementsByTagName("item");
var html     = '';
count        = items.length;
for(i = 0; i < count; i++) {
html += '
'+'N°' + items[i].getElementsByTagName("ID")[0].firstChild.nodeValue + '
'+'
 Commande : ' + items[i].getElementsByTagName("Desc")[0].firstChild.nodeValue + '
'+'
 Prix : ' + items[i].getElementsByTagName("Prix")[0].firstChild.nodeValue + ' €
'+'
';
}
document.getElementById('content').innerHTML = html;
}
}
}
charge();
window.onload=function()
{
setInterval('charge()',2000);
}; 
-->
</script>



</html>
Commenter la réponse de soumsoumdu06
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 31 juil. 2010 à 23:25
0
Merci
Bonjour,
J'ai essayé avec jquery mais j'arrive pas.
pas obligatoire du tout !

tu mets en display:none puis pour l'affichage tu passes en display:block ou display:inline suivant le cas...
;O)
Commenter la réponse de PetoleTeam
soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 1 août 2010 à 06:07
0
Merci
Salut, j'ai mis à l'écart pour le moment jquery mais ca marche toujours pas. Quand je supprime ca et que je le code en html manuellement, ca marche mais pas quand j'appelle cette fonction:

xhr.onreadystatechange = function () {
if(xhr.readyState 4 && xhr.status 200) {
response     = cleanXML(xhr.responseXML.documentElement);
var items    = response.getElementsByTagName("item");
var html     = '';
count        = items.length;

for(i = 0; i < count; i++) {
html +='----
';
html +='';
html +='Descriptif, ';
html +='
';
}
html +='
';
document.getElementById('content').innerHTML = html;
}
}
Commenter la réponse de soumsoumdu06
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 1 août 2010 à 09:15
0
Merci
Bonjour,
Quand je supprime ca et que je le code en html manuellement, ca marche mais pas...
vérifies que le code est le même entre l'appel de la fonction et l'écriture directe

Il serait intéressant que tu nous montres ce qu'il y a dans tes fonctions cache et montre, l'appel de montre paraissant surprenante de par le paramètre passé.

Il apparait également que dans l'élément avec ID="content" tu n'auras que la dernière récupération de par la façon dont tu écris dedans, document.getElementById('content').innerHTML = html, écrasant ce qui ce trouve déjà à l'intérieur...
;O)
Commenter la réponse de PetoleTeam
soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 1 août 2010 à 15:18
0
Merci
Voilà les fonctions :
<script type="text/javascript">
function GetId(id) { return document.getElementById(id); } 
var i=false; 
function move(e) 
{ 
if(i) 
{ 
if (navigator.appName!="Microsoft Internet Explorer") 
{ GetId("curseur").style.left=e.pageX + 5+"px"; GetId("curseur").style.top=e.pageY + 10+"px"; } 
else 
{ 
if(document.documentElement.clientWidth>0) 
{ GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px"; GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px"; } 
else 
{ GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px"; GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px"; } 
} 
} 
} 
function montre(text) 
{ 
if(i==false) 
{ GetId("curseur").style.visibility="visible"; GetId("curseur").innerHTML = text; i=true; 
} 
} 
function cache()
{ 
if(i==true) 
{ GetId("curseur").style.visibility="hidden"; i=false; 
} 
} 
document.onmousemove=move;</script>



Ajouter ce style css :
<style type="text/css">
.info{
width:400px;
text-align: justify;
position: absolute;	
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font-family: Arial;
font-size: 11px;
background-color: RED;
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
filter: alpha(opacity=80);
-moz-border-radius:9px;
}</style>


Et ces div dans le body :




');">Descriptif




La div content sera vide, là c'est pour vous montré ce que je veux à peut prés avoir, je voudrai que ce soit la fonction charge() d'ajax qui génère tout le content (un tableau rafraichi toute les 2 secondes)
Commenter la réponse de soumsoumdu06
soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 1 août 2010 à 21:00
0
Merci
J'ai rassemblé dans un .js:

function getXMLHttpRequest() {
var xhr = null;
if(window.XMLHttpRequest) xhr = new XMLHttpRequest();
else if(window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else xhr = false;
return xhr;
}
/*------------------------------------------------------------*/
function nodeCleaner(n) {
if(!n.data.replace(/\s/g,'')) n.parentNode.removeChild(n);
}
/*------------------------------------------------------------*/			
function cleanXML(docElement) {
var node = docElement.getElementsByTagName('*');
for(i = 0; i < node.length; i++) {
a = node[i].previousSibling;
if(a && a.nodeType == 3) nodeCleaner(a);
b = node[i].nextSibling;
if(b && b.nodeType == 3) nodeCleaner(b);
}
return docElement;
}
/*------------------------------------------------------------*/
function GetId(id) { return document.getElementById(id); } 
var i=false; 
function move(e) 
{ 
if(i) 
{ 
if (navigator.appName!="Microsoft Internet Explorer") 
{ GetId("curseur").style.left=e.pageX + 5+"px"; GetId("curseur").style.top=e.pageY + 10+"px"; } 
else 
{ 
if(document.documentElement.clientWidth>0) 
{ GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px"; GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px"; } 
else 
{ GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px"; GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px"; } 
} 
} 
}
/*------------------------------------------------------------*/
function montre(text) 
{ 
if(i==false) 
{ GetId("curseur").style.visibility="visible"; GetId("curseur").innerHTML = text; i=true; 
} 
}
/*------------------------------------------------------------*/
function cache()
{ 
if(i==true) 
{ GetId("curseur").style.visibility="hidden"; i=false; 
} 
} 
document.onmousemove=move;

/*------------------------------------------------------------*/		
function charge() { 
rand = Math.random();
var xhr = getXMLHttpRequest();

var url = "file2.xml'a="+escape(rand);
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(null);

xhr.onreadystatechange = function () {
if(xhr.readyState 4 && xhr.status 200) {
response     = cleanXML(xhr.responseXML.documentElement);
var items    = response.getElementsByTagName("item");
var html     = '';
count        = items.length;
for(i = 0; i < count; i++) {
html +='----
';

html +='';
html +='mmmmmmmmmmm, ';
html +='
';
}
html +='
';
document.getElementById('content').innerHTML = html;
}
}
}
/*------------------------------------------------------------*/
charge();
window.onload=function()
{
setInterval('charge()',2000);
}; 
Commenter la réponse de soumsoumdu06
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 2 août 2010 à 09:31
0
Merci
Bonjour,
ce donc ta fonction charge qui bug !
il est soufaitable de faire dans l'ordre
//-- Fonction a excecuter a reception OK
xhr.onreadystatechange = function () {
  //-- ce qu'il y a à faire
}
//-- Requete asynchrone
xhr.open("GET", url, true);
//-- Envoie de la requete
xhr.send(null);

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
s'utilise lors d'une méthode POST

;O)
Commenter la réponse de PetoleTeam
soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 3 août 2010 à 12:39
0
Merci
J'ai essayé mais toujours pas ... Tu ferai comment toi ?
Commenter la réponse de soumsoumdu06
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 3 août 2010 à 15:21
0
Merci
plusieurs questions
- quel navigateur utilises tu ?
- si tu mets une alert( xhr.responseText) obtiens tu le fichier, on ne sait jamais ?
- si tu mets une alert( items.length) qu'obtiens tu ?
- as tu bien respecté l'ordre des méthodes de l'objet xhr ?
;O)
Commenter la réponse de PetoleTeam
soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 3 août 2010 à 17:43
0
Merci
- firefox et ie

- alert( xhr.responseText) mon xml:
<?xml version="1.0" encoding="UTF-8" ?>

<commande>



1

<Desc>test1</Desc>

12







2

<Desc>test2</Desc>

78







3

<Desc>test3</Desc>

34





</commande>


- items.length: 3
Commenter la réponse de soumsoumdu06
soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 3 août 2010 à 17:46
0
Merci
Si je force le count à 1 ca marche niquel, mais au delà, ca ne marche plus: exemple simplifier d'un alert(html) avant l'envoi avec count à 2 :
mmmmmmmmmmm, ----
mmmmmmmmmmm
Commenter la réponse de soumsoumdu06
soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 3 août 2010 à 17:56
0
Merci
Je trouve pas le edit ...

Donc le souci vient de la table générer par ajax, si il y a qu'1 <tr> ca marche, si il y en a plus, ca plante mais si je récupère l'html générer avec plus d'un et que je le met manuellement dans la div "content" ca marche ... Une idée ?
Commenter la réponse de soumsoumdu06
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 3 août 2010 à 19:39
0
Merci
le code ci dessous fonctionne bien...
var html = '';
var count = items.length;  // ajout de var, c'est plus clean !
for (i = 0; i < count; i++) {
html += '----
'; // suppression du BR qui n'a rien à faire ICI
html += '';
html += 'Descriptif, ';
html += '----
'; // suppression du BR qui n'a rien à faire ICI
}
html += '
';
document.getElementById('content').innerHTML = html;


quant tu dis que cela plante de quoi parles tu exactement ?
;O)
Commenter la réponse de PetoleTeam
soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 3 août 2010 à 20:44
0
Merci
Non marche pas ... Le fait d'avoir le descriptif au passage de la souris sur toute la cellule correspondante . Essai avec for (i = 0; i < 1; i++) là ca marchera . Jcomprend vraiment pas pourquoi.
Commenter la réponse de soumsoumdu06
soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 3 août 2010 à 20:49
0
Merci
Générer un seul donne ca :
Descriptif

ca sa marche
Générer 3 entrer donne ca :
Descriptif, ----
----
Descriptif, ----
----
Descriptif


Mais là le onmouseover marche plus ... mais si je copie le code dans la div manuellement, ca marche que ce soit à une ou 3 entrées. Bizar bizar ...
Commenter la réponse de soumsoumdu06
soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 3 août 2010 à 20:51
0
Merci
je récupère les codes via un alert html juste aprés le innerHTML.
Commenter la réponse de soumsoumdu06
soumsoumdu06 13 Messages postés lundi 8 novembre 2004Date d'inscription 3 août 2010 Dernière intervention - 3 août 2010 à 21:47
0
Merci
Merci ca marche :):):) ENFIN ... Pour des étourderies ... j'y crois pas lol un / et tout marche ...
Commenter la réponse de soumsoumdu06
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 3 août 2010 à 22:25
0
Merci
je ne pense pas que cela soit le / qui posait problème, les navigateurs corrigent tous les jours ce genre d'erreur.

l'incomplète déclaration de la variable i me semble bien plus gênante...
;O)
Commenter la réponse de PetoleTeam

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.