Modélisation file d'attente de commande avec html/ajax/mysqlRésolu

Question

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

PetoleTeam · Accepted Answer

corrigeons pour commencer un erreur dans la génération du code de ta table for (i = 0; i < count; i++) { html += ''; // ouverture de la balise ...bla bla... html += ''; // 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)

soumsoumdu06 · Answer

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

PetoleTeam · Answer

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)

soumsoumdu06 · Answer

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

PetoleTeam · Answer

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)

soumsoumdu06 · Answer

Voilà les fonctions : Ajouter ce style css : 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)

soumsoumdu06 · Answer

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

PetoleTeam · Answer

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)

soumsoumdu06 · Answer

J'ai essayé mais toujours pas ... Tu ferai comment toi ?

PetoleTeam · Answer

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)

soumsoumdu06 · Answer

- firefox et ie - alert( xhr.responseText) mon xml: 1 test1 12 2 test2 78 3 test3 34 - items.length: 3

soumsoumdu06 · Answer

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

soumsoumdu06 · Answer

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 ?

PetoleTeam · Answer

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)

soumsoumdu06 · Answer

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.

soumsoumdu06 · Answer

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

soumsoumdu06 · Answer

je récupère les codes via un alert html juste aprés le innerHTML.

soumsoumdu06 · Answer

Merci ca marche :):):) ENFIN ... Pour des étourderies ... j'y crois pas lol un / et tout marche ...

PetoleTeam · Answer

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)

Modélisation file d'attente de commande avec html/ajax/mysql

19 réponses

Votre réponse