jQuery et JavaScript base de données AJAX Requêtes

Question

Il me semble avoir aucune chance avec ces satanés requêtes AJAX MySQL ...

J'essaie d'interroger la base de données lors d'une sélection dans un menu déroulant est fait, et remplir une div avec les résultats du script. J'ai essayé deux manières différentes, sans aucune chance non plus.

MÉTHODE 1

Javascript

var ajaxRequest; 
var create_url = "create_script.php"; 
var process_url = "process.php"; 
try{ 
    ajaxRequest = new XMLHttpRequest(); 
} catch (e){ 
    try{ 
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
     try{ 
      ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (e){ 
      alert("Your browser broke!"); 
     } 
    } 
} 

function races(id) 
{ 
    ajaxRequest.onreadystatechange = function() 
    { 
     if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){ 
      document.getElementById('race_info').innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var params = "mode=race&id="+id; 
    ajaxRequest.open("POST", create_url, true); 
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    ajaxRequest.setRequestHeader("Content-length", params.length); 
    ajaxRequest.setRequestHeader("Connection", "close"); 
    ajaxRequest.send(params); 
} 

function classes(id) 
{ 
    ajaxRequest.onreadystatechange = function() 
    { 
     if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){ 
      document.getElementById('class_info').innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var params = "mode=classes&id="+id; 
    ajaxRequest.open("POST", create_url, true); 
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    ajaxRequest.setRequestHeader("Content-length", params.length); 
    ajaxRequest.setRequestHeader("Connection", "close"); 
    ajaxRequest.send(params); 
} 

le corps de la page:

<div id="contentwrapper"> 
    <div id="contentcolumn"> 
     <div class="innertube"> 
      <?php 
      if($step == 0) 
      { 
      ?> 
      <form action="<?php echo $u_create; ?>" method="post"> 
       <h2>Races</h2> 
       <select id="race_select" name="race_select"> 
        <?php 
        $sql = 'SELECT * FROM '.RACES_TABLE; 
        $result = $db->sql_query($sql); 
        while($row = $db->sql_fetchrow($result)) 
        { 
         echo '<option onfocus="races('.$row['race_id'].');" value="'.$row['race_id'].'">'.$row['race_name'].'</option>'."\n"; 
        } 
        ?> 
       </select> 
       <h2>Classes</h2> 
       <select id="class_select" name="class_select"> 
        <?php 
        $sql = 'SELECT * FROM '.CLASSES_TABLE; 
        $result = $db->sql_query($sql); 
        while($row = $db->sql_fetchrow($result)) 
        { 
         echo '<option onfocus="classes('.$row['race_id'].');" value="'.$row['class_id'].'">'.$row['class_name'].'</option>'."\n"; 
        } 
        ?> 
       </select> 
       <br /> 
       <input type="submit" value="Select" name="submit" /> 
      </form> 
      <br /> 
      <div id="race_info"></div> 
      <br /> 
      <hr /> 
      <br /> 
      <div id="class_info"></div> 
      <?php 
      } 
      ?> 
     </div> 
    </div> 
</div> 

MÉTHODE 2

AJAX

$(document).ready(function() { 
    $("#race_select").change(function() { 
     var race = $("#race").val(); 
     $.ajax({ 
      url: 'create_script.php', 
      data: 'mode=race&id=' + race, 
      dataType: 'json', 
      success: function(data) 
      { 
       $("#race_info").html(data); 
      } 
     }); 
    }); 

    $("#class_select").change(function() { 
     var class = $("#class").val(); 
     $.post("create_script.php", { mode: "class", id: class }, function(data) { 
      $("#class_info").html(data); 
     }); 
    }); 
}); 

Le corps de la page:

<div id="contentwrapper"> 
    <div id="contentcolumn"> 
     <div class="innertube"> 
      <?php 
      if($step == 0) 
      { 
      ?> 
      <form action="<?php echo $u_create; ?>" method="post"> 
       <h2>Races</h2> 
       <select id="race_select" name="race_select"> 
        <?php 
        $sql = 'SELECT * FROM '.RACES_TABLE; 
        $result = $db->sql_query($sql); 
        while($row = $db->sql_fetchrow($result)) 
        { 
         echo '<option id="race" value="'.$row['race_id'].'">'.$row['race_name'].'</option>'."\n"; 
        } 
        ?> 
       </select> 
       <h2>Classes</h2> 
       <select id="class_select" name="class_select"> 
        <?php 
        $sql = 'SELECT * FROM '.CLASSES_TABLE; 
        $result = $db->sql_query($sql); 
        while($row = $db->sql_fetchrow($result)) 
        { 
         echo '<option id="class" value="'.$row['class_id'].'">'.$row['class_name'].'</option>'."\n"; 
        } 
        ?> 
       </select> 
       <br /> 
       <input type="submit" value="Select" name="submit" /> 
      </form> 
      <div id="race_info"></div> 
      <hr /> 
      <div id="class_info"></div> 
      <?php 
      } 
      ?> 
     </div> 
    </div> 
</div> 

Aucune des tentatives ont travaillé du tout. Je ne suis pas sûr de ce que je fais mal. Il n'y a même pas une demande POST faite sur le changement d'option de sélection, selon firebug.

Answer 1

Dans votre requête jQuery AJAX, vous définissez dataType sur JSON. Donc, jQuery tente d'analyser le JSON une fois reçu. Si cela échoue, rien ne se passe. Pas même la demande affichée dans Firebug.

Si vous utilisez html dans votre retour AJAX, vous devez définir le type de données au format HTML.

EDIT

Oh, et dans la deuxième demande dans votre fichier jQuery, vous faites var class = $("#class").val();. Vous pouvez éviter de nommer vos vars avec des noms réservés: http://www.quackit.com/javascript/javascript_reserved_words.cfm

EDIT2

Comme @pthurlow remarqué, il y a un grand échec avec vos noms d'ID. Vous essayez d'obtenir #race sélectionnez, mais il n'y a pas race ID dans votre code HTML. Il y a un #race_select mais c'est différent de #race. Il échoue également avec vos trucs #class.

Answer 2

Bien pour les débutants, dans la deuxième méthode, toutes vos options de sélection ont les mêmes ID. Par conséquent, lors de l'interrogation:

var race = $("#race").val(); 

vous obtiendrez toujours la première option. Au lieu de cela, au sein de la fonction change, this se référera à l'élément sélectionné.si:

var race = $(this).val(); 

va obtenir ce que vous voulez

EDIT

Voici un exemple simplifié en utilisant votre code illustrant votre comportement souhaité sous forme jsFiddle: http://jsfiddle.net/7Xtqv/1/

espoir qui aide