Ajax Jquery Json rien ne fonctionne

Version imprimable

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:

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:

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:

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

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

17/06/2013, 11h13
Golgotha
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é ?
17/06/2013, 12h18
cristobal.dupasquier

Bonjour,

Citation:

As tu des erreurs en console js ?

Non je n'ai aucune erreur

Citation:

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

Citation:

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
17/06/2013, 14h42
Golgotha

un alert(data) dans success, ça donne quoi ?
17/06/2013, 15h35
cristobal.dupasquier

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
17/06/2013, 16h20
Golgotha

Mauvaise nouvelle...

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

Donc, la seule question qui me viens : jQuery est il bien chargé ?
17/06/2013, 16h25
Bovino

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...
17/06/2013, 17h33
cristobal.dupasquier

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...
17/06/2013, 17h46
Bovino

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 !

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:

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:

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:

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

Merci

18/06/2013, 08h48
SpaceFrog

le fichier php de réponse comporte-t-il du BOM ?
18/06/2013, 09h13
cristobal.dupasquier

Hello non pas de BOM dans mon fichier php
18/06/2013, 09h24
Bovino

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 ?
18/06/2013, 09h39
cristobal.dupasquier

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....
18/06/2013, 09h41
Bovino

Quand tu affiches ta page dans le navigateur, l'URL affichée, c'est quoi ?
18/06/2013, 09h53
cristobal.dupasquier

L'URL c'est : legende.dupatchi.ch
18/06/2013, 09h56
Bovino

Regarde dans la console de ton navigateur et tu verras que ton script PHP n'est pas interprété !
18/06/2013, 09h57
cristobal.dupasquier

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 !!!
:ccool:
18/06/2013, 12h00
Golgotha

On aurait pu y rester longtemps sur celle là :aie:

:ccool: