0

Buenas como puedo hacer que al cargar la pagina se active el ajax con el valor actual que tiene el select??

$( window ).load(function() {
         /* $("#medidas").each(function() {
            $("#valorPrecio").html($(this).val())
          }); 
          
          $("#medidas").focus();*/

        $('#medidas').on('change',function(){
           $value=$(this).val();
           $medida=$('select[name="medidas"] option:selected').text();

           //console.log($medida);
            $.ajax({                        
                type: "GET",                 
                url : '{{URL::to('medidas')}}',                    
                data:{'idproducto':$value,
                     'medida':$medida},
                beforeSend: function() {
                    $('#valorPrecio').html('<img src="{{ asset('images/loading.gif') }}" class="loading">');
                },
                success: function(data)            
                {
                 $('#valorPrecio').html(data.precio); 

                 if (data.pvpAntes === null){
                    $('#simboloEuro').css("display","none");
                    $('.pvpAntesFIN1').css("display","none");
                 }
                 else{
                    $('.pvpAntesFIN1').html(data.pvpAntes);
                    $('.pvpAntesFIN1').css("display","inline-block");
                    $('#simboloEuro').css("display","inline-block");
                 }              
                 
                 console.log(data);       
               }
             });
        });
    })
1
  • 1
    No se que versión de jQuery uses pero ese evento load está desaconsejado ya
    – BetaM
    el 25 jun. 2020 a las 21:39

2 respuestas 2

3

Para hacerlo deberas usar una funcion con nombre y no una funcion anonima, pero para poder que la funcion anonima tenga nombre deberas separarla de tu onchange, por lo tanto tu codigo queda asi:

$(document).ready(function() {
    /* $("#medidas").each(function() {
       $("#valorPrecio").html($(this).val())
     }); 
     
     $("#medidas").focus();*/

    function changeSelect(ev){
        $value=$(ev.target).val();
        $medida=$('select[name="medidas"] option:selected').text();

        console.log($value);
        $.ajax({                        
           type: "GET",                 
           url : "{{URL::to('medidas')}}",                    
           data:{'idproducto':$value,
                'medida':$medida},
           beforeSend: function() {
               $('#valorPrecio').html('<img src="{{ asset(\'images/loading.gif\')}}" class="loading">');
           },
           success: function(data)            
           {
            $('#valorPrecio').html(data.precio); 

            if (data.pvpAntes === null){
               $('#simboloEuro').css("display","none");
               $('.pvpAntesFIN1').css("display","none");
            }
            else{
               $('.pvpAntesFIN1').html(data.pvpAntes);
               $('.pvpAntesFIN1').css("display","inline-block");
               $('#simboloEuro').css("display","inline-block");
            }              
            
            console.log(data);       
          }
        });
    }

    $('#medidas').on('change', changeSelect);
    changeSelect({target: $("#medidas")[0]});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id = "medidas">
  <option value = "hola">hola</option>
  <option value = "mundo">mundo</option>
</select>

Tenias comillas mal escapadas, por lo que tuve que corregirlas, si tu las dejas asi javascript no va a interpretar bien el codigo y tu ajax no se ejecutara.

Con respecto a que cambios hice, realmente lo unico que hice fue separar la funcion aparte y le llame changeSelect a la cual se le pasa un evento, dentro de esta tambien le hice cambios a:

$value=$(ev.target).val();

Para que pudiese ser usado mediante un evento ligado o directamente que se le pase el elemento para invocarlo.

por ultimo, esta parte de aqui:

$('#medidas').on('change', changeSelect);
changeSelect({target: $("#medidas")[0]});

como vemos el evento ahora esta ligado a una funcion con nombre llamada changeSelect, ademas, al final usamos de manera directa nuestra funcion pasandole como parametro la simulacion de un evento, de esta manera la funcion hara su trabajo en ambos casos.

Ademas tu tenias:

$( window ).load(function() {

No creo que tenga mucha relevancia, pero lo cambie a:

$(document).ready(function() {

Son practicamente lo mismo, solo que el primero apunta a la ventana y el segundo al documento.

2
  • Brillante funciona de forma perfecta!!!! Muchas gracias @Riven. Una pregunta puedo hacer que el beforesend lo haga sobre otro div y que cuando reciba el success se vea el resultado?? Esque proble a meterlo todo en un div, para que cuando se cambie la opción no se quede nigún rastro, pero al ponerlo todo en un div, y decir que el beforesend actue ahi, no me devuelve la respuesta
    – Miguel
    el 26 jun. 2020 a las 11:36
  • 1
    Eso ya es para otra pregunta Miguel el 28 jun. 2020 a las 7:25
0

Intenta utilizando el método .trigger() sobre el elemento que deseas ejecutar el evento:

$(window).ready(function(){
     $('#medidas').trigger('change');
});

Este lanzara el evento change y por tanto tu funcion.

Tu Respuesta

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

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