ajax下拉列表未显示laravel

时间:2017-05-07 06:47:38

标签: jquery ajax laravel dropdown

我在下拉城市使用ajax时遇到了限制。当我点击省部分时,它不会显示城市数据。

Screenshoot: enter image description here

Regency.php

    namespace App;

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

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

    public static function populate() {
        foreach (RajaOngkir::Kota()->all() as $kota) {
            $model = static::firstOrNew(['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');
    }
}

Province.php

    namespace App;

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

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

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

AddressController.php

    namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Regency;

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

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

address.blade.php

{!! Form::open(['url' => '/checkout/address', 'method'=>'post', 'class' => 'form-horizontal']) !!}

    <div class="form-group {!! $errors->has('name') ? 'has-error' : '' !!}">
  {!! Form::label('name', 'Nama', ['class' => 'col-md-4 control-label']) !!}
  <div class="col-md-6">
    {!! Form::text('name', null, ['class'=>'form-control']) !!}
    {!! $errors->first('name', '<p class="help-block">:message</p>') !!}
  </div>
</div>

<div class="form-group {!! $errors->has('detail') ? 'has-error' : '' !!}">
  {!! Form::label('detail', 'Alamat', ['class' => 'col-md-4 control-label']) !!}
  <div class="col-md-6">
    {!! Form::textarea('detail', null, ['class'=>'form-control', 'rows' => 3]) !!}
    {!! $errors->first('detail', '<p class="help-block">:message</p>') !!}
  </div>
</div>

<div class="form-group {!! $errors->has('province_id') ? 'has-error' : '' !!}">
  {!! Form::label('province_id', 'Provinsi', ['class' => 'col-md-4 control-label']) !!}
  <div class="col-md-6">
    {!! Form::select('province_id', [''=>'']+DB::table('provinces')->lists('name','id'), null, ['class'=>'form-control', 'id' => 'province_selector']) !!}
    {!! $errors->first('province_id', '<p class="help-block">:message</p>') !!}
  </div>
</div>

<div class="form-group {!! $errors->has('regency_id') ? 'has-error' : '' !!}">
  {!! Form::label('regency_id', 'Kabupaten / Kota', ['class' => 'col-md-4 control-label']) !!}
  <div class="col-md-6">
    {!! Form::select('regency_id',
      old('province_id') !== null ? DB::table('regencies')->where('province_id', old('province_id'))->lists('name', 'id') : [],
      old('regency_id'), ['class'=>'form-control', 'id' => 'regency_selector']) !!}
    {!! $errors->first('regency_id', '<p class="help-block">:message</p>') !!}
  </div>
</div>

<div class="form-group {!! $errors->has('phone') ? 'has-error' : '' !!}">
  {!! Form::label('phone', 'Telepon', ['class' => 'col-md-4 control-label']) !!}
  <div class="col-md-6">
    <div class="input-group">
      <div class="input-group-addon">+62</div>
      {!! Form::text('phone', null, ['class'=>'form-control']) !!}
    </div>
    {!! $errors->first('phone', '<p class="help-block">:message</p>') !!}
  </div>
</div>

    <div class="form-group">
        <div class="col-md-6 col-md-offset-4">
            {!! Form::button('Lanjut <i class="fa fa-arrow-right"></i>', array('type' => 'submit', 'class' => 'btn btn-primary')) !!}
        </div>
    </div>

{!! Form::close() !!}

AJAX

$(document).ready(function () {
  // 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
  }

})

路线

// Checkout
Route::get('checkout/login', 'CheckoutController@login');
Route::post('checkout/login', 'CheckoutController@postLogin');
Route::get('checkout/address', 'CheckoutController@address');
Route::post('checkout/address', 'CheckoutController@postAddress');
Route::group(['middleware' => 'api'], function () {
    Route::get('checkout/address/regencies', 'AddressController@regencies');
});
Route::get('checkout/payment', function() {
    return var_dump(session()->get('checkout'));
});

0 个答案:

没有答案