0

/el problemas es que pasa algo raro como si no se refrescaran las variables y me salen todas las tarjetas con las mismas imagenes y titulos pero si capta bien si una es pendiente y otra es visto, quiero pasar por parametro de la funcion an'onima de .done() o success: la verda da igual, solo para ver si se puede y de esa forma no tener que usar variables que al parecer estan dandome problemas/

´´´var duration;
var file;
var title;
var respuesta;

$.ajax({
  url: "info/videos_carta.json",
  type: "GET",
  dataType: "json"
}).done(function (data) {

  for (var i = 0; i < data.length; i++) {   
      /*aqui agrego contenido a las variables*/
     duration = (data[i].HDURATION * 60 * 60) + (data[i].MDURATION * 60);   
     file=data[i].FILE;
     title=data[i].TITLE;
      
  $.ajax({
    url: "connect/get_video.php",
    type: "POST",
    data: "video=" + data[i].TITLE + "&email=" + $("#user").text(),
    success: function (){
    }

  }).done(function(res){
        console.log(res);

     if(res > duration*0.5){

        /**Aqui pongo las variables del bucle ya que no puedo usar data[i].TITLE**/ 

     $("#cards_videos").append(`<div class='m-auto  d-inline-block p-3 video_div'><div style="background-image: url('Imagenes/videos/miniaturas/` + file + `');background-size: cover;border-radius:10px" class='shadow video_card'><div class='bg-deg' style='background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%);border-radius:10px; z-index:1;width:100%; height:100%; text-align:right'><p class=' badge bg-success ms-auto m-2' style=' filter:none!important; position:relative '>Visto</p></div><a href='video.php?video=` + title + `' style='z-index:10000'><img src='Imagenes/video/play_icon.png' style='margin-top: -220.5px;z-index:10000;mix-blend-mode:normal'></a><strong><p class='text-white text-start p-2' style='font-family:Clemente;font-weight: bold;margin-top:-75px'>` + title + `</p></strong></div></div>`);
         
     }else{  
                    
            $("#cards_videos").append(`<div class='m-auto  d-inline-block p-3 video_div'><div style="background-image: url('Imagenes/videos/miniaturas/` + file + `');background-size: cover;border-radius:10px" class='shadow video_card'><div class='bg-deg' style='background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%);border-radius:10px; z-index:1;width:100%; height:100%; text-align:right'><p class=' badge bg-warning ms-auto m-2' style=' filter:none!important; position:relative '>Pendiente</p></div><a href='video.php?video=` + title + `' style='z-index:10000'><img src='Imagenes/video/play_icon.png' style='margin-top: -220.5px;z-index:10000;mix-blend-mode:normal'></a><strong><p class='text-white text-start p-2' style='font-family:Clemente;font-weight: bold;margin-top:-75px'>` + title + `</p></strong></div></div>`);
    
     }

           imagen();    
  })
    }
    
  })

1 respuesta 1

0

El primer problema es que done es un alias de success y se debe declarar como parte del objeto de la petición. No necesitas especificar los dos, solamente uno. Para mayor información lee jQuery - Eventos AJAX.

Tampoco necesitas "enviar parámetros", basta con que declares las variables localmente

$.ajax({
    url: "info/videos_carta.json",
    type: "GET",
    dataType: "json",
    // success debe ser parte del objeto de la petición
    success: function(data) {
        // Declara las variables para uso local, incluyendo la del ciclo
        for(let i = 0; i < data.length; i++) {
            let duration = (data[i].HDURATION * 60 * 60) + (data[i].MDURATION * 60);   
            let file = data[i].FILE;
            let title = data[i].TITLE;
            $.ajax({
                url: "connect/get_video.php",
                type: "POST",
                // Puedes usar un objeto para enviar los datos
                data: {
                    video: title,
                    email: $("#user").text()
                },
                success: function(res) {
                    // Aquí puedes usar las variables locales
                    // Incluso de data
                    if(res > duration * 0.5) {
                        console.log(title, file);
                    } else {
                        console.log(data[i].TITLE, data[i].FILE);
                    }
                } // Fin de success
            });
        } // Fin del ciclo for
    } // Fin de success, primera petición
});

Voy a tratar de explicar de forma sencilla la diferencia entre var y let para tu caso:

// Variable global
for(var i = 0; i < data.length; i++) {
    // i es variable global y se va a actualizar en cada iteración
    $.ajax({
        ...,
        success: function(res) {
            // Las peticiones AJAX se ejecutan de forma asíncrona
            //     es decir, en un tiempo diferente al del ciclo
            // Seguramente el ciclo terminó de ejecutarse antes de esto
            //     la variable GLOBAL i SE ACTUALIZÓ
            //     siempre tendrá el valor de la última iteración
        }
    });
}

// Variable local
for(let i = 0; i < data.length; i++) {
    // i es local, solo se mantiene dentro de cada iteración
    //     imagina que declaras una variable independiente cada vez
    $.ajax({
        ...,
        success: function(res) {
            // Las peticiones AJAX se ejecutan de forma asíncrona
            //     es decir, en un tiempo diferente al del ciclo
            // Seguramente el ciclo terminó de ejecutarse antes de esto
            //     la variable LOCAL i NO SE ACTUALIZÓ,
            //     conserva el valor asignado en cada iteración
        }
    });
}

Lo mismo pasa con las variables duration, title y file, si las declaras con var, se estarán actualizando en cada iteración del ciclo y no conservarán el valor deseado al momento de usarlas dentro de success; por eso debes declararlas con let dentro del bloque donde las quieras usar, en este caso, dentro del ciclo.

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.