Salut à tous,
J'ai pas l' habitude de poster mais la je butte depuis plusieurs jours sur un problème AJAX;
Ca m'enlèverai une grosse épine du pied si quelqu'un aurais une solution car ce code fonctionne en partie sous firefox mais pas sous IE :-(
J'ai une base contenant 3 tables: JEU, PLATEFORME et STANDARD
Un jeu c'est juste un id avec un nom de jeu
Une plateforme c'est aussi un id avec un nom de plateforme (x-box, ps1..)
Un standard c'est juste le lien entre un jeu et 0 ou n plateformes
Il y a une page qui me permet de d'ajouter mes plateformes à un jeu, cette page ne pose aucun problème par contre dans une autre page j'essaie de pouvoir ajouter dynamiquement x lignes de jeu et choisir la plateforme parmis celle existantes pour ce jeu et pour ce jeu uniquement donc j'utilise AJAX. Il y a des centaines de jeux dans la base et 10 fois plus de standards...impossible de tout stocker dans une page ... AJAX semble être la solution à condition que j'y arrive.
Vous aller mieu comprendre avec ceci, je vous donne la création de la "base" (attention j'ai mis un user et un password à vous de le redefinir dans les pages php), des données et les 2 pages nécessaires : index.php et liste_ajax.php
En gros sous IE et Firefox, je peux ajouter mes lignes dynamiquement via javascript, là où sa bloque c'est que pour x lignes ajoutées correspond x standards différents, là ca fonctionne sous FF mais sous IE la liste reste desespérement vide, j'ai essayé avec un DIV mais comme il faudrait que je crée dynamiquement des DIV ca semble poser des problème avec INNERHTML, j' ai donc contourner cela en prenant l' id de ma balise select
Enfin mon dernier problème est que chaque fois que j'ajoute une ligne, je perd tous mes champs plateforme qui se réinitialise alors que je voudrai qu'il reste à la donnée selectionnée, là je pense que c'est un problème de code, mais je sèche aussi.
--
-- CREATION DE LA BASE DE DONNEE ET DU CONTENU
--
CREATE TABLE `jeu` (
`id` int(10) unsigned NOT NULL auto_increment,
`jeu` varchar(70) collate latin1_german1_ci NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_german1_ci AUTO_INCREMENT=5 ;
INSERT INTO `jeu` (`id`, `jeu`) VALUES
(1, 'Need For Speed'),
(2, 'Burning Revenge'),
(3, 'Ninja Wars'),
(4, 'Gates of Thunder');
CREATE TABLE `plateforme` (
`id` int(11) NOT NULL auto_increment,
`plateforme` varchar(30) collate latin1_german1_ci NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_german1_ci AUTO_INCREMENT=8 ;
INSERT INTO `plateforme` (`id`, `plateforme`) VALUES
(1, 'Super Nintendo'),
(2, 'PS1'),
(3, 'Sega Mega-CD'),
(4, 'PS2'),
(5, 'X-box'),
(6, 'Sega 32X'),
(7, 'Game Boy Advance');
CREATE TABLE `standard` (
`id` int(11) NOT NULL auto_increment,
`id_jeu` int(11) NOT NULL default '0',
`id_plateforme` int(11) NOT NULL default '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_german1_ci AUTO_INCREMENT=9 ;
INSERT INTO `standard` (`id`, `id_jeu`, `id_plateforme`) VALUES
(1, 1, 2),
(2, 1, 3),
(3, 1, 7),
(4, 2, 1),
(5, 2, 4),
(6, 3, 5),
(7, 3, 7),
(8, 4, 6);
--
-- PAGE A NOMMER index.php
--
<?php
$user="ajax";
$host="localhost";
$password="ajax";
$database="base";
$connexion = mysql_connect($host,$user,$password) or die ("Connexion au serveur impossible");
mysql_select_db($database,$connexion);
$sql_plf = "SELECT id, plateforme FROM plateforme ORDER BY plateforme";
$res_plf = mysql_query($sql_plf);
$sql_jeu = "SELECT id, jeu FROM jeu ORDER BY jeu ";
$res_jeu = mysql_query($sql_jeu);
?>
<script type="text/javascript">
var tab = new Array(0); // tableau contenant les id des jeux et plateforme
var tab_plf = new Array(0); // tableau des id des plateformes
var tab_jeu = new Array(0); // tableau des id des jeux
function Ajouter() {
tab.push(tab.length);
tab_jeu.push("");
tab_plf.push("");
Afficher();
}
function Afficher() {
document.getElementById('std').innerHTML="";
for (intI=0;intI<tab.length;intI++) {
document.getElementById('std').innerHTML+= ListeBoxJeu(tab[intI], tab_jeu[intI]) + ' ';
document.getElementById('std').innerHTML+= ' ' +ListeBoxPlf(tab[intI], tab_plf[intI]) +' <a href="javascript:Supprimer('+intI+')">Supprimer</a><br/><br/>';
}
}
function SaveValue(arr,intId,strValue) {
arr[intId]=strValue;
}
function ListeBoxJeu(id,value) {
var xe = 0;
var str;
str = 'Jeu <select size=1 name="jeu_'+id+'" id="jeu_'+id+'" OnChange="sendData(\'id=\'+ this.value+\'&pos='+id+'\',\'liste_ajax.php\','+id+');SaveValue(tab_jeu,'+id+',this.value);" onKeyUp="sendData(\'id=\'+this.value+\'&pos='+id+'\',\'liste_ajax.php\','+id+');">';
str += '<option value="-1">';
<?php
while ($row = mysql_fetch_assoc($res_jeu)) {
?>
xe = <?php echo "$row[id]"; ?> ;
xl = "<?php echo $row[id].'-'.$row[jeu]; ?>" ;
str += '<option value="'+xe+'"';
if ( xe == value) {
str += 'selected';
}
str += '>'+xl;
<?php
}
?>
str += '</select>';
return str;
}
function ListeBoxPlf(id,value) {
var xe = 0;
var str;
str = 'Plateforme <select size=1 name="plateforme_'+id+'" id="plateforme_'+id+'" onChange="javascript:SaveValue(tab_plf,'+id+',this.value)">';
str += '<option value="-1">';
<?php
while ($row = mysql_fetch_assoc($res_plf)) {
?>
xe = <?php echo "$row[id]"; ?> ;
xl = "<?php echo $row[plateforme]; ?>" ;
str += '<option value="'+xe+'"';
if ( xe == value) {
str += 'selected';
}
str += '>'+xl;
<?php
}
?>
str += '</select>';
return str;
}
function Supprimer(intId) {
if (tab.length > 0) {
tab.pop();
tab_jeu.splice(intId,1);
tab_plf.splice(intId,1);
}
Afficher();
}
function sendData(param, page, id)
{
if(document.all)
{
//Internet Explorer
var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
}//fin if
else
{
//Mozilla
var XhrObj = new XMLHttpRequest();
}//fin else
//définition de l'endroit d'affichage:
var content = document.getElementById('plateforme_'+id);
XhrObj.open("POST", page);
//Ok pour la page cible
XhrObj.onreadystatechange = function()
{
if (XhrObj.readyState == 4 && XhrObj.status == 200)
content.innerHTML = XhrObj.responseText ;
}
XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XhrObj.send(param);
}//fin fonction SendData
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
[ Lien ]">
<html xmlns=" [ Lien ]">
<head>
<title>Exemple AJAX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta content="TRUE" name="MSSmartTagsPreventParsing" />
</head>
<body border="1px dashed #999" bgcolor="#D7D7FF">
<form name="essai" action="valider.php" method="post">
<table>
<tr >
<td >
<p id="std" ></p>
<a href="javascript:Ajouter()">Ajouter un standard</a>
</td>
</tr>
<tr valign="top">
<td align="center"><input type="submit" value="Valider" ></td>
</tr>
</table>
</form>
</body>
</html>
--
-- PAGE A NOMMER liste_ajax.php
--
<?php
header('Content-type: text') ; // on déclare ce qui va être afficher
// test des POST emis
if(isset($_POST['id']) && !empty($_POST['id']) ){
$pos = $_POST['pos'];
$user="ajax";
$host="localhost";
$password="ajax";
$database="base";
$connexion = mysql_connect($host,$user,$password) or die ("Connexion au serveur impossible");
mysql_select_db($database,$connexion);
$rq="Select id_plateforme, plateforme from standard, plateforme where standard.id_plateforme = plateforme.id and standard.id_jeu=".$_POST['id']." ORDER BY plateforme;";
$result= mysql_query ($rq) or die ("Select impossible");
// $i = initialise le variable i
$i=0;
if (mysql_num_rows($result)>0)
{
//echo "<select size='1' name=\"plateforme_$pos\">";
}
else
{
echo utf8_encode("Indisponible");
}
while ($dt=mysql_fetch_row($result))
{
echo "<option value=".$dt[0].">".$dt[0].'-'.$dt[1]."<br/>";
}
//echo "</select>";
}
?>
Un grand merci à ceux qui m'aideront, car je crois que je vais pas y arriver tout seul, si vous avez aussi un meilleur code pour faire la même chose, je suis preneur...