2

Estoy intentando realizar una petición ajax en un proyecto en Laravel 8 y no logro resolverlo, tengo un archivo llamado detenido.js y ahí dentro es donde quiero hacer lo siguiente:

$(document).ready(function(){
var cmbProvincias = document.querySelector('select[name=provincia_id]')

    cmbProvincias.addEventListener('change', function(e){
    console.log(e.target.value);
    $.ajax({
        type: "GET",
        url: "{{route('lstComisFilt')}}",
        data: {
            varAnio: 2021,
            varIdProv: 2
        },
        dataType: "JSON",
        success: function(respu){
            console.log(respu);
        }
    });
});

});

Lo que necesito es que cuando el usuario selecciona un item de un select, se dispare esta petición ajax para luego cargar otro select en el lugar donde dice console.log(respu), esta parte del código no la he escrito aún, ya que sigo sin poder acceder a la ruta que por otro lado, he testeado y se ejecuta bien.

introducir la descripción de la imagen aquí

También he chequeado que el evento se captura correctamente, el tema, creo está en la línea donde defino la url, los valores de varAnio y varIdProv están jarcodeados a efectos de verificar que todo funciona ok.

Este es el error que me sale por la consola.

Gracias y Saludos.

2
  • No reconoce lo que devuelve el helper route llamado desde jQuery, por eso te da ese error de que no encuentra tu ruta (404).
    – gaidyjg
    Commented el 16 mar. 2021 a las 20:13
  • Entiendo, tenés idea como se resuelve esto, habría que agregar algún paquete nuevo a Laravel? Commented el 16 mar. 2021 a las 20:18

3 respuestas 3

2

Logré resolver este tema de la siguiente manera:

var cmbProvincias = document.querySelector('select[name=provincia_id]')
var comboComisarias = document.querySelector('select[name=organismo_id]')
cmbProvincias.addEventListener('change', function(e){
    objanio = document.querySelector('input[name=anioRelev]')
    anio = 0
    if (objanio.value.length > 0)
        anio = objanio.value
    var ruta = "lstComisFilt/" + anio + "/" + e.target.value
    $.ajax({
        type: "GET",
        url: ruta,
        dataType: "JSON",
        success: function(respu){
            comboComisarias.innerHTML = `<option value="">Seleccionar Organismo...</option>`
            for (var i=0; i<respu.length; i++) {
                comboComisarias.innerHTML += `<option value="${respu[i].id}"> ${respu[i].organismo}</option>`
            }
        }
    });
});

Algo parecido a lo que se me había sugerido previamente, pero no me funcionó. No se si esto sería 100% correcto, el hecho es que así me está funcionando tal como lo necesitaba.

No estaría usando Route(''), pasando la url construida manualmente en la variable ruta.

1
  • Si esta es la solución no olvides marcarla como aceptada, así la comunidad la tendra como referencia
    – user128299
    Commented el 16 mar. 2021 a las 21:40
1

Este error es común cuando se mezcla blade/Laravel con algún script de javascript. Si estás dentro de una etiqueta script de tu archivo blade, solo debes hacer:

let route = "{{ route('lstComisFil') }}"

Y pasarle esta a tu llamada ajax:

$.ajax({
    type: "GET",
    url: route,
    data: {
        varAnio: 2021,
        varIdProv: 2
    },
    dataType: "JSON",
    success: function(respu){
        console.log(respu);
    }
});

Edito mi respuesta porque no la entendiste, creo.

Mi ejemplo es válido cuando tienes la etiqueta script dentro de tu archivo blade, es decir, cuando no tiene un src y haces javascript dentro de tu archivo blade.

Si quieres usar una de tus rutas dentro de un archivo js y llamarlo en un archivo blade, lo único que debes es colocar tu path o uri de la ruta, es decir, hacer algo como esto:

fetch('/uri/de/lstComisFil?varAnio=2021&varIdProv=2')
  .then(res => res.json())
  .then(res => console.log(res))
  .catch(err => console.error(err))

Estoy más acostumbrado a usar fetch, mis disculpas. Pero aún así, el ejemplo en jQuery debería ser el mismo, solo deberías hacer:

 $.ajax({
    type: "GET",
    url: '/uri/de/lstComisFil',
    data: {
        varAnio: 2021,
        varIdProv: 2
    },
    dataType: "JSON",
    success: function(respu){
        console.log(respu);
    }
});

Como sabrás, el uri es el primer argumento que le pasaste a la clase Route cuando vas a crear tu ruta, entonces deberías ser algo así:

Route::get('/uri/de/lstComisFil' // <= Esto es lo que debes colocar,
[lstComisFilController::class, 'method'])->name('lstComisFil');
2
  • En el html estoy llamando al .js así: @section('archivosjs') <script src="{{asset('js/detenidos.js')}}"></script> @endsection y no me está funcionando siguiendo tu comentario Commented el 16 mar. 2021 a las 20:37
  • Edité mi respuesta. Espero esta vez te haya quedado suficientemente claro.
    – gaidyjg
    Commented el 16 mar. 2021 a las 22:49
1

Lo que hago al combinar Blade con un JS externo es lo siguiente:
En blade, coloco la ruta en un input hidden (o lo obtengo del action form)

<input type="hidden" id="url" value="{{ route('controller.function', ['var' => $var]) }}">

Luego en el js, obtengo el url así:

const url = document.getElementById('url').getAttribute('value');

Con esto me aseguro de usar las rutas de Laravel. Como comentario adicional, en esta situación de preferencia usar la interfaz $.get()

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.