title: laravel ajax sending and returning at the same page
body: <p>What I'm trying to do is to create one-page checkout, and the part i get my courier cost i'm facing issue.</p>
  
  <p>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.</p>
  
  <p><strong>Sample from some live website:</strong></p>
  
  <ul>
  <li><p><a href="https://imgur.com/a/noFQH" rel="nofollow noreferrer">Imgur</a></p></li>
  <li><p><a href="https://ibb.co/mzJ23b" rel="nofollow noreferrer">Ibb</a></p></li>
  </ul>
  
  <blockquote>
    <p>I'm using third-party website data, nothing stored in my database such
    as <code>country</code> <code>province</code> <code>city</code> <code>methods</code> or even <code>shipping prices</code></p>
  </blockquote>
  
  <h1>codes:</h1>
  
  <p>My page <code>index</code> function (where everything will show</p>
  
  <pre><code>public function index(Request $request) {
        $rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxxxxxx');
        $province = $rajaongkir-&gt;province();
        return view('front.raja', compact('province'));
  }
  </code></pre>
  
  <p><code>route</code> of it:</p>
  
  <pre><code>Route::get('/raja', 'RajaongkirController@index')-&gt;name('raja');
  </code></pre>
  
  <p>My <code>cities</code> function (where i get cities list based on province selected):</p>
  
  <pre><code>public function getCityList($province)
  {
     $rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxx');
          $city = $rajaongkir-&gt;city($province);
          return response()-&gt;json($city);
  }
  </code></pre>
  
  <p><code>route</code> of it:</p>
  
  <pre><code>Route::get('/get-city-list/{province}','RajaongkirController@getCityList');
  </code></pre>
  
  <p><code>Cost</code> data function (here is where supposed to return price methods base on selected city):</p>
  
  <pre><code>public function indexajax(Request $request, $cityID) {
            $rajaongkir = new Rajaongkir\Domestic('xxxxxxxxxxxxx');
            $province = $rajaongkir-&gt;province();
  
            $origin = 152; //Jakarta
            $destination = $request-&gt;cityID;
            $weight = 1;
            $courier = 'tiki'; // jne, tiki, pos
            $cost = $rajaongkir-&gt;cost($origin, $destination, $weight, $courier);
            return view('front.raja', compact('province', 'cost'));
  }
  </code></pre>
  
  <p><code>route</code> of it:</p>
  
  <pre><code>Route::get('/rajaajax/{cityID}', 'RajaongkirController@indexajax');
  </code></pre>
  
  <blockquote>
    <p>PS: <code>City Id</code> that comes from ajax supposed to be value of
    <code>$destination</code> where i put <code>$destination = $request-&gt;cityID;</code></p>
  </blockquote>
  
  <h1>view</h1>
  
  <p>this part shows 2 select input where i choose <code>provinces</code> and <code>cities</code></p>
  
  <pre><code>//HTML
  &lt;select name="province" id=""&gt;
                  &lt;option class="form-control" value=""&gt;Select Province&lt;/option&gt;
                          @foreach ($province-&gt;data as $info)
                              &lt;option value="{{$info-&gt;province_id}}"&gt;{{$info-&gt;province}}&lt;/option&gt;
                          @endforeach
                  &lt;/select&gt;
  
                  &lt;select name="city" id=""&gt;
                      &lt;option class="form-control" value=""&gt;Select City&lt;/option&gt;
                    &lt;/select&gt;
  
  
  //JavaScript
  
  &lt;script type="text/javascript"&gt;
  $(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('&lt;option id="city_id" class="form-control" value="'+ value['city_id'] +'"&gt;'+ value['city_name'] + ' - ' + value['type'] +'&lt;/option&gt;');
            });
        }
      });
      }else{
        $('select[name="city"]').empty();
      }
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <h2>Cost view codes</h2>
  
  <p>here is my loop to show costs when have city id (tested on static <code>$destination</code> id)</p>
  
  <pre><code>Destination:
  {{$cost-&gt;meta['destination']-&gt;province}}, //destination province
  {{$cost-&gt;meta['destination']-&gt;type}}, //destination type such as city or restrict 
  {{$cost-&gt;meta['destination']-&gt;city_name}}, //destination city name
  {{$cost-&gt;meta['destination']-&gt;postal_code}}. //destination postal code 
  
  @foreach($cost-&gt;data as $option)
  &lt;h3&gt;{{$option-&gt;code}} &lt;small&gt;{{$option-&gt;name}}&lt;/small&gt;&lt;/h3&gt;
    @foreach($option-&gt;costs as $cost)
     @foreach($cost-&gt;cost as $c)
      &lt;label class="radio"&gt;
      &lt;input name="post" value="{{ $c-&gt;value }}" type="radio"&gt;{{$cost-&gt;service}} / {{ $c-&gt;value }} Rp - {{ $c-&gt;etd }} hari @if(!empty($c-&gt;note))- {{ $c-&gt;note }} @endif
      &lt;/label&gt;        
     @endforeach             
    @endforeach
  @endforeach
  </code></pre>
  
  <p>Result will be like so:</p>
  
  <p><a href="https://i.stack.imgur.com/BkYCv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BkYCv.png" alt="sample2"></a></p>
  
  <blockquote>
    <p>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 <code>cost</code>) - Just thought :)</p>
  </blockquote>
  
  <p>Anyone has idea how can i get that cost part after choosing city?</p>