3

He mirado la forma de hacer esto, el problema es que siempre me siento inseguro de si es la forma correcta o no, ya que estoy trabajando con Laravel y pienso que quizás ya existe una forma de hacerlo.

En un formulario de alta necesito que se seleccione una "planta" y luego se cargue el select de "areas", posteriormente se debe seleccionar un "área" para que se cargue el select de "equipos" y una vez hecho esto se deben rellenar los campos restantes y dar el alta correspondiente.

¿Cuál es la mejor forma de hacer esto en Laravel? Mis modelos están relacionados, de tal forma que se puede acceder así: $plant->areas; o $plant->areas->first->equipment->id;

He estado probando con con JQuery pero no he podido hacerlo andar, aquí les dejo la evidencia:

Código JQuery:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#plant_id').val(1);
    loadAreas();

    $('#plant_id').change(function(){
      loadAreas();
    });
  })
</script>
<script type="text/javascript">
  function loadAreas(){
    $.ajax({
      type:"POST",
      url:"{{route('getareas')}}",
      data:"plant_id=" + $('#plant_id').val(),
      success:function(r){
        $('#area_id').html(r);
      }
    });
  }
</script>

Declaración de la ruta:

Route::post('publisher/getareas', 'PublisherController@getareas')->name('getareas');

Método en el controlador:

public function getareas(Request $request)
     {
         $areas = Areas::where('plant_id','=', $request['plant_id'])->get();
         return view('publishers.index', compact('areas'));
     }

1 respuesta 1

2

No creo que haya una "mejor" forma de hacerlo, sino varias formas, que dependiendo de lo que necesites, podrás evaluar cual es la mejor para vos. Te paso una forma para que puedas lograr lo que quieres.

Comienzo por Laravel.
Suponiendo que tienes estos 3 Modelos: Planta, Area y Equipo.
También que Area tiene un campo 'planta_id' y Equipo tiene un campo 'area_id'.

En el controlador puedes crear los métodos para retornar todas las Planta, todas las Area que coincidan con la id de la Planta (que le pasas en el Request), y todos los Equipo que coincidan con la id del Area (que también le pasas en el Request). Algo así:

Métodos en el controlador:

public function getplants()
{
    try {    
        $plantas = Planta::all();
        $response = ['data' => $plantas];
    } catch (\Exception $exception) {
        return response()->json([ 'message' => 'There was an error retrieving the records' ], 500);
    }
    return response()->json($response);
}

public function getareas(Request $request)
{
    try {    
        $plant_id = $request->input('plant_id');
        $areas = Area::when($plant_id, function ($query) use ($plant_id) {
            $query->where('plant_id', $plant_id)
        })->get();
        $response = ['data' => $areas];
    } catch (\Exception $exception) {
        return response()->json([ 'message' => 'There was an error retrieving the records' ], 500);
    }
    return response()->json($response);
}

public function getequipos(Request $request)
{
    try {    
        $area_id = $request->input('area_id');
        $equipos = Equipo::when($area_id, function ($query) use ($area_id) {
            $query->where('area_id', $area_id)
        })->get();
        $response = ['data' => $equipos];
    } catch (\Exception $exception) {
        return response()->json([ 'message' => 'There was an error retrieving the records' ], 500);
    }
    return response()->json($response);
}

nota que estos métodos no devuelven una vista, sino que solo devuelven los datos.

Para las rutas puedes usar el método GET, ya que estás obteniendo datos, no posteándolos.

Declaración de las rutas:

Route::get('publisher/getplants', 'PublisherController@getplants')->name('getplants');
Route::get('publisher/getareas', 'PublisherController@getareas')->name('getareas');
Route::get('publisher/getequipos', 'PublisherController@getequipos')->name('getequipos');

Bien, hasta aquí lo de Laravel.


Ahora el Html y Js, que irían en la vista donde está tu formulario Html.

Solo puse lo que atañe a los selects, pues no sé como se ve tu formulario:

<div>
    <label>Planta:</label>
    <select id="plant_id">
        <option value="">Todas--</option>
    </select>
</div>
<div>
    <label>Area:</label>
    <select id="area_id">
        <option value="">Elije una planta--</option>
    </select>
</div>
<div>
    <label>Equipo:</label>
    <select id="equipo_id">
        <option value="">Elije un area--</option>
    </select>
</div>

<script type="text/javascript">
$(document).ready(function() {
    // por comodidad puedes asignar los selects a una variable, ya que los vas a usar mas de una vez
    var plantSelect = $('#plant_id');
    var areaSelect = $('#area_id');
    var equipoSelect = $('#equipo_id');
    // primero obtienes las plantas y llenas el select
    function populatePlantSelect() {
        $.ajax({
            url: "{{ route('getplants') }}",
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                $.each(response.data, function (key, value) {
                    plantSelect.append("<option value='" + value.id + "'>" + value.name + "</option>");
                });
            },
            error: function () {
                alert('Hubo un error obteniendo las plantas!');
            }
        });
    }
    populatePlantSelect();
    // luego indicas que cuando se seleccione una planta, se obtengan las areas correspondientes y se llene el select de areas
    plantSelect.change(function(){
        var plantId = $(this).val();
        areaSelect.empty();

        if (plantId) {
            $.ajax({
                url: "{{ route('getareas') }}",
                type: 'GET',
                data: { plant_id: plantId },
                dataType: 'json',
                success: function (response) {
                    areaSelect.append('<option value="">--Elije un area</option>')
                    $.each(response.data, function (key, value) {
                        areaSelect.append("<option value='" + value.id + "'>" + value.name + "</option>");
                    });
                },
                error : function(){
                    alert('Hubo un error obteniendo las areas!');
                }
            });
        }
    });
    // finalmente, indicas que cuando se seleccione un area, se obtengan los equipos correspondientes y se llene el select de equipos
    areaSelect.change(function(){
        var areaId = $(this).val();
        equipoSelect.empty();

        if (areaId) {
            $.ajax({
                url: "{{ route('getequipos') }}",
                type: 'GET',
                data: { area_id: areaId },
                dataType: 'json',
                success: function (response) {
                    equipoSelect.append('<option value="">--Elije un equipo</option>')
                    $.each(response.data, function (key, value) {
                        equipoSelect.append("<option value='" + value.id + "'>" + value.name + "</option>");
                    });
                },
                error : function(){
                    alert('Hubo un error obteniendo los equipos!');
                }
            });
        }
    });
});
</script>

Espero que te sirva, puede que haya algún error pues lo escribí de memoria, pero la idea es esa.


UPDATE
Para el caso que comentas:

Le quité el option value de "Elije un área/planta/equipo", eso hace que siempre se selecciona la primera planta, área o equipo (es lo que quiero), pero me gustaría que automáticamente se carguen las áreas y equipos.

Puedes agregar .trigger('change') en cada select luego de que se terminen de cargar las options, lo cual lanzará el evento 'change' en ese select, que es lo que estás escuchando para llenar el select siguiente.
Aunque el select tomará el valor del primer option, puedes también agregarle el atributo 'selected' con .attr('selected','selected').
En el código anterior se vería así:

    function populatePlantSelect() {
        $.ajax({
            url: "{{ route('getplants') }}",
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                $.each(response.data, function (key, value) {
                    plantSelect.append("<option value='" + value.id + "'>" + value.name + "</option>");
                });
                $("#plant_id option:first").attr('selected','selected');
                plantSelect.trigger('change');
            },
            error: function () {
                alert('Hubo un error obteniendo las plantas!');
            }
        });
    }
    populatePlantSelect();

    plantSelect.change(function(){
        var plantId = $(this).val();
        areaSelect.empty();

        if (plantId) {
            $.ajax({
                url: "{{ route('getareas') }}",
                type: 'GET',
                data: { plant_id: plantId },
                dataType: 'json',
                success: function (response) {
                    $.each(response.data, function (key, value) {
                        areaSelect.append("<option value='" + value.id + "'>" + value.name + "</option>");
                    });
                    $("#area_id option:first").attr('selected','selected');
                    areaSelect.trigger('change');
                },
                error : function(){
                    alert('Hubo un error obteniendo las areas!');
                }
            });
        }
    });

    areaSelect.change(function(){
        var areaId = $(this).val();
        equipoSelect.empty();

        if (areaId) {
            $.ajax({
                url: "{{ route('getequipos') }}",
                type: 'GET',
                data: { area_id: areaId },
                dataType: 'json',
                success: function (response) {
                    $.each(response.data, function (key, value) {
                        equipoSelect.append("<option value='" + value.id + "'>" + value.name + "</option>");
                    });
                    $("#equipo_id option:first").attr('selected','selected');
                },
                error : function(){
                    alert('Hubo un error obteniendo los equipos!');
                }
            });
        }
    }); 

UPDATE 2
Para el caso que comentas:

También tengo otra duda, por ejemplo, para el formulario de editar ¿cómo podría hacer para que se seleccionen todas las opciones que se seleccionaron al momento del alta?, normalmente se podría algo así: id }}" {{ ($status->id == old('status_id', $publisher->status_id))? 'selected':'' }}>{{ $status->name }} ¿cómo podría adaptarlo a js?

Aquí ya no queda tan limpio, pues se mezcla un poco de php con js, pero una forma de hacerlo sería asignando el valor que tienes en la variable de php a una variable de js (cuando la variable de php exista).
Luego, en base a ese valor seleccionas el valor que ya tienes en BD a los selects, o si no existe seleccionas el primer option.

    function populatePlantSelect() {
        var plantaEnBD = null;
        @isset($publisher)
        plantaEnBD = '{{ $publisher->plant_id }}';
        @endisset

        $.ajax({
            url: "{{ route('getplants') }}",
            type: 'GET',
            dataType: 'json',
            success: function (response) {
                $.each(response.data, function (key, value) {
                    plantSelect.append("<option value='" + value.id + "'>" + value.name + "</option>");
                });
                plantSelect.val( plantaEnBD? plantaEnBD: $("#plant_id option:first").val() )
                    .find("option[value=" + plantaEnBD +"]").attr('selected', true)
                    .trigger('change');
            },
            error: function () {
                alert('Hubo un error obteniendo las plantas!');
            }
        });
    }
    populatePlantSelect();

    plantSelect.change(function(){
        var plantId = $(this).val();
        areaSelect.empty();
        equipoSelect.empty();
        var areaEnBD = null;
        @isset($publisher)
            areaEnBD = '{{ $publisher->area_id }}';
        @endisset

        if (plantId) {
            $.ajax({
                url: "{{ route('getareas') }}",
                type: 'GET',
                data: { plant_id: plantId },
                dataType: 'json',
                success: function (response) {
                    $.each(response.data, function (key, value) {
                        areaSelect.append("<option value='" + value.id + "'>" + value.name + "</option>");
                    });
                    areaSelect.val( areaEnBD? areaEnBD: $("#area_id option:first").val() )
                        .find("option[value=" + areaEnBD +"]").attr('selected', true)
                        .trigger('change');
                },
                error : function(){
                    alert('Hubo un error obteniendo las areas!');
                }
            });
        }
    });

    areaSelect.change(function(){
        var areaId = $(this).val();
        equipoSelect.empty();
        var equipoEnBD = null;
        @isset($publisher)
            equipoEnBD = '{{ $publisher->equipo_id }}';
        @endisset

        if (areaId) {
            $.ajax({
                url: "{{ route('getequipos') }}",
                type: 'GET',
                data: { area_id: areaId },
                dataType: 'json',
                success: function (response) {
                    $.each(response.data, function (key, value) {
                        equipoSelect.append("<option value='" + value.id + "'>" + value.name + "</option>");
                    });
                    equipoSelect.val( equipoEnBD? equipoEnBD: $("#equipo_id option:first").val() )
                        .find("option[value=" + equipoEnBD +"]").attr('selected', true)
                        .trigger('change');
                },
                error : function(){
                    alert('Hubo un error obteniendo los equipos!');
                }
            });
        }
    });
11
  • ¿De memoria? ¿en serio?. Muchas gracias por tu ayuda, lo probaré ahora mismo y luego te comento
    – Carlos
    el 26 ago. 2019 a las 8:17
  • He solucionado algunos errores y parece funcionar correctamente las rutas y las funciones del controlador (las probé en el navegador), pero no carga nada en mi formulario
    – Carlos
    el 26 ago. 2019 a las 9:40
  • Le quité el option value de "Elije un área/planta/equipo", eso hace que siempre se selecciona la primera planta, área o equipo (es lo que quiero), pero me gustaría que automáticamente se carguen las áreas y equipos ¿me explico?. Ahora mismo se cargan las plantas: Planta 1 y Planta 2, automáticamente se muestra seleccionada Planta 1, pero no es hasta que voy al select y selecciono Planta 1 que se cargan las áreas ¿cómo podría solucionar eso?.
    – Carlos
    el 26 ago. 2019 a las 13:20
  • Me alegra que te haya servido. Con de memoria me refería a que lo escribí directamente en el navegador y no en un IDE que te marca errores comunes. Para lo que comentas puedes agregarle .trigger('change') al final de la función que llena los selects. Por ejemplo para el de plantas function populatePlantSelect() {//...; plantSelect.trigger('change'); }. También si quieres puedes editar esta respuesta para corregir los errores que hayas encontrado para que quede correcta. el 26 ago. 2019 a las 13:52
  • entonces, añadir .trigger('change' ) hace que se seleccione el primero por defecto?. Claro, cuando todo quede funcionando correctamente con gusto editaré la pregunta :)
    – Carlos
    el 26 ago. 2019 a las 13:56

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.