Populating Select box using PHP and Ajax returning empty

Question

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



?>

Camilo Go Jr. · Accepted Answer · 2017-02-07 18:58:47Z

1

$("#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>");

edited Feb 7, 2017 at 18:58

answered Feb 7, 2017 at 18:40

Camilo Go Jr.

3,2242 gold badges13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Camilo Go Jr. Over a year ago

nvm. saw it. Anyway can you see what 'response' will return? do a quick console.log(response) and tell me what it will return

Camilo Go Jr. Over a year ago

and just as skagzilla mentioned. "<option value='"+response.name+"'>"+response.name+"</option>"

user2168066 Over a year ago

Ok I see what i missed. Now it just went from '' to 'undefined'

user2168066 Over a year ago

That part is declared now, still no luck

Camilo Go Jr. Over a year ago

trying changing "$name_array[] = array("name" => $name);" to array_push($name_array, $name);

skagzilla · Accepted Answer · 2017-02-07 18:42:52Z

0

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>

answered Feb 7, 2017 at 18:42

skagzilla

3352 silver badges11 bronze badges

3 Comments

user2168066 Over a year ago

That makes sense. I am still getting the blank options, so i'm guessing it has to do with the response now.

skagzilla Over a year ago

In php, is name_array ever initialized (name_array = [])? I'm with majorlogic, we need some more info about what response comes back as.

user2168066 Over a year ago

I found out the issue, I had the type = json, not dataType = json.

skagzilla · Accepted Answer · 2017-02-07 19:32:02Z

0

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)

answered Feb 7, 2017 at 19:32

skagzilla

3352 silver badges11 bronze badges

Comments

Elliott Sadgamer · Accepted Answer · 2017-02-07 19:40:36Z

0

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>

edited Feb 7, 2017 at 19:40

answered Feb 7, 2017 at 18:59

Elliott Sadgamer

531 silver badge12 bronze badges

Collectives™ on Stack Overflow

Populating Select box using PHP and Ajax returning empty

4 Answers 4

5 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related