Bonjour tout le monde
J'ai suivi ce tutoriel pour implémenter de l'AJAX dans mon site:
http://siddh.developpez.com/articles/ajax/

J'ai toutefois un petit soucis.

L'AJAX fonctionne bien, j'arrive a récupérer et a afficher les informations.

J'arrive également a faire fonctionner mes deux librairies: Highcharts et Datatables en dehors du AJAX mais mon souci arrive quand je veux utiliser ces librairies dans le div qui fait aparaitre mon code.

En effet, je ne parviens pas a récupérer le "look".
Par exemple, pour datatables, j'ai bien les données mais je n'ai pas l'affichage autour. Voici une image explicite:

<a target="_blank" href="http://www.hostingpics.net" title="Hebergeur d'image"><img src="http://img4.hostingpics.net/pics/133515ajax.png" border="0" alt="Hebergeur d'image" /></a>

On peut voir le bloc rouge qui correspond a ce qui est généré via AJAX en fonction du choix fait dans la liste déroulante au dessus.

Le graphique highchart reste un grand bloc blanc et le tableau datatable a les données mais pas le look.

On peu voir que par contre, dessous, quand je place le même code directement dans ma page, cela fonctionne.

Auriez vous une piste? Quelqu'un qui aurait su utiliser des librairies dans du ajax?
Merci,
Benjamin.

Le code n'est pas vraiment lisible car j'ai beaucoup d'appels a des contrôleurs et des vues. mais je met quand meme les parties "importantes".

fichier principal index.php:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!-- Les CSS Datatables -->
	<link rel="stylesheet" href="style/dataTables/demo_table_jui.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="style/dataTables/jquery-ui-1.8.4.custom.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="style/dataTables/TableTools_JUI.css" type="text/css" media="screen" />
 
	<!-- Le JS jQuery -->
	<script type="text/javascript" src="libs/jquery-1.10.2.min.js"></script>
	<!-- Les JS Highcharts -->
	<script type="text/javascript" src="libs/highcharts/highcharts.js"></script>
	<script type="text/javascript" src="libs/highcharts/modules/exporting.js"></script>	
	<!-- Les JS Datatables -->
	<script type="text/javascript" src="libs/datatables/jquery.dataTables.js"></script>
	<script type="text/javascript" src="libs/datatables/TableTools.js"></script>
	<script type="text/javascript" src="libs/datatables/ZeroClipboard.js"></script>	
 <!-- Code pour AJAX -->
	<script type='text/JavaScript'> 
	 		function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr()
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('livre').innerHTML = leselect;
					}
				}
				// Ici on va voir comment faire du post
				xhr.open("POST","controleurs/rapportConstatatifSecondaire.php",true);
				// ne pas oublier ça pour le post alert('5');
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('zoom_appli');
				//alert('sel='+sel);
				idauteur = sel.options[sel.selectedIndex].value;
				date1 = document.getElementById('date_little_combo').value;
				xhr.send("date1="+date1+"&zoom_appli="+idauteur);
			}
		</script>
	<!-- Fin Code pour AJAX -->
 
<?php
// ############################# LITTLE COMBO #####################################
$list_appli = recup_info_appli();
 
 
 
//On inclut la vue
<input type="hidden"  name="date_little_combo" id="date_little_combo" value="<?php echo $date1; ?>">
        <div id="principal_appli_24h" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
        </br>
<?php
include(dirname(__FILE__).'/../vues/little_combo.php');
?>
 
<div id='livre' style='display:inline'>
</div>
 
 
 
echo"
	<div id='secondaire_job_24h' style='min-width: 310px; height: 400px; margin: 0 auto'></div>
	";
//############################## GRAPHIQUE SECONDAIRE JOUR ##############################
	//-- Recup des valeurs pour highchart
/*
	$id_appli=$_POST['zoom_appli'];
	echo "id_appli= ".$id_appli."</br>";
	$date1=$_POST['date1'];
	echo "date1= ".$date1."</br>";
*/
$id_appli = 2;
$date1='04/09/2013';
$tab_donnee_highchart = retour_donnees_format_highchart("jour", "rgpJob", "objAppli", $id_appli, $date1);
$abcisse_highchart = $tab_donnee_highchart[0];
$ordonnee_highchart = $tab_donnee_highchart[1];
 
//on gere l'affichage
$graph = affiche_graph('secondaire_job_24h', "appli", $id_appli, $date1, $abcisse_highchart, $ordonnee_highchart);
echo "</br></br>".$graph;
 
//################################### DATATABLES #####################################
$datatables= retour_donnees_format_datatablest("objAppli", $id_appli, $date1);
echo $datatables."</br></br>";
?>
fichier rapportConstatatifSecondaire:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//############################## GRAPHIQUE SECONDAIRE JOUR ##############################
	//-- Recup des valeurs pour highchart
 
	$id_appli=$_POST['zoom_appli'];
	//echo "id_appli= ".$id_appli."</br>";
	$date1=$_POST['date1'];
	//echo "date1= ".$date1."</br>";
 
$tab_donnee_highchart = retour_donnees_format_highchart("jour", "rgpJob", "objAppli", $id_appli, $date1);
$abcisse_highchart = $tab_donnee_highchart[0];
$ordonnee_highchart = $tab_donnee_highchart[1];
 
//on gere l'affichage
$graph = affiche_graph('secondaire_job_24h', "appli", $id_appli, $date1, $abcisse_highchart, $ordonnee_highchart);
echo "</br></br>".$graph;
 
//################################### DATATABLES #####################################
$datatables= retour_donnees_format_datatablest("objAppli", $id_appli, $date1);
 
//On inclut la vue
include(dirname(__FILE__).'/../vues/rapportConstatatifSecondaire.php');