Débutante AJAX - Problème compatibilité navigateurs !! =S

charlottebardet
Invité n'ayant pas de compte PHPfrance

29 avr. 2008, 09:42

Bonjour =)

Je viens de 'finir' ce que je cherche à faire depuis un bon moment ! Malheureusement ça ne fonctionne que sous Firefox =( Et moi je voudrai que ça fonctionne sous IE ! :?

Je vous explique :

J'ai une action 'onclick' qui appelle plusieurs fonctions :
<tr id="sect1" style="display:none">
		<!-- TVA -->
			<td class="RowHeader10" nowrap>&nbsp;&nbsp;&nbsp;<a onclick="javascript:changerSigne(1);afficherCacher('divcalculTOTAL_TVA');afficherCacher('divaffichageTOTAL_TVA');calcul_TVA_TOTAL(); aff_tva('-1', '<?php echo $sens; ?>')"><img name="image" src="img/plus.GIF"></a>&nbsp;TVA</td>
			<td class="Value10" nowrap><?php //echo number_format($achat->qte_total, 0, ',', ' '); ?></td>
			<td class="Value10" nowrap><?php //echo number_format($achat->montant_total, 2, ',', ' ').' &euro;'; ?></td>
			<td class="Value10" nowrap><?php //if(isset($achat->montant_total) and $achat->montant_total != 0) echo number_format(($achat->montant_total/$achat->montant_total)*100,3).'%'; ?></td>
		</tr>
Mon 'sect1' qui correspond à la TVA à lui même un display:none car c'est également un sous-menu; mais son affichage ne m'a pas poser de problème car il n'y avait aucun calcul nécessaire, j'ai donc utilisé des propriétés CSS.

En résumé j'ai : TOTAL -> TVA, Prix, Grossiste
Et dans chacun de ces sous-menus j'ai d'autres sous-menus, mais qui nécessitent, eux, des calculs (et c'est eux qui me font tout planter^^).

J'ai aussi, bien sûr, des div qui me servent à afficher mon résultat :
<div id="divcalculTOTAL_TVA" style="display:none"></div>
<div id="divaffichageTOTAL_TVA" style="display:none"></div>
Ma fonction changerSigne() sert à changer mon bouton '+' en '-' et vis versa (c'est un tableau déroulant '+' '-').
Et ma fonction afficherCacher() affiche ou cache mon sous-menu.

JS :

Code : Tout sélectionner

// affichage des sous-menus function afficherCacher(element){ if(document.getElementById(element).style.display == 'none') document.getElementById(element).style.display = 'block'; //afficher else if(document.getElementById(element).style.display == 'block') document.getElementById(element).style.display = 'none'; //cacher } // changement de signe var tab_image = new Array(2); for (var i=0; i< tab_image.length;i++) tab_image[i]= new Image(); tab_image[0].src="img/plus.GIF"; tab_image[1].src="img/moins.GIF"; var n=0; function changerSigne(indice) { n= ++n; if(n == tab_image.length) n=0; window.document.image[indice].src = tab_image[n].src; }
Mes deux autres fonctions servent à calculer et remplir le tableau qui va s'afficher avec les valeurs calculées.

J'ai donc dans mon fichier JS :

Code : Tout sélectionner

function getXhr(url) { if(window.XMLHttpRequest) // Firefox et autres xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) // Internet Explorer xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr_object.open("GET", url, false); xhr_object.send(null); if(xhr_object.readyState == 4) { return(xhr_object.responseText); } else { return(false); } } var calcul=false; function calcul_TVA_TOTAL() { if(calcul==false){ calcul=true; retourJS = getXhr('page/ajax.php?action=calculTVATOTAL'); // On se retrouve avec le résultat de la fonction PHP contenue dans ajax.php qui va se lancer si le test ($_GET['action'] == 'calculTVATotal') est vrai this.document.getElementById('divcalculTOTAL_TVA').innerHTML = retourJS; } else{} } function aff_tva($h, $sens) { retourJS2 = getXhr('page/ajax.php?action=aff_tva&h='+$h+'&sens='+$sens); this.document.getElementById('divaffichageTOTAL_TVA').innerHTML = retourJS2; }
Et mon fichier ajax.php :
<?php

	require_once('../connexion.php');
	require_once('../classes/cls_achat.php');
	
	@session_start();
		
	if(isset($_SESSION['debut_achat'])&&isset($_SESSION['fin_achat'])&&isset($_SESSION['achat'])){
		if(($_SESSION['debut_achat'] == $_SESSION['debut'])&&($_SESSION['fin_achat'] == $_SESSION['fin'])){
			$achat = $_SESSION['achat'];
		}
		else{
			$_SESSION['debut_achat'] = $_SESSION['debut'];
			$_SESSION['fin_achat'] = $_SESSION['fin'];
			$achat = new Achat($_SESSION['debut_achat'],$_SESSION['fin_achat']);
			$_SESSION['achat'] = $achat;
		}
	}
	else{
		$_SESSION['debut_achat'] = $_SESSION['debut'];
		$_SESSION['fin_achat'] = $_SESSION['fin'];
		$achat = new Achat($_SESSION['debut_achat'],$_SESSION['fin_achat']);
		$_SESSION['achat'] = $achat;	
	}
	
	if($_GET['action'] == 'calculTVATOTAL') { 
		$achat->calcul_TVA_TOTAL();	
	}

	if($_GET['action'] == 'aff_tva') {
		$achat->aff_tva($_GET['h'],$_GET['sens']);
	}  
	
	if($_GET['action'] == 'calculPrixTOTAL') { 
		echo 'calcul';
		$achat->calcul_Prix_TOTAL();	
	}

	if($_GET['action'] == 'aff_prix') {
		echo 'aff';
		$achat->aff_prix($_GET['h'],$_GET['sens']);
	}  
?>
Voilà, tout cela marche a peu près convenablement sous Firefox (je dis a peu près car les tableaux s'affichent sans prendre en compte la largeur de mon tableau initial, mais au moins ils s'affichent !),
mais sous IE j'ai un souci, toutes mes valeurs s'affichent au dessus de mon tableau déroulant '+' '-' :?
J'ai d'abord pensé à un problème dans les balises <tr> <td>, mais non, a priori elles sont toutes bien placées :?

HELP ME :cry:

charlottebardet
Invité n'ayant pas de compte PHPfrance

29 avr. 2008, 14:35

Personne... :cry: :cry:

Modérateur PHPfrance
Modérateur PHPfrance | 6037 Messages

29 avr. 2008, 15:42

Peux tu juste cp/cv le code HTML de ta page, sans le PHP ?
Càd juste le rendu des balises ?

Merci
Règle n°2 du webmaster : Toujours commencer par le HTML qu'on veut obtenir....toujours ! :priere:
J'aime apprendre de nouvelles choses.

charlottebardet
Invité n'ayant pas de compte PHPfrance

29 avr. 2008, 16:38

c'est à dire ?.. je comprends pas bien ce que tu veux.. :oops:

ViPHP
ViPHP | 3607 Messages

29 avr. 2008, 16:40

ctrl+u sur firefox, puis copier/coller ;)

Mammouth du PHP | 19672 Messages

29 avr. 2008, 20:20

c'est à dire ?.. je comprends pas bien ce que tu veux.. :oops:
Le code généré tout simplement, en d'autre terme, sur quelle base de code travaille ton navigateur pour appliquer les méthodes AJAX, donc comme l'a mentionné jojolapine, sous Firefox [Ctrl]+ ou sous IE [Alt]+[A] puis [S]
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

charlottebardet
Invité n'ayant pas de compte PHPfrance

30 avr. 2008, 09:54

Je ne peux pas faire ça, ça ne me génère pas le bon code html (oui j'ai beaucoup de problèmes^^)

J'obtiens toujours ça :

Code : Tout sélectionner

<html> <head> <title>Tableau de Bord</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="themes/style.php"></link> <link rel="stylesheet" media="screen" type="text/css" title="Design" href="themes/design.css" /> <script type="text/javascript" src="ressources/ajaxtabs.js"></script> <script type="text/javascript" src="ressources/date.js"></script> <script type="text/javascript" src="ressources/menu.js"></script> </head> <body> <form name='date' method='GET' action=''> <table width="100%"> <tr> <td nowrap> <select name="periode" onChange='SelPeriode();submit();'> <option value="0" >S&eacute;lectionner une p&eacute;riode</option> <option value="1" >Aujourd'hui</option> <option value="2" >Hier</option> <option value="3" >Semaine courante</option> <option value="4" >Semaine pass&eacute;e</option> <option value="5" >Avril 2008</option> <option value="6" >Mars 2008</option> <option value="7" >Ann&eacute;e 2008</option> <option value="8" >Ann&eacute;e 2007</option> </select> </td> <td nowrap>&nbsp;&nbsp;<b>Du </b></td> <td nowrap> <input type="hidden" name="calc" value="0"/> <input type='Text' name='debut' size='9' maxlength='10' value='01/03/2008'><a href="#" onClick="window.open('ressources/calendrier.php?frm=date&ch=debut', 'calendrier', 'width=415,height=170,scrollbars=0').focus();"><img src="img/calendrier.gif"/></a></td> <td nowrap><b>&nbsp;au </b></td> <td nowrap><input type='Text' name='fin' size='9' maxlength='10' value='31/03/2008'><a href="#" onClick="window.open('ressources/calendrier.php?frm=date&ch=fin', 'calendrier', 'width=415,height=170,scrollbars=0').focus();"><img src="img/calendrier.gif"/></a></td> <td nowrap><input type="Submit" value="Valider"></td> <td align="right" width="100%" nowrap><p><a href="javascript:window.print()"><img src="img/print.gif"></a></p></td> </tr> </table> </form> <ul id="maintab" class="shadetabs"> <li><a href="page/page_index.php" rel="ajaxcontentarea">G&eacute;n&eacute;ral</a></li> <li class="selected"><a href="page/page_achat.php" rel="ajaxcontentarea">Achats</a></li> <li><a href="page/page_operateur.php" rel="ajaxcontentarea">Chiffre d'affaires</a></li> <li><a href="page/page_stock.php" rel="ajaxcontentarea">Stock</a></li> <li><a href="page/page_param.php" rel="ajaxcontentarea">Param&egrave;tres</a></li> </ul> <div id="ajaxcontentarea" class="contentstyle"> </div> <script type="text/javascript"> startajaxtabs("maintab") </script> </body> </html>
:?

Modérateur PHPfrance
Modérateur PHPfrance | 6037 Messages

30 avr. 2008, 15:03

Je vois pas le +/-

Invité
Invité n'ayant pas de compte PHPfrance

30 avr. 2008, 15:51

C'est normal le code html récupéré ne correspond absolument pas à ce que je voudrais récupérer !

Il faut vraiment que je trouve une solution :cry:

Mon maître de stage m'a dis d'abandonner ajax et de revenir à des choses plus 'simples' avec rechargement de la page mais je trouve ça nul et c'est beaucoup plus chiant à coder :(

Mon problème c'est que mes div qui contiennent mes valeurs s'affichent au dessus de mon tableau au lieu de s'inserer dedans (comme ça se fait très bien sous Firefox) !

Je ne comprends rien ... pourtant c'est du ajax basic que j'ai fais non ?
J'appelle une fonction JS, qui va chercher ma fonction php et retourne le résultat, que j'affiche ensuite dans des div.

Pfiu...

charlottebardet
Invité n'ayant pas de compte PHPfrance

30 avr. 2008, 15:54

J'ai peut être trouvé ce qu'il te faut pour m'aider !

Code : Tout sélectionner

<h2>Achats</h2> <a href="?debut=&fin=&ftr_ach=1111111111111111111"><img src="img/plus.GIF" /><img src="img/plus.GIF" /></a> <a href="?debut=&fin=&ftr_ach=0000000000000000000"><img src="img/moins.GIF" /><img src="img/moins.GIF" /></a> <table class="WithBorder" width="50%"> <tr> <td class="ColHeader" nowrap>Achats</td> <td class="ColHeader" nowrap>Quantit&eacute;</td> <td class="ColHeader" nowrap><a class="ColHeader" href="?debut=&fin=&ftr_ach=00000000000000000000000&colonne=Montant&sens=ASC">Montant remis&eacute; HT&nbsp;</a></td> <td class="ColHeader" nowrap>%</td> </tr> <tr id="sect0"> <!-- TOTAL --> <td class="RowHeader0" nowrap><a onclick="javascript:changerSigne(0);afficherCacher('sect1');afficherCacher('sect2');afficherCacher('sect3');"><img name="image" src="img/plus.GIF"></a><b>&nbsp;TOTAL</b></td> <td class="Value0" nowrap><b>0</b></td> <td class="Value0" nowrap><b>0,00 &euro;</b></td> <td class="Value0" nowrap><b></b></td> </tr> <tr id="sect1" style="display:none"> <!-- TVA --> <td class="RowHeader10" nowrap>&nbsp;&nbsp;&nbsp;<a onclick="javascript:changerSigne(1);afficherCacher('divcalculTOTAL_TVA');afficherCacher('divaffichageTOTAL_TVA');calcul_TVA_TOTAL(); aff_tva('-1', '')"><img name="image" src="img/plus.GIF"></a>&nbsp;TVA</td> <td class="Value10" nowrap></td> <td class="Value10" nowrap></td> <td class="Value10" nowrap></td> </tr> <div id="divcalculTOTAL_TVA" style="display:none"></div> <div id="divaffichageTOTAL_TVA" style="display:none"></div> <tr id="sect2" style="display:none"> <!-- Prix --> <td class="RowHeader11" nowrap>&nbsp;&nbsp;&nbsp;<a onclick="javascript:changerSigne(2);afficherCacher('divcalculTOTAL_Prix');afficherCacher('divaffichageTOTAL_Prix');calcul_Prix_TOTAL(); aff_prix('-1', '')"><img name="image" src="img/plus.GIF"></a>&nbsp;Prix</td> <td class="Value11" nowrap></td> <td class="Value11" nowrap></td> <td class="Value11" nowrap></td> </tr> <div id="divcalculTOTAL_Prix" style="display:none"></div> <div id="divaffichageTOTAL_Prix" style="display:none"></div> <tr id="sect3" style="display:none"> <!-- Categorie --> <td class="RowHeader10" nowrap>&nbsp;&nbsp;&nbsp;<a href="?debut=&fin=&ftr_ach=00010000000000000000000#sect3"><img src="img/plus.GIF" border=0 /></a>&nbsp;Categorie</td> <td class="Value10" nowrap></td> <td class="Value10" nowrap></td> <td class="Value10" nowrap></td> </tr> <tr id="sect4"> <!-- Grossistes --> <td class="RowHeader1" nowrap><a onclick="javascript:changerSigne(3);afficherCacher('sect5');afficherCacher('sect6');afficherCacher('sect7');afficherCacher('sect8');"><img name="image" src="img/plus.GIF"></a>&nbsp;Grossiste</td> <td class="Value1" nowrap>0</td> <td class="Value1" nowrap>0,00 &euro;</td> <td class="Value1" nowrap></td> </tr> <tr id="sect5" style="display:none"> <!-- TVA --> <td class="RowHeader10" nowrap>&nbsp;&nbsp;&nbsp;<a href="?debut=&fin=&ftr_ach=00000100000000000000000#sect5"><img src="img/plus.GIF" border=0 /></a>&nbsp;TVA</td> <td class="Value10" nowrap></td> <td class="Value10" nowrap></td> <td class="Value10" nowrap></td> </tr> <tr id="sect6" style="display:none"> <!-- Prix --> <td class="RowHeader11" nowrap>&nbsp;&nbsp;&nbsp;<a href="?debut=&fin=&ftr_ach=00000010000000000000000#sect6"><img src="img/plus.GIF" border=0 /></a>&nbsp;Prix</td> <td class="Value11" nowrap></td> <td class="Value11" nowrap></td> <td class="Value11" nowrap></td> </tr> <tr id="sect7" style="display:none"> <!-- Categorie --> <td class="RowHeader10" nowrap>&nbsp;&nbsp;&nbsp;<a href="?debut=&fin=&ftr_ach=00000001000000000000000#sect7"><img src="img/plus.GIF" border=0 /></a>&nbsp;Categorie</td> <td class="Value10" nowrap></td> <td class="Value10" nowrap></td> <td class="Value10" nowrap></td> </tr> <tr id="sect8" style="display:none"> <!-- Fournisseurs --> <td class="RowHeader11" nowrap>&nbsp;&nbsp;&nbsp;<a href="?debut=&fin=&ftr_ach=00000000100000000000000#sect8"><img src="img/plus.GIF" border=0 /></a>&nbsp;Fournisseur</td> <td class="Value11" nowrap></td> <td class="Value11" nowrap></td> <td class="Value11" nowrap></td> </tr> <tr id="sect9"> <!-- Direct --> <td class="RowHeader0" nowrap><a onclick="javascript:changerSigne(4);afficherCacher('sect10');afficherCacher('sect11');afficherCacher('sect12');afficherCacher('sect13');"><img name="image" src="img/plus.GIF"></a>&nbsp;Direct</td> <td class="Value0" nowrap>0</td> <td class="Value0" nowrap>0,00 &euro;</td> <td class="Value0" nowrap></td> </tr> <tr id="sect10" style="display:none"> <!-- TVA --> <td class="RowHeader10" nowrap>&nbsp;&nbsp;&nbsp;<a href="?debut=&fin=&ftr_ach=00000000001000000000000#sect10"><img src="img/plus.GIF" border=0 /></a>&nbsp;TVA</td> <td class="Value10" nowrap></td> <td class="Value10" nowrap></td> <td class="Value10" nowrap></td> </tr> <tr id="sect11" style="display:none"> <!-- Prix --> <td class="RowHeader11" nowrap>&nbsp;&nbsp;&nbsp;<a href="?debut=&fin=&ftr_ach=00000000000100000000000#sect11"><img src="img/plus.GIF" border=0 /></a>&nbsp;Prix</td> <td class="Value11" nowrap></td> <td class="Value11" nowrap></td> <td class="Value11" nowrap></td> </tr> <tr id="sect12" style="display:none"> <!-- Categorie --> <td class="RowHeader10" nowrap>&nbsp;&nbsp;&nbsp;<a href="?debut=&fin=&ftr_ach=00000000000010000000000#sect12"><img src="img/plus.GIF" border=0 /></a>&nbsp;Categorie</td> <td class="Value10" nowrap></td> <td class="Value10" nowrap></td> <td class="Value10" nowrap></td> </tr> <tr id="sect13" style="display:none"> <!-- Fournisseurs --> <td class="RowHeader11" nowrap>&nbsp;&nbsp;&nbsp;<a href="?debut=&fin=&ftr_ach=00000000000001000000000#sect13"><img src="img/plus.GIF" border=0 /></a>&nbsp;Fournisseur</td> <td class="Value11" nowrap></td> <td class="Value11" nowrap></td> <td class="Value11" nowrap></td> </tr> </table>

Invité
Invité n'ayant pas de compte PHPfrance

30 avr. 2008, 15:56

Pour le moment j'ai essayer de l'appliquer seulement dans la sect0 'TOTAL' avec sect1 'TVA' et sect2 'Prix'.