Populating dropdown using ajax php codeigniter

Question

I have been trying all the help available on different forums but now give up and posting my question here. Trying to populate dropdown using ajax call. Getting the data in json format successfully. But don't know to fill dropdown. code below: Controller:

function getRegion()
{
    $this->load->model('Settings_model');
    $title = $this->input->get('title');

    $result =   array("region" => $this->Settings_model->getSelectedRegion($title));
    echo json_encode($result);      
}

View:

        $(document).on('change', '#campaignSel', function() {
        changecampaign();
    });

    function changecampaign(){
        var title= "New Normal";//$('#campaignSel option:selected').text();//$('#campaignSel').text();
        $regionSel = $("#regionSel");
            $.ajax({
                type:"GET",
                url: "<?php echo base_url('Pricecomparison/getRegion'); ?>",
                data:{ "title":"New Normal"},
                datatype: "json",
                success: function(result){
                    var appenddata;
                    $.each(result, function (key, value) {
                        appenddata += "<option value = '" + value.id + " '>" + value.region + " </option>";                        
                    });
                    $('#regionSel').html(appenddata);
                },
                error: function(xhr, textStatus, error){
                    console.log(xhr.statusText);
                    console.log(textStatus);
                    console.log(error);
                }
            });
        }

Response: {"region":[{"id":"1","region":"109 FEATHERSTON ST (ELEC)\r\n"},{"id":"2","region":"ASHBURTON/MID CANTERBURY ELEC"}]} I want to fill dropdown with Regions.

$.each(result.region, function (key, value) { appenddata += "<option value = '" + value.id + " '>" + value.region + " </option>"; }); — JYoThI
– JYoThI, Commented May 17, 2017 at 2:24
gives this error TypeError: obj is undefined length = obj.length, — Danish
– Danish, Commented May 17, 2017 at 2:53

JYoThI · Accepted Answer · 2017-05-17 03:49:07Z

1

you need to loop the region like this $.each(result.region, function (key, value) { instead of result

Update1:

added if condition if ($.isArray(result.region)){ ... }

result =  {"region":[{"id":"1","region":"109 FEATHERSTON ST (ELEC)\r\n"},{"id":"2","region":"ASHBURTON/MID CANTERBURY ELEC"}]}
var appenddata='';
if ($.isArray(result.region)){
$.each(result.region, function (key, value) {
                        appenddata += "<option value = '" + value.id + " '>" + value.region + " </option>";    
                        
                        console.log(appenddata);
                    });
                    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited May 17, 2017 at 3:49

answered May 17, 2017 at 2:23

JYoThI

12.1k1 gold badge13 silver badges26 bronze badges

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

2 Comments

Danish Over a year ago

I have been trying the same for years. but it does not populate the dropdown. and give this error too. TypeError: obj is undefined length = obj.length,

Danish Over a year ago

if condition helps in not to thru the error. But the question is that how come the response data is empty since it display the data in console. console.log(result); Means data is coming in response.

Danish · Accepted Answer · 2017-05-17 23:23:23Z

Finally I resolved the issues in my code. I like to share the changes I made to my code below: added:

contentType: "application/json",

and

parsedobj = JSON.parse(result)

so the final ajax code is:

$.ajax({
                type:"GET",
                url: "<?php echo base_url('Pricecomparison/getRegion'); ?>",
                data:{ "title":title},
                contentType: "application/json",
                datatype: "json",
                success: function(result){
                     parsedobj = JSON.parse(result)
                     var appenddata='';
                        $.each(parsedobj.region, function(index, value) 
                        {
                            appenddata += "<option value = '" + index + "'>" + value.region + " </option>";    
                        });

                        $('#regionSel').html(appenddata); 
                },
                error: function(xhr, textStatus, error){
                    console.log(xhr.statusText);
                    console.log(textStatus);
                    console.log(error);
                }
            });

Collectives™ on Stack Overflow

Populating dropdown using ajax php codeigniter

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related