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

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Débutante AJAX - Problème compatibilité navigateurs !! =S

par Invité » 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'.

par charlottebardet » 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>

par Invité » 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...

par mere-teresa » 30 avr. 2008, 15:03

Je vois pas le +/-

par charlottebardet » 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>
:?

par Cyrano » 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]

par jojolapine » 29 avr. 2008, 16:40

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

par charlottebardet » 29 avr. 2008, 16:38

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

par mere-teresa » 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

par charlottebardet » 29 avr. 2008, 14:35

Personne... :cry: :cry:

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

par charlottebardet » 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: