Utilisation de la requête ajax get de jQuery avec paramètres, renvoi du contenu de la page

Question

J'essaie d'utiliser la fonction get de jQuery pour appeler mon script PHP. Le script php renvoie une variable contenant le modèle construit du contenu principal de ma page moins mon en-tête/pied de page statique.

Je voudrais utiliser le contenu retourné pour remplacer le "vieux" contenu de la page sans le rechargement de la page. Quelqu'un peut-il me diriger dans la bonne direction quant à l'endroit où je me trompe ici? Mon code est le suivant ...

jQuery:

function getData(time, type) { 
    $.ajax({ 
      type: "GET", 
      url: "getData.php", 
      data: "time=" + time + "&type=" + type, 
      success: function(data){ 
       $('#pageContent').fadeOut("slow"); 
       $('#pageContent').html(data); 
       $('#pageContent').fadeIn("slow"); 
    } 
    }); 
    return false; 
} 

getData.php (paraphrase):

.... 

    $time = empty($_GET['time']) ? '' : $_GET['time']; 
    $type = empty($_GET['type']) ? '' : $_GET['type']; 
    echo getData($time, $type); 

    function getData($time, $type) 
    ...... 
     ..... 
      $tmpl = new Template(); 
      $tmpl->time= $time; 
      $tmpl->type = $type; 
      $builtpage = $tmpl->build('index.tmpl'); 
      return $builtpage; 
     ..... 
    ...... 

appel de fonction jQuery:

<a href="#" onclick="getData('<?php print $tmpl->time; ?>', 'Orange')">Orange</a> 
<a href="#" onclick="getData('<?php print $tmpl->time; ?>', 'Apple')">Apple</a> 
<a href="#" onclick="getData('<?php print $tmpl->time; ?>', 'Banana')">Banana</a> 

Lorsque je clique sur tout lien, l'ajax semble bien fonctionner, et la page refuse de recharger, mais le contenu reste inchangé ... Tout le monde sait quoi de neuf?

Answer 1

d'abord dans la fonction success, assurez-vous que vous recevez ce que vous cherchez:

success: function(data){ 
    alert(data); 
} 

également dans le fichier php, essayez de mettre cela sur le dessus du script:

header("Content-Type: text/html"); 

Et essayez de modifier votre code comme:

success: function(data){ 
    $('#pageContent').html(''); // remove what was before 
    $('#pageContent').fadeOut("slow"); 
    $('#pageContent').html(data); 
    $('#pageContent').fadeIn("slow"); 
} 

Answer 2

L'Ajax ne fonctionne pas bien:

<a href="#" onclick="getData("<?php print $tmpl->time; ?>", "Orange")">Orange</a> 
          ^
          End of attribute value here 

Utilisez un validator et imbriquer vos citations correctement (en passant entre " et ' ou en utilisant des entités).