begin process at 2012 05 29 14:04:17
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Function & Méthodes

 > 

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

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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

jeudi 29 juillet 2010 à 05:10:13 | Modélisation file d'attente de commande avec html/ajax/mysql

soumsoumdu06
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" ...
samedi 31 juillet 2010 à 17:21:11 | Re : Modélisation file d'attente de commande avec html/ajax/mysql

soumsoumdu06
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 ?

Code Javascript :
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 += '<div class="item">'+'<h1 style="display: inline";>N°' + items[i].getElementsByTagName("ID")[0].firstChild.nodeValue + '</h1>'+'<div class="Desc"style="display: inline";> Commande : ' + items[i].getElementsByTagName("Desc")[0].firstChild.nodeValue + '</div>'+'<div class="prix"style="display: inline";> Prix : ' + items[i].getElementsByTagName("Prix")[0].firstChild.nodeValue + ' ¤</div>'+'</div>';
		}
		document.getElementById('content').innerHTML = html;
	}
}
}
charge();
window.onload=function()
{
setInterval('charge()',2000);
}; 
-->
</script>
<div id="content"></div>
</body>
</html>
samedi 31 juillet 2010 à 23:25:50 | Re : Modélisation file d'attente de commande avec html/ajax/mysql

PetoleTeam

Membre Club
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)
dimanche 1 août 2010 à 06:07:42 | Re : Modélisation file d'attente de commande avec html/ajax/mysql

soumsoumdu06
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:

Code Javascript :
xhr.onreadystatechange = function () {
	if(xhr.readyState == 4 && xhr.status == 200) {
		response     = cleanXML(xhr.responseXML.documentElement);
		var items    = response.getElementsByTagName("item");
		var html     = '<table width="610" border="0" align="center">';
		count        = items.length;

	for(i = 0; i < count; i++) {
		html +='<tr>';
                html +='<td align="center" valign="middle" onMouseOut=" cache();" onMouseOver=" montre(\'<div align=left>'+items[i].getElementsByTagName("Desc")[0].firstChild.nodeValue+'</div>\');">';
		html +='Descriptif</td>';
                html +='</tr><br>';
		}
		html +='</table>';
		document.getElementById('content').innerHTML = html;
	}
}
dimanche 1 août 2010 à 09:15:01 | Re : Modélisation file d'attente de commande avec html/ajax/mysql

PetoleTeam

Membre Club
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)
dimanche 1 août 2010 à 15:18:39 | Re : Modélisation file d'attente de commande avec html/ajax/mysql

soumsoumdu06
Voilà les fonctions :
Code Javascript :
<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 :
Code HTML :
<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 :
Code HTML :
<div id="curseur" class="info"></div>
<div id="content">
<table width="610" border="0" align="center">
		<tr>
        <td align="center" valign="middle" onMouseOut=" cache();" onMouseOver=" montre('<div align=left>testtesttesttesttesttest</div></font>');">Descriptif
        </td>
        </tr><br>
</table>
</div>


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)
dimanche 1 août 2010 à 21:00:17 | Re : Modélisation file d'attente de commande avec html/ajax/mysql

soumsoumdu06
J'ai rassemblé dans un .js:

Code Javascript :
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     = '<table width="610" border="0" align="center">';
		count        = items.length;
		for(i = 0; i < count; i++) {
			  html +='<tr>';
		
        html +='<td align="center" valign="middle" onMouseOut=" cache();" onMouseOver=" montre(\'<div align=left>'+items[i].getElementsByTagName("Desc")[0].firstChild.nodeValue+'</div>\');">';
		html +='mmmmmmmmmmm</td>';
        html +='</tr><br>';
		}
		html +='</table>';
		document.getElementById('content').innerHTML = html;
	}
}
}
/*------------------------------------------------------------*/
charge();
window.onload=function()
{
setInterval('charge()',2000);
};
lundi 2 août 2010 à 09:31:01 | Re : Modélisation file d'attente de commande avec html/ajax/mysql

PetoleTeam

Membre Club
Bonjour,
ce donc ta fonction charge qui bug !
il est soufaitable de faire dans l'ordre
Code Javascript :
//-- 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)
mardi 3 août 2010 à 12:39:08 | Re : Modélisation file d'attente de commande avec html/ajax/mysql

soumsoumdu06
J'ai essayé mais toujours pas ... Tu ferai comment toi ?
mardi 3 août 2010 à 15:21:10 | Re : Modélisation file d'attente de commande avec html/ajax/mysql

PetoleTeam

Membre Club
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)

1 2

Cette discussion est classée dans : table, mysql, commande, html, ajax

Répondre à ce message

Sujets en rapport avec ce message

nom table html [ par milo2009 ] Salut,Je créer des table dans une boucle php, cependant, je voudrais que chaque table es des nom different (table1, table2...).Puis appel une fonction Comment modifier une base de donnée Mysql avec AJAX [ par overstone ] Bonjour,Je recherche un moyen simple pour gérer ma base de donnée avec AJAX J'ai réussi à créer mon interface à l'aide de PHP, tout marche parfaitemen Cacher son code HTML [ par rambc ] Existe-t-il un moyen simple de rendre son code HTML illisible par un humain via une commande JavaScript ? J'avais vu un exemple utilisant un codage et Modification champ mysql en Ajax (débutant) [AjaX + Javascript (et/ou PHP)] [ par astuces_jeux ] Bonjour,je suis en train de réalier un jeu virtuel d'élevage de dinosaure.Alors, le joueur doit nourrir son dinosaure.Pour le nourrir, il va dans la g redimensionner une table html ! [ par jimmy69 ] Salut salut,J'ai une page web (asp net) qui est envoyée au serveur et elle renvoit une page html avec un tableau et des colonnes ou l'on retrouve des Ajax et Javascript [ par DMK04 ] Bonjour à tous,je débute en Ajax, et je souhaiterais savoir une chose :Est-ce que l'on peu "importer" du nouveau code JavaScript via une "requête" Aja Difficulté d'afficher qq chose avec lien ds une table [ par jeanjeandada ] Bonjour Cher FOrum , (j'utilise les api de google) Voilà dans la balise body je déclare une table : <table border=1&g <td> qui change de taille en ajax [ par lowkey ] Salut à tous !J'ai un table du type :             En ajax, je rajoute des Récuperer un résultat en AJAX [ par FlasherBoy ] Bonjour,Je poste ici car je rencontre un probleme, je développe un site avec une fonctionnalité de vote. Je vous explique brievement le concept !La pa Ajax /php/Mysql [ par fraymed ] J'ai une liste déroulante qui est remplie à partir de bd MYSQL je veux remplir des autres listes à partir de cette liste dans la meme formulaire avec


Nos sponsors


Sondage...

Comparez les prix


Archos 7 home tablet - 2 Go
Entre 149€ et 159€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,312 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)