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?
    – user128299
    Commented el 7 ene. 2021 a las 13:08
  • Hola @BetaM obtengo esto escribiendo jquery: (e,t){return new E.fn.init(e,t)}
    – Miguel
    Commented el 7 ene. 2021 a las 13:10
  • Entonces JQuery está funcionando bien, el problema puede estar respecto al evento asociado
    – user128299
    Commented el 7 ene. 2021 a las 13:12
  • Y que puedo hacer @BetaM ??
    – Miguel
    Commented 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
    Commented 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
    Commented 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 Commented 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

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.