2010-08-02 3 views
0

J'essaie d'utiliser jQuery pour envoyer une requête ajax à un script PHP très simple pour charger des images pour le plugin jQuery cycle. J'ai un problème avec l'obtention des chaînes de source d'image de mon objet json. Je vais vous montrer mon code, puis aller plus en détail ci-dessous:Créer dynamiquement un index json ne me laisse pas accéder aux données

<!doctype html> 
<html lang="en-us"> 
    <head> 
     <title>jQuery Cycle test</title> 
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> 
     <style> 
      #slideshow a { margin: 0; padding: 0; color: #fff; } 
     </style> 
    </head> 

    <body> 
     <div id="slideshow"> 
     </div> 
    </body> 

    <script type="text/javascript"> 
     $.get('slideshow.php', {start : "true"}, function(data){ 
      var images = JSON.parse(data); 
      for(var i = 1; i < 6; ++i){ 
       var index = 'image' + i; alert(index); alert(images.index); 
       $('#slideshow').innerHTML += '<a href="images/' + images.index + '"><img src="images/' + images.index + '" alt="" /></a>'; 
      } 
     }); 

     $('#slideshow').cycle({ 
      fx: 'cover', 
      direction: 'right', 
      timeout: 3000, 
      speed: 300 
     }); 
    </script> 

</html> 

Mon script PHP retourne un tableau associatif json_encoded, qui devient un objet JSON normal après l'encodage. Pour mon test, j'ai cinq images que j'essaie de charger: image1 - image5. Comme vous pouvez le voir dans mon JavaScript, je tente de créer dynamiquement un nouveau nom d'index/propriété pour accéder à ces chaînes de source d'image individuelles en ajoutant la valeur de 'i' à la chaîne 'image'. Tout droit.

Mon problème est que lorsque je crée mes noms de propriété de cette façon, elle renvoie 'indéfini'. Lorsque je l'essaie manuellement, en écrivant quelque chose comme images.image3, il renvoie la chaîne source appropriée. J'ai alerté mes index dynamiques (comme vous pouvez le voir), et ils me semblent bien formés. Je ne pense pas que ce soit un problème de fermeture, car cela reviendrait à la dernière chaîne d'image dans ce cas. Je suis assez perplexe à ce stade, donc toute suggestion serait grandement appréciée.

+0

Vous dites "il retourne 'undefined'". Pouvez-vous être plus précis sur quoi, quand et où? –

+0

La deuxième alerte dans ma boucle for. La première alerte affiche correctement 'imagei', où i est l'index de la boucle. La deuxième alerte sort 5 fois indéfinie. –

Répondre

0

Je l'ai compris. Utiliser la notation de tableau plutôt que la notation par points a fait l'affaire. Je pense que le script essayait de traiter le nom de la propriété sous la forme d'un nombre plutôt que d'une chaîne. De là, il s'agissait simplement d'écraser quelques autres petits insectes.

La solution:

<!doctype html> 
<html lang="en-us"> 
    <head> 
     <title>jQuery Cycle test</title> 
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> 
     <style> 
      #slideshow a { margin: 0; padding: 0; color: #fff; } 
     </style> 
    </head> 

    <body> 
     <div id="slideshow"> 
     </div> 
    </body> 

    <script type="text/javascript"> 
     $.get('slideshow.php', {start : "true"}, function(data){ 
      var images = JSON.parse(data); 
      for(var i = 0; i < 5; ++i){ 
       $('#slideshow').append('<a href="images/' + images['image' + i] + '"><img src="images/' + images['image' + i] + '" alt="" /></a>'); 
      } 

       $('#slideshow').cycle({ 
        fx: 'cover', 
        direction: 'right', 
        timeout: 3000, 
        speed: 300 
       }); 
     }); 
    </script> 

</html> 
1

Est-il possible que votre JSON ait un tableau indexé par zéro de cinq éléments, et que image5 ne soit donc pas défini lorsque votre boucle à index unique atteint cette dernière itération?

+0

Cela ne semble pas être le problème. Je viens de mettre à zéro le tableau que ma fonction PHP retourne et la boucle JavaScript correspondante. –

Questions connexes