jQuery and Auto-populat selects

Hey,

I have a simple page where I can select a client, then once I chose that autopopulate to the projects that belong to the client. I am using PHP/MySQL to pull the results.

I took at a look at this: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ but I think that starts with both fields on the page. I tried to rework the code but didn't come out that well.

Any ideas on any type of reference?

Thanks,

Ryan

UPDATE 2: Here is my jQuery is this all I need or do I need the other sections, this code doesnt work as is.

Thanks for your help!

Ryan

 var client_id = $('#c_id').val();
    $.getJSON("../inc/get-projects.php", {id: client_id}, function(data){
     projects = $('#p_id');
     projects.empty();
     $.each(data, function() {
      var option = $('<option/>').attr('value', this.id).text(this.name);
      projects.append(option);
     });
    });

PHP:

<?php
    include "config.inc.php";
    $sth = mysql_query(
     sprintf(
     "SELECT c_id,p_id,p_title FROM projects WHERE c_id = %s",
     mysql_real_escape_string($_GET['id'])
     )
    );
    $projects = array();
    while($r = mysql_fetch_assoc($sth)) {
     $projects[] = array('id' => $r['p_id'], 'name' => $r['p_title']);
    }
    print json_encode($projects);
    exit;


?>

From stackoverflow

• The answers to this question might prove helpful: http://stackoverflow.com/questions/180451/using-javascript-and-jquery-to-populate-related-select-boxes-with-array-structu

• If you have HTML like this:

  <select id='clients'>...</select>
  <select id='projects'>...</select>
  

  You can have jQuery code like this:

  $(document).ready(function() {
      var $clients = $('#clients');
      $clients.change(function() {
          var client_id = $clients.val();
          $.getJSON("getProjects.php", {id: client_id}, function(projects) {
              $projects = $('#projects');
              $projects.empty();
              $.each(projects, function() {
                  var option = $('<option/>').attr('value', this.id).text(this.name);
                  $projects.append(option);
              });
          });
      });
  });
  

  And then have getProjects.php return something like:

  $sth = mysql_query(
      sprintf(
      "SELECT * FROM projects WHERE client_id = %s",
      mysql_real_escape_string($_GET['id'])
      )
  );
  $projects = array();
  while($r = mysql_fetch_assoc($sth)) {
      $projects[] = array('id' => $r['id'], 'name' => $r['name']);
  }
  print json_encode($projects);
  exit;
  

  I haven't tested all of this, but it is more or less what you want, I think.

  edit - Tested and works, obviously it might not be exactly what you need but it gives you an idea of how to go about it. Hope it helps.

  edit 2 - The problem with your code is here:

  $.getJSON("../inc/get-projects.php", {id: client_id}, function(projects){
      projects = $('#p_id');
      projects.empty();
      $.each(projects, function() {
          var option = $('<option/>').attr('value', this.id).text(this.name);
          projects.append(option);
      });
  });
  

  You are overwriting the projects passed into the function with the projects in the 2nd line. I used a $ in my code to differentiate the two, which was admittedly perhaps not the best of ways. To fix, change the code to this:

  $.getJSON("../inc/get-projects.php", {id: client_id}, function(data){
      projects = $('#p_id');
      projects.empty();
      $.each(data, function() {
          var option = $('<option/>').attr('value', this.id).text(this.name);
          projects.append(option);
      });
  });
  

  Jarrod Dixon : Nice - way to go that extra mile!

  Coughlin : Wow! Thank you, let me work with this and give it a shot. Thank you so much, Ryan

  Coughlin : Its working PERFECT so far, but it is displaying p_id where it should be displaying the JSON content, the PHP loads the data correctly, but the jQuery is reading it wrong I think. p_id = ID that you gave in the example.

  Coughlin : So when my code prints it looks like: p_id And not loading my data. Thoughts?

  Paolo Bergantino : Can you edit your question with the code you are using? I tested the above and it works, so I need to see what you changed around. Are you assigning the id to 'id' and the project name to 'name' in PHP's json_encode?

  Paolo Bergantino : Essentially whatever variables you assign in the $projects[] = line in the PHP code need to match up with the this.id and this.name on the var option = line in the javascript code.

  Coughlin : I updated my code above! Thanks, Ryan

  Coughlin : Hey, check on my first question, I updated my code, it didn't seem to work. Do I need the other section in it? Ryan