jQuery and Auto-populat selects

Question

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.

 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;


?>

Oh, I see what is wrong. You see how I named my variable '$projects' and you named yours 'projects'? The value that you passed into the function is already called projects without the $, so when you do projects = $('#p_id'); you are overwriting the server's output. I updated my answer. — Paolo Bergantino, Feb 18 '09 at 18:01
What doesn't work with it? Get Firebug for Firefox and check what the server is returning. — Paolo Bergantino, Feb 19 '09 at 03:06
Reponse: [] Its sending no parameters to the page Param: id Any thoughts? Thanks, Ryan — , Mar 01 '09 at 18:24

Paolo Bergantino · Answer 1 · 2009-02-18T18:00:44.060

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);
    });
});

Wow! Thank you, let me work with this and give it a shot. Thank you so much, Ryan — , Feb 16 '09 at 02:48
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. — , Feb 16 '09 at 03:35
So when my code prints it looks like: And not loading my data. Thoughts? — , Feb 16 '09 at 03:42
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, Feb 16 '09 at 04:26
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. — Paolo Bergantino, Feb 16 '09 at 04:29
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 — , Feb 18 '09 at 22:16

jQuery and Auto-populat selects

1 Answers1

Linked