Oncom's avatar
Level 1

The data on the dropdown is not showing

I tried Creating a dependent dropdown to select a city, when I have selected province, the data on the city does not appear.

Province.php


namespace App;

use RajaOngkir; use Illuminate\Database\Eloquent\Model;

class Province extends Model { protected $fillable = ['province_id','name']; protected $primaryKey = 'province_id';

public static function populate()
{
    foreach(RajaOngkir::Provinsi()->all() as $province) {
        $model = static::firstOrNew(['province_id' => $province['province_id']]);
        $model->name = $province['province'];
        $model->save();
    }
}

}

Regency.php


namespace App;

use RajaOngkir; use Illuminate\Database\Eloquent\Model;

class Regency extends Model { protected $fillable = ['regency_id','province_id','name']; protected $primaryKey = 'regency_id';

public static function populate()
{
    foreach(RajaOngkir::Kota()->all() as $kota) {
        $model = static::firstOrNew(['regency_id' => $kota['city_id']]);
        $model->province_id = $kota['province_id'];
        $model->name = $kota['type'] . ' ' . $kota['city_name'];
        $model->save();
    }
}

public function province()
{
    return $this->belongsTo('App\Province');
}

}

AddressController.php


namespace App\Http\Controllers;

use App\Http\Controllers\Controller; use App\Regency; use Illuminate\Http\Request;

class AddressController extends Controller { public function regencies(Request $request) { $this->validate($request, [ 'province_id' => 'required|exists:provinces,province_id' ]);

    return Regency::where('province_id', $request->get('province_id'))->get();
}

}

_address-field.blade.php



  {!! Form::label('name', 'Nama', ['class' => 'col-md-4 control-label']) !!}
  
    {!! Form::text('name', null, ['class'=>'form-control']) !!}
    {!! $errors->first('name', '

:message

') !!} {!! Form::label('detail', 'Alamat', ['class' => 'col-md-4 control-label']) !!} {!! Form::textarea('detail', null, ['class'=>'form-control', 'rows' => 3]) !!} {!! $errors->first('detail', '

:message

') !!} {!! Form::label('province_id', 'Provinsi', ['class' => 'col-md-4 control-label']) !!} {!! Form::select('province_id', [''=>'']+DB::table('provinces')->lists('name','province_id'), null, ['class'=>'form-control', 'id' => 'province_selector']) !!} {!! $errors->first('province_id', '

:message

') !!} {!! Form::label('regency_id', 'Kabupaten / Kota', ['class' => 'col-md-4 control-label']) !!} {!! Form::select('regency_id', old('province_id') !== null ? DB::table('regencies')->where('province_id', old('province_id'))->lists('name', 'regency_id') : [], old('regency_id'), ['class'=>'form-control', 'id' => 'regency_selector']) !!} {!! $errors->first('regency_id', '

:message

') !!} {!! Form::label('phone', 'Telepon', ['class' => 'col-md-4 control-label']) !!} +62 {!! Form::text('phone', null, ['class'=>'form-control']) !!} {!! $errors->first('phone', '

:message

') !!}

0 likes
3 replies
Oncom's avatar
Level 1

i use selectize.js - v0.12.4 and


  // checkout address new form
  if ($('#province_selector').length > 0) {
    var xhr
    var province_selector, $province_selector
    var regency_selector, $regency_selector
$province_selector = $('#province_selector').selectize({
  sortField: 'text',
  onChange: function (value) {
    if (!value.length) {
      regency_selector.disable()
      regency_selector.clearOptions()
      return
    }
    regency_selector.clearOptions()
    regency_selector.load(function (callback) {
      xhr && xhr.abort()
      xhr = $.ajax({
        url: '/address/regencies?province_id=' + value,
        success: function (results) {
          regency_selector.enable()
          callback(results)
        },
        error: function () {
          callback()
        }
      })
    })
  }
})

$regency_selector = $('#regency_selector').selectize({
  sortField: 'name',
  valueField: 'id',
  labelField: 'name',
  searchField: ['name']
})

province_selector = $province_selector[0].selectize
regency_selector = $regency_selector[0].selectize

}

bunnypro's avatar

check in your browser console window. is there any expected xhr request

Please or to participate in this conversation.