CODEWITHSUNDEEP
phpajax
user2168066
user2168066

Reputation: 635

Populating Select box using PHP and Ajax returning empty

I am having an issue with an ajax function populating a list box with null options. I am fairly new to this and must be overlooking something. The DB connection is done through Sugarcrm and works, as I am using it for an auto complete function as well. I just can't seem to get the options to populate anything besides empty.

index.php

  <script>
        $(document).ready(function(){
            $.ajax({
                url: 'search.php',
                type: 'json',
                success:function(response){
                    var len = response.length;
                    $("#sel1").empty();
                    for( var i = 0; i<len; i++){
                        $("#sel1").append("<option value='"+name+"'></option>");

                    }
                }
            });
        });

</script>


            <select id="sel1" multiple size="6">
                <option value="0">- Select -</option>
            </select>

search.php

<?php

global $db;

$rolelistQry = "SELECT distinct name from acl_roles";


$rolelistData = $db->query($rolelistQry);

$name_array = array();

    while( $row = $rolelistData->fetch_assoc()){
        $name = $row['name'];
        $name_array[] = array("name" => $name);
    }
echo json_encode($name_array);



?>

Upvotes: 0

Views: 285

Answers (4)

Elliott Sadgamer
Elliott Sadgamer

Reputation: 53

In fact your are not looping through the array name,

This should work :

<script>
        $(document).ready(function(){
            $.ajax({
                url: 'search.php',
                type: 'json',
                success:function(response){

                    var result = $.parseJSON(response);

                    var len = result.length;

                    $("#sel1").empty();
                    for( var i = 0; i<len; i++){

                        $("#sel1").append("<option value='"+ result[i]['name']  +"'></option>");

                    }
                }
            });
        });

</script>


            <select id="sel1" multiple size="6">
                <option value="0">- Select -</option>
            </select>

Upvotes: 0

skagzilla
skagzilla

Reputation: 335

You're trying to access response as an array, right?

You'll need to do something like

$("#sel1").append("<option value='"+response[i].name+"'>"+response[i].name+"</option>");

to get the items out of the response array. (modified from majorlogic's answer)

Upvotes: 0

Camilo Go Jr.
Camilo Go Jr.

Reputation: 3234

$("#sel1").append("<option value='"+name+"'></option>");

name variable doesn't exists. Try changing it to response.name

$("#sel1").append("<option value='"+response.name+"'>"+response.name+"</option>");

Upvotes: 1

skagzilla
skagzilla

Reputation: 335

I'm guessing you're getting a bunch of blank options?

<option value="0">- Select -</option>

Is the right syntax: the option's value (when selected) will be 0, and it'll display Select.

So when you append new items in the ajax callback you'll want to have the options show something:

<option value='name'>NAME</option>

Upvotes: 0

Related Questions