How to get data from API with ajax on select (dropdown option value) in Codeigniter?

Question

I have a case in my code, the result does not appear or work, the city form select is still blank. Here is the HTML:

<div class="form-group">
  <label>Province</label>
  <select class="form-control" name="province" id="province">

    <?php foreach($state_data->data as $sd){ ?>
    <option id="<?php echo $sd->code; ?>" value="<?php echo $sd->code; ?>" <?php echo (isset($this->session->userdata))?(($this->session->userdata('session_state_code') == $sd->code)?"selected":""):"";?>>
      <?php echo $sd->name ;?>
    </option>
    <?php } ?>
  </select>
</div>
<div class="form-group" id="city_section">
  <label>City</label>
  <select class="form-control" name="city" id="city">

    <?php foreach($city_data->data as $cd){ ?>
    <option value="<?php echo $cd->code; ?>" <?php echo (isset($this->session->userdata))?(($this->session->userdata('session_city_code') == $cd->code)?"selected":""):"";?>>
      <?php echo $cd->name ;?>
    </option>
    <?php } ?>
  </select>
</div>

This the javascript to get data from the controller:

$('#province').on('change', function() {
      var id = $(this).val();;
      $.ajax({
        type: "POST",
        dataType: 'json',
        url: "<?php echo base_url() ?>edit_profile/get_city",
        data: {
          id: $(this).val()
        },
        success: function(data) {
          $('select#city').html('');
          for (var i = 0; i < data.length; i++) {
            $("<option />").val(data[i].code)
              .text(data[i].name)
              .appendTo($('select#city'));
          }
        }
      });
    }

and this the controller to get data from API:

public function get_city(){
  $m_url = URL_API;
  $function = "get_location";
  $i = $_REQUEST['id'];
  $url = $m_url . "/" . $function . "?" . "t=city" . "&" . "i=".$i;
  $json_data = file_get_contents($url);
  $data = json_decode($json_data);  
}

any error u get in console ?

Maninderpreet Singh
– Maninderpreet Singh

2016-05-04 07:37:35 +00:00
Commented May 4, 2016 at 7:37 — Maninderpreet Singh
– Maninderpreet Singh, Commented May 4, 2016 at 7:37
no, i dont get @ManinderpreetSingh

kurama-rho
– kurama-rho

2016-05-04 07:44:59 +00:00
Commented May 4, 2016 at 7:44 — kurama-rho
– kurama-rho, Commented May 4, 2016 at 7:44

Saty · Accepted Answer · 2016-05-04 07:39:27Z

1

Your function does't return anything to ajax you need to echo json_decode

public function get_city(){
        $m_url = URL_API;
        $function = "get_location";
        $i = $_REQUEST['id'];
        $url = $m_url . "/" . $function . "?" . "t=city" . "&" . "i=".$i;
        $json_data = file_get_contents($url);
        echo $data = json_decode($json_data);// use echo here
    }

answered May 4, 2016 at 7:39

Saty

22.5k7 gold badges35 silver badges52 bronze badges

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

1 Comment

kurama-rho Over a year ago

I add echo but still same @Saty

Medet Ahmetson Atabayev · Accepted Answer · 2016-05-04 08:05:31Z

0

You dont need json_decode(), just print $json_data. Because, it's already returns as string by file_get_contents().

public function get_city(){

    $m_url = URL_API;
    $function = "get_location";
    $i = $_REQUEST['id'];
    $url = $m_url . "/" . $function . "?" . "t=city" . "&" . "i=".$i;
    $json_data = file_get_contents($url);
    echo $json_data;


}

Convert returned data to JSON object. And then use it:

   success: function(data) {
      var jsonObj = JSON.parse(data);
      $('select#city').html('');
      for (var i = 0; i < jsonObj.length; i++) {
        $("<option />").val(jsonObj[i].code)
          .text(jsonObj[i].name)
          .appendTo($('select#city'));
      }
    }

edited May 4, 2016 at 8:05

answered May 4, 2016 at 7:44

Medet Ahmetson Atabayev

5403 silver badges7 bronze badges

3 Comments

kurama-rho Over a year ago

I have add your advice but dont effect anything. but thanks. what about my ajax?

Medet Ahmetson Atabayev Over a year ago

Convert the returned string to JSON object. You are missed it.

kurama-rho Over a year ago

I have converted but still empty

graceth · Accepted Answer · 2016-05-04 08:59:27Z

0

Having echo $json_data; ,now try to put error callback in your Ajax so that you will see the error response of your request. From there you will have an idea what went wrong within the process.

error: function(err){
  console.log(err.responseText);
}

answered May 4, 2016 at 8:59

graceth

1788 bronze badges

2 Comments

kurama-rho Over a year ago

there is no error result/ response friend. thanks for your advice

graceth Over a year ago

Instead of data: { id: $(this).val() }, should be data: { 'id': id }, since you have var id= $(this).val() .

Collectives™ on Stack Overflow

How to get data from API with ajax on select (dropdown option value) in Codeigniter?

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related