2

Hola en las vista de registro de laravel 5.8 estoy añadiendo campos que necesito, entre ellos un select dependiente de provincias y según provincia me carga los municipios.

He rellenado el primer select desde el controlador de Register:

public function showRegistrationForm()
    {
        $provincias = DB::table('provincias')->get();
        return view('auth.register', ["provincias" => $provincias]);
    }

Y luego en la vista de register:

<div class="form-group" style="position: relative;">
  <label for="provincia" class="col-form-label text-md-right">Provincia*</label>
     <select class="form-control formContact" name="provincia" id="provincia" required>
        <option value="">Selecciona un país</option>
          @foreach ($provincias as $pro)
             <option value="{{ $pro->id }}"> {{ $pro->provincia }}</option> 
          @endforeach
     </select>
</div>

No he llegado ni a probar de rellenar el segundo ya que el jquery no funciona:

$('#provincia').on('change', function(e){
        alert("He si que va")
        console.log(e);
        var provincia = e.target.value;
        
        /*$.get('select_category/' + categoria,function(data) {
        
        $('#subcategoria').empty();
        
        $.each(data, function(fetch, subCate){
            console.log(data);
            for(i = 0; i < subCate.length; i++){
            $('#subcategoria').append('<option value="'+ subCate[i].sAmigable +'">'+ subCate[i].nombre +'</option>');
            }
        })
     })*/
    });

No me devuelve ni el alert, he puesto en layout de app.blade el cdn de jQuery así que no se que puede estar fallando, alguna sugerencia?

9
  • Algún error en la consola?, Si escribes jquery en la consola que obtienes?
    – BetaM
    el 7 ene. 2021 a las 13:08
  • Hola @BetaM obtengo esto escribiendo jquery: (e,t){return new E.fn.init(e,t)}
    – Miguel
    el 7 ene. 2021 a las 13:10
  • Entonces JQuery está funcionando bien, el problema puede estar respecto al evento asociado
    – BetaM
    el 7 ene. 2021 a las 13:12
  • Y que puedo hacer @BetaM ??
    – Miguel
    el 7 ene. 2021 a las 13:15
  • quizas es una tonteria, pero... donde pones el cdn de jquery y el script? primero debe cargarse el cdn, y luego despues, el script asociado...
    – Jakala
    el 7 ene. 2021 a las 13:46

4 respuestas 4

2
+75

Como dice el usuario @BetaM, posiblemente el error se encuentre en como tienes posicionado los script, el CDN de jquery, lo deberias cargar al inicio de tu pagina, para luego poder llamar a los demas script.

Intenta agregar en el blade tu fragmento de código para verificar que no sea el llamado a tu archivo js, ya que la funcionalidad que agregaste si esta correcta.

$('#provincia').on('change', (e)=>{
  console.log(e.target.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="position: relative;">
     <select name="provincia" id="provincia" required>
        <option value="">Selecciona un país</option>
        <option value="1">Estados unidos</option>
        <option value="2">España</option>
     </select>
</div>

1
  • El cdn esta al principio del todo, no es el problema. Lo probe de todos modos pero no funciona. He conseguido una solución la publico como respuesta.
    – Miguel
    el 7 ene. 2021 a las 15:00
0

Prueba poniendo:

$(document).on('change','#provincia', function(e){
    ...
});
0

Publico una respuesta, he cambiado por hacer un AJAX y si que funciona correctamente:

function muestraMas() {
        var var1 = document.getElementById('provincia').value;
        console.log(var1);
        var url = 'provinciaElegida/' + var1;

        $('#municipio').empty();
        
        $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            type : 'GET',
            url  : url,
            beforeSend: function() {
                
            },
            success : function(data)
                {
                    $.each(data, function(fetch, municipios){
                        console.log(data);
                        for(i = 0; i < municipios.length; i++){
                        $('#municipio').append('<option value="'+ municipios[i].id +'">'+ municipios[i].municipio +'</option>');
                        }
                    })
                }
            });
            return false;
        };
1
  • Era la mejor opción el 10 ene. 2021 a las 4:53
0

Trata de asegurarte que tu código se ejecute una vez que cargó todo el html con:

$( document ).ready(function() {
    // Tu código
});

También asegurate de que el id de tu select "provicias" sea único. Espero te sirva.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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