What I'm trying to do is to create one-page checkout, and the part i get my courier cost i'm facing issue.

I want to send destination city id to controller and get back cost result from controller in order to let user select which way he/she wants to ship his/her product.

Sample from some live website:

• Imgur

• Ibb

I'm using third-party website data, nothing stored in my database such as country province city methods or even shipping prices

codes:

My page index function (where everything will show

public function index(Request $request) {
      $rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxxxxxx');
      $province = $rajaongkir->province();
      return view('front.raja', compact('province'));
}

route of it:

Route::get('/raja', 'RajaongkirController@index')->name('raja');

My cities function (where i get cities list based on province selected):

public function getCityList($province)
{
   $rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxx');
        $city = $rajaongkir->city($province);
        return response()->json($city);
}

route of it:

Route::get('/get-city-list/{province}','RajaongkirController@getCityList');

Cost data function (here is where supposed to return price methods base on selected city):

public function indexajax(Request $request, $cityID) {
          $rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxxxx');
          $province = $rajaongkir->province();

          $origin = 152; //Jakarta
          $destination = $request->cityID;
          $weight = 1;
          $courier = 'tiki'; // jne, tiki, pos
          $cost = $rajaongkir->cost($origin, $destination, $weight, $courier);
          return view('front.raja', compact('province', 'cost'));
}

route of it:

Route::get('/rajaajax/{cityID}', 'RajaongkirController@indexajax');

PS: City Id that comes from ajax supposed to be value of $destination where i put $destination = $request->cityID;

view

this part shows 2 select input where i choose provinces and cities

//HTML
<select name="province" id="">
                <option class="form-control" value="">Select Province</option>
                        @foreach ($province->data as $info)
                            <option value="{{$info->province_id}}">{{$info->province}}</option>
                        @endforeach
                </select>

                <select name="city" id="">
                    <option class="form-control" value="">Select City</option>
                  </select>


//JavaScript

<script type="text/javascript">
$(document).ready(function() {
  $('select[name="province"]').on('change', function() {
    var provinceID = $(this).val();
    if(provinceID) {
    $.ajax({
      url: '{{ url('get-city-list') }}/'+encodeURI(provinceID),
      type: "GET",
      dataType: "json",
      success:function(data) {
      $('select[name="city"]').empty();
      $.each(data.data, function(key, value) {
          $('select[name="city"]').append('<option id="city_id" class="form-control" value="'+ value['city_id'] +'">'+ value['city_name'] + ' - ' + value['type'] +'</option>');
          });
      }
    });
    }else{
      $('select[name="city"]').empty();
    }
  });
});
</script>

Cost view codes

here is my loop to show costs when have city id (tested on static $destination id)

Destination:
{{$cost->meta['destination']->province}}, //destination province
{{$cost->meta['destination']->type}}, //destination type such as city or restrict 
{{$cost->meta['destination']->city_name}}, //destination city name
{{$cost->meta['destination']->postal_code}}. //destination postal code 

@foreach($cost->data as $option)
<h3>{{$option->code}} <small>{{$option->name}}</small></h3>
  @foreach($option->costs as $cost)
   @foreach($cost->cost as $c)
    <label class="radio">
    <input name="post" value="{{ $c->value }}" type="radio">{{$cost->service}} / {{ $c->value }} Rp - {{ $c->etd }} hari @if(!empty($c->note))- {{ $c->note }} @endif
    </label>        
   @endforeach             
  @endforeach
@endforeach

Result will be like so:

PS:: I think: Cost part must be looped in controller because when i put it in blade (and user didn't choose city yet, it gives error of undefined/non-object cost) - Just thought :)

Anyone has idea how can i get that cost part after choosing city?

SOLVED

I've changed my cost to:

return response()->json($cost);

And added this JS to my view:

<script>
  jQuery( document ).ready( function( $ ) {
    $('body').on('change', 'select[name="city"]', function(e){
      $.ajaxSetup({
          headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
      });

       var cityID = $(this).val();
        if(cityID) {
            $.ajax({
              url: '{{ url('rajaajax') }}/'+encodeURI(cityID),
              type: "GET",
              dataType: "json",
              success:function(data) {
                $('#des').append(
                  '<p>Destination: ' + data['meta']['destination']['province'] + ' , ' + data['meta']['destination']['type'] + ' , ' + data['meta']['destination']['city_name'] + ' , ' + data['meta']['destination']['postal_code'] +'</p>'
                  );
                $.each(data.data, function(key, value) {
                  console.log();
                  $('#info').append('<h3>'+ value['code'] + '<small>' + value['name'] +'</small></h3>');
                    $.each(value.costs, function(key2, value2) {
                      $.each(value2.cost, function(key3, value3) {
                        $('select[name="postchoose"]').append('<option id="postchoose" class="form-control" value="'+ value3['value'] +'">'+ value2['service'] + ' - ' + value3['value'] + ' - ' + value3['etd'] +'</option>');
                      });
                    });
                });
              }
            });
        }else{
          console.log(data);
        }
    });
  });
</script>

Also Added this to my view:

<div id="calcul" style="margin-top: 30px;">
  <div id="des"></div>
  <dev id="info"></dev>
  <select name="postchoose" id="">
    <option class="form-control" value="">Select Shiping Method</option>
  </select>
</div>

However I would like to have radio button instead of drop-down but is OK :).

Hope it help others.