4

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:

Adjunto imagen: introducir la descripción de la imagen aquí

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();
        });
    }
6
  • 1
    Hay que probar donde se está generando la falla. Primero hacé un 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é un console.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.
    – azeós
    Commented el 5 ago. 2019 a las 4:04
  • Listo, agregue el codigo de las migraciones y tambien realice las modificaciones que me sugieres, note que al hacer el console.log('event') no obtiene bloqueo ni error, pero cuando hago el console.log(response) todo esta en blanco Commented el 5 ago. 2019 a las 4:19
  • 1
    Dejá el console.log(response) y dentro del getTowns() hacé primero un dd($id) para ver si está llegando el ID. Después hacé un dd($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.
    – azeós
    Commented el 5 ago. 2019 a las 4:46
  • Al hacer cualquiera de los dos dd($id) o dd($towns) me imprime como 100 veces "undefined" en la variable, puedes verlo en este link ibb.co/3c3zSFr, eso significa que no esta recibiendo los parametros correctamente ni el id, como solucionaria esto? Commented el 6 ago. 2019 a las 1:10
  • 1
    Fijate con las herramientas de desarrollador, en la solapa de red, que te aparece en respuesta al hacer un 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.
    – azeós
    Commented el 6 ago. 2019 a las 1:51

1 respuesta 1

2
+50

El error es que no estas generando correctamente el HTML para que el option tenga un value, ya que te esta faltando agregar el = entre el atributo value y el valor '"+response[i].id+"'.

Esto provoca que el option no tenga un "value", lo que resulta en que el valor del mismo sea igual al texto que contiene.

HTML <option> -> Atributo value

El contenido de este atributo representa el valor que será enviado al enviar el formulario si una determinada opción está seleccionada. Si se omite el atributo el valor se tomará del texto del contenido del elemento option.

Solución:

"<option value='"+response[i].id+"'> "+response[i].name+"</option>"

Ejemplo:

$("#state").append("<option value='"+response[i].id+"'> "+response[i].name+"</option>");
1
  • No lo puedo creer jaja tienes toda la razon, ese fue el problema que soluciono todo, muchas gracias! Commented el 8 ago. 2019 a las 14:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.