El problema es que filtre los datos de mi base de datos porque son 145,958, mediante selects
dinámicos, que al momento de que el usuario seleccione el país, le muestre los estados de ese país y a su vez las ciudades de ese estado y por último solo las colonias de esa ciudad.
Alimente mi base de datos y cree las relaciones entre tablas sin problema y al seleccionar el país si me muestra los estados relacionados.
El problema es que al seleccionar el estado, en ciudad esta no carga absolutamente nada.
No se que estoy haciendo mal simplemente deja todo en blanco, siento que algo no anda bien en mi archivo JS
, no soy muy bueno en javascript
haha.
Espero puedan ayudarme a ver que anda mal:
Tengo mi código de la siguiente manera ¿Que estoy omitiendo o haciendo mal?
Primero cree el modelo Country
:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Country extends Model
{
protected $table = 'Countries';
protected $fillable = ['name'];
}
El modelo Town
:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Town extends Model
{
protected $table = 'towns';
protected $fillable = ['name','state_id'];
public static function towns($id){
return Town::where('state_id','=',$id)
->get();
}
}
Y el modelo State
:
namespace App;
use Illuminate\Database\Eloquent\Model;
class State extends Model
{
protected $table = 'states';
protected $fillable = ['name', 'country_id'];
public static function states($id){
return State::where('country_id','=',$id)
->get();
}
}
Después cree la rutas y las dirigí a su función correspondiente en el controlador DeniedController
:
Route::get('states/{id}', 'DeniedController@getStates');
Route::get('towns/{id}', 'DeniedController@getTowns');
El DeniedController
:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Closure;
use Illuminate\Contracts\Auth\Guard;
use App\Country;
use App\State;
use App\Town;
class DeniedController extends Controller
{
public function __construct()
{
$this->middleware('auth');
}
public function index()
{
$countries = Country::pluck('name', 'id');
return view('admin.wizard',compact('countries'));
}
public function getStates(Request $request, $id){
if($request->ajax()){
$states = State::states($id);
return response()->json($states);
}
}
public function getTowns(Request $request, $id){
if($request->ajax()){
$towns = Town::towns($id);
return response()->json($towns);
}
}
}
Cree el archivo JS
que se encarga de recibir los id y filtrar llamado dropdown.js y lo incluí en la vista:
$("#country").change(function(event){
$.get("states/"+event.target.value+"",function(response,country){
$("#state").empty();
for(i=0; i<response.length; i++){
$("#state").append("<option value'"+response[i].id+"'> "+response[i].name+"</option>");
}
});
});
$("#state").change(function(event){
$.get("towns/"+event.target.value+"",function(response,state){
$("#town").empty();
for(i=0; i<response.length; i++){
$("#town").append("<option value'"+response[i].id+"'> "+response[i].name+"</option>");
}
});
});
Y por ultimo en el formulario agregue los select
:
{!! Form::select('country',$countries,null,['id'=>'country', 'class' => 'form-control']) !!} //Se encarga de listar los paises
{!! Form::select('state',['placeholder'=>'Selecciona'],null,['id'=>'state', 'class'=>'form-control']) !!}//Lista los estados que corresponden al pais
{!! Form::select('town',['placeholder'=>'Selecciona'],null,['id'=>'town', 'class'=>'form-control']) !!}//Lista las ciudades del estado seleccionado
Las migraciones están de la siguiente manera:
Migración de Countries
:
public function up()
{
Schema::create('countries', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->timestamps();
});
}
Migración de States
:
public function up()
{
Schema::create('states', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->unsignedBigInteger('country_id');
$table->foreign('country_id')->references('id')->on('countries')->onDelete('cascade');
$table->timestamps();
});
}
Migración de Towns
:
public function up()
{
Schema::create('towns', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->unsignedBigInteger('state_id');
$table->foreign('state_id')->references('id')->on('states')->onDelete('cascade');
$table->timestamps();
});
}
Y migración de Colonies
:
public function up()
{
Schema::create('colonies', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->unsignedBigInteger('town_id');
$table->foreign('town_id')->references('id')->on('towns')->onDelete('cascade');
$table->timestamps();
});
}
console.log('event')
dentro del$('#state').change()
, antes del$.get()
para ver si ese bloque de JS se está ejecutando. Si se está ejecutando, hacé unconsole.log(response)
dentro del$.get()
para ver que está devolviendo PHP. Más allá de eso, las relaciones entre las clases no las tenes hechas de la mejor manera. Leé la documentación de One To Many. Publicá el código de las migraciones o tu estructura de la DB para ver si está bien hecha.console.log(response)
y dentro delgetTowns()
hacé primero undd($id)
para ver si está llegando el ID. Después hacé undd($towns)
(antes del return), para ver que está obtenido. Igual vas a tener que armar las relaciones entre las clases de manera correcta, pero eso después lo vemos.dd()
de esas variables. Lo que estás mostrando no sirve porque es lo que imprime JS, lo que quiero ver es que genera PHP.