Ajax Jquery Json rien ne fonctionne

**cristobal.dupasquier** · 17/06/2013, 10h05

Bonjour à toutes et à tous,

Après un dimanche complet et un début de matinée à faire des tests, je me résous à venir vous demander de l'aide.

J'ai un index.html, un fichier Javascript, un fichier PHP. J'aimerais qu'au chargement de ma page, les différentes DIV de ma page soient cachées et construites grâce à ma base de données et AJAX.

J'utilise le format JSON et malgré le fait que ma console est capable de me retourner le XHR, cela ne marche pas.

Voici mes lisitings
JAVASCRIPT

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
$(document).ready(function (e) {
  //TOUS LES ELEMENTS NON VISIBLE
$('#content2').css('display','none');
 
 
  //Préparation des différentes div de contenu avec les questions via AJAX !
// On envoi la requête AJAX
$.ajax({
     type: "GET",
     url: "load.php",
     async: false,
 
 dataType: "json",
 success: function(data){
   $('#showdata').html("<p>item1="+data.item1+" item2="+data.item2+" item3="+data.item3+"</p>");
 }
});
});

PHP

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php
$arr = array ('item1'=>"I love jquery4u",'item2'=>"You love jQuery4u",'item3'=>"We love jQuery4u");
echo json_encode($arr);
?>

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="showdata"></div>

Je remercie d'avance les personnes pouvant m'aider à avancer car je ne comprends vraiment pas mon erreur

**Golgotha** · 17/06/2013, 11h13

Bonjour,

As tu des erreurs en console js ?
la DIV showdata est elle contenu dans l’élément content2 ?
Si oui, remet tu bien le display de l'élément content2 en visible ?
As tu fait un test sans mettre content2 en non visible ?
Es tu sûr que la fonction success est bien appelé ?

**cristobal.dupasquier** · 17/06/2013, 12h18

Bonjour,

As tu des erreurs en console js ?

Non je n'ai aucune erreur

la DIV showdata est elle contenu dans l’élément content2 ?

Non pour les tests elle est contenue dans une partie visible du site web

Es tu sûr que la fonction success est bien appelé ?

Non je n'en suis pas sûr, et j'aimerais bien savoir pourquoi lorsque je n'utilise pas de JSON, et que je mets un alert, l'alert fonctionne.

Merci pour ton aide

**Golgotha** · 17/06/2013, 14h42

un alert(data) dans success, ça donne quoi ?

**cristobal.dupasquier** · 17/06/2013, 15h35

J'ai essayé si je n'ai pas de JSON l'alert (alert('HELLO') se fait mais si je fais une demande JSON plus rien ne fonctionne....

Merci

**Golgotha** · 17/06/2013, 16h20

Mauvaise nouvelle...

J'ai fait le test en local chez moi, et ça fonctionne.

Donc, la seule question qui me viens : jQuery est il bien chargé ?

**Bovino** · 17/06/2013, 16h25

La question est surtout : le résultat renvoyé est-il un format JSON correct ?
Par exemple, y a-t-il des lignes vides avant ou après les balises <?php ?> ?
Si c'est le cas, ces lignes vides sont affichées par la page et entrainent que le résultat renvoyé n'est plus un JSON valide...

**cristobal.dupasquier** · 17/06/2013, 17h33

Merci pour vos réponses, je vous précise que jQuery est bien chargé, car la div content2 est bien caché. Je confirme également que la page .php n'a pas d'espaces.

Vous comprenez maintenant pourquoi je ne comprends rien !?!

Merci de m'éclairer...

**Bovino** · 17/06/2013, 17h46

Ben désolé, mais en faisant un test avec le code que tu montres, tout fonctionne correctement.

Le problème se situe donc probablement sur ce que tu ne montres pas, ce qui rend difficile de t'apporter plus d'aide !

**cristobal.dupasquier** · 18/06/2013, 08h43

Ok je comprends, alors voici les listings complets peut-être que vos yeux de Lynx pourront voir la faille car perso je déprime...

JAVASCRIPT COMPLET

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
$(document).ready(function () {
  //TOUS LES ELEMENTS NON VISIBLE
$('#content2').css('display','none');
 
 
  //Préparation des différentes div de contenu avec les questions via AJAX !
// On envoi la requête AJAX
$.ajax({
     type: "GET",
     url: "load.php",
     async: false,
 
 dataType: "json",
 success: function(data){
   $('#showdata').html("<p>item1="+data.item1+" item2="+data.item2+" item3="+data.item3+"</p>");
 }
});
 
$('#goGame').click(
	function(){
		$('#alert').html(' <audio src="son/guillotine.mp3" control="control" autoplay>NoSupport</audio>');
		$('#content1').css('display','none');
		$('#content2').css('display','block');
}); 		
});

HTML COMPLET

Code html :

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
<!DOCTYPE html >
<html>
<head>
<title>L&eacute;gendes de la Gruy&egrave;re</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
 
</head>
<body>
 
<div id="container">
	<div id="header">
 
	</div>
	<div id="content1">
		<div id="text1">
			<div id="showdata"></div>
 
			<div class="heading">Entrez dans la l&eacute;gende</div>
			<br />
 
 
 
			<div id="chevalier">
 
            <div id="btnJouer">
            <a href="#"  id="goGame" ><img src="images/btnJouer.png" /></a>
           	<div id="alert"></div>
 
            </div>
            <!-- onclick="beginGame();"-->
 
            </div>
 
 
 
		</div>
	</div>
 
    <!--CONTENU COMPLET -->
    <div id="content2">
		<div id="text1">
 
 
			<div class="heading">Question 1</div>
			<br />
		</div>
	</div>
 
 
   <!-- FIN COMPLET --> 
 
	<div id="footer">
 
 
            <ul id="social">
            <li><img src="images/home.png"  alt="Icone aller vers le site web"/></li>
            <li><img src="images/facebook.png" alt="Icone aller vers la page Facebooke"/></li>
            <li><img src="images/twitter.png" alt="Icone aller vers la page Twitter"/></li>
            <li><img src="images/youtube.png" alt="Icone aller vers la page Youtube"/></li>
            </ul>
	</div>
</div>
 
<p>©2013 Dupasquier Christophe All rights reserved.</p>
 
<script>
 
 
</script>
</body>
</html>

PHP COMPLET

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php 
$arr = array('item1'=>"I love jquery4u",'item2'=>"You love jQuery4u",'item3'=>"We love jQuery4u");
echo json_encode($arr);
?>

Merci

**SpaceFrog** · 18/06/2013, 08h48

le fichier php de réponse comporte-t-il du BOM ?

**cristobal.dupasquier** · 18/06/2013, 09h13

Hello non pas de BOM dans mon fichier php

**Bovino** · 18/06/2013, 09h24

Ben encore une fois, désolé, mais en copiant/collant ton code, ça fonctionne correctement...

Juste pour être sûr, tu appelles bien ta page HTML en localhost ?

**cristobal.dupasquier** · 18/06/2013, 09h39

Hello Bovino,

Je ne saisi pas très bien le terme 'localhost', pour moi c'est depuis un lamp ou wamp, mais perso je fais des tests depuis un serveur online....

**Bovino** · 18/06/2013, 09h41

Quand tu affiches ta page dans le navigateur, l'URL affichée, c'est quoi ?

**cristobal.dupasquier** · 18/06/2013, 09h53

L'URL c'est : legende.dupatchi.ch

**Bovino** · 18/06/2013, 09h56

Regarde dans la console de ton navigateur et tu verras que ton script PHP n'est pas interprété !

**cristobal.dupasquier** · 18/06/2013, 09h57

C'est tout bon !!!, j'ai copier-coller le fichier .php dans un nouveau et cela à semblé faire son effet !!!

Purée franchement je ne comprends pas. Mais l'essentiel c'est que ça marche. Merci à tous pour votre précieuse aide !!!

**Golgotha** · 18/06/2013, 12h00

On aurait pu y rester longtemps sur celle là

Ajax Jquery Json rien ne fonctionne [AJAX]

jQuery

Discussions similaires

Partager

Partager