ajax response json data not set in dropdown

Question

$(document).ready(function(){
 $("#prjname").autocomplete("ajaxcomplete.php", {
        selectFirst: true,
                matchContains:true
    }).result(function(event, item) {
                 var id=item; 

                  $.ajax({
                           url: "db_data.php",
                           async: false,
                           data:"id="+id,
                           success: function(data)
                            {

                            }
                     })
                });
});

IUn ajax response i can get the data like

 [{"id":"1","name":"Analysis"},{"id":"2","name":"Coding"},{"id":"3","name":"Documentation"},{"id":"23","name":"ppt"}]

Now how to fill up the data in dropdown? I have tried with the code as below:

var arr = $.parseJSON(data);
                $('.act').empty();
                 $('#actname').append($('<option/>').attr("value","").text("Select Activity"));
                     arr.filter(function (option)
                        {
                            $('#actname').append($('<option/>').attr("value", option.id).text(option.name));
                        })

but it will not fill the data.

Why are you parsing a `data` to JSON format, when it is already in JSON format? — Artyom Neustroev, Apr 30 '13 at 12:29
if i am not parsing json dat still same issue is there, i have use this code on simple javscript function then it was working fine — jugni, Apr 30 '13 at 12:31
This will help you http://stackoverflow.com/questions/2637694/how-to-populate-a-dropdownlist-with-json-data-in-jquery — Anand G, Apr 30 '13 at 12:36

Brewal · Answer 1 · 2013-04-30T12:40:15.653

When in your success callback :

success: function (data) {
            response($.map(data, function (item) {
                return {
                    label: item.name,
                    value: item.id
                };
            }));
        }});

EDIT : A good explanation here : http://www.jensbits.com/2011/08/24/using-jquery-autocomplete-when-remote-source-json-does-not-contain-label-or-value-fields/

score 1 · Answer 2 · answered Apr 30 '13 at 12:33

$.ajax({
                           url: "db_data.php",
                           async: false,
                           data:"id="+id,
                           success: function(data)
                            {
                               var arr = $.parseJSON(data);
                               $('.act').empty();
                               $('#actname').append('<option value="" > Select Activity</option>');
                               $.each(arr, function(i, item) {
                                     $('#actname').append('<option value="'+item.id+'" >'+item.name+'</option>');

                                });

                            }
       })

score 0 · Answer 3 · answered Apr 30 '13 at 12:32

try this

 $.ajax({
            url: "db_data.php",
            async: false,
            data:"id="+id,
            dataType:'json', //<---just to make sure the response is in JSOn so that you don't have to parse it again 
            success: function(data)
            {
                $('.act').empty();
                $('#actname').append($('<option/>').attr("value","").text("Select Activity"));
                $.each(data,function(i,v)
                {
                    $('#actname').append($('<option/>').attr("value", v.id).text(v.name));
                 }) 
            }
         })

score 0 · Answer 4 · answered Apr 30 '13 at 12:33

I'm not sure if this is "proper" practice or not, but generally for this I build the dropdown list as a string in the PHP script on the back-end, then return that string to the ajax call. Then you can do a simple "select_field_id.innerHTML = returned_string" to fill the dropdown list.

Like so: in the PHP:

$selecthtml .= "<option value='" . $val . "'>" . $text . "</option>";
echo $selecthtml;

Then in the javascript:

document.getElementById("selectid").innerHTML = data;

Again, not sure if this is "proper" or not, but it works for me.

score 0 · Answer 5 · answered Apr 30 '13 at 12:45

on success loop through options
success: function(data)
    {
        var arr = $.parseJSON(data);
        $('.act').empty();
        $('#actname').append('<option value="" > Select Activity</option>');
        $.each(arr, function(i, item) {
             $('#actname').append(new Option(item.name,item.id));

        });

}

score 0 · Accepted Answer · answered May 01 '13 at 06:03

<script>
$(document).ready(function(){
 $("#prjname").autocomplete("ajaxcomplete.php", {
        selectFirst: true,
                matchContains:true
    }).result(function(event, item) {
                 var id=item; 
                    $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: "db_data.php",
                            data: "id="+id,
                               success: function(data)
                                {
                                    alert(data);
                                    $('.act').empty();
                                    $('#actname').append($('<option/>').attr("value","").text("Select Activity"));
                                    for (var i = 0, len = data.length; i < len; ++i) 
                                    {
                                        var prj = data[i];
                                        $('#actname').append($('<option/>').attr("value", prj.id).text(prj.name));
                                        $('.project_id').val(prj.project_id);

                                    }
                                }
                             })

                });
});
</script>

This is my solution.

ajax response json data not set in dropdown

6 Answers6