understand a method with closets (), next and find ()

1

I have a method that another programmer did but I can not understand it, could you help me understand the method please

function guardar() {
  if ($("input[name='horarioEntrada']").length > 0) {
    $(".loader").fadeIn("fast", function() {
      $("input[name='sim']").each(function(i, obj) {
        var tmp = $(this),
          tipoTmp = tmp.closest("td").next("td").find("input[name='tipo']").val();
        $.ajax({
          url: 'index.php?accion=guardar',
          data: {
            icc: tmp.val(),
            almacen: $("#almacen").val(),
            tipo: tipoTmp
          },
          type: 'post',
          success: function(data) {
            clase = "success";
            if (data != "OK") {
              clase = "danger";
            } else {
              data = "Guardado";
            }
            tmp.closest("td").next("td").next("td").attr("class", clase);
            tmp.closest("td").next("td").next("td").html(data);
          },
        }).done(function() {
          // $(elemento).remove();
        }).fail(function(jqXHR, textStatus, errorThrown) {
          if (jqXHR.status === 0) {
            $("#div_alert_modal").show();
            $("#p_alert_modal").html("No hay conexión a internet, verifique e intente nuevamente.");
          }
        });
      });
      $(".loader").fadeOut("fast");
    });
  } else {
    $("#div_alert_modal").show();
    $("#p_alert_modal").html("No hay datos para guardar.");
  }
};
    
asked by Carlos Enrique Gil Gil 31.01.2018 в 17:01
source

1 answer

2

I answer you about the method

function guardar(){
    //Si tenemos un input con el atributo name 'horarioEntrada' en el DOM...
    if($("input[name='horarioEntrada']").length > 0){
        //Mostramos el/los elemento/os con la clase 'loader' con una animacion de fade y al terminar ejecutamos el callback(el parametro function del fadeIn)
        $(".loader").fadeIn("fast", function(){
            //Cuando termina la animacion, buscamos todos los input con el atributo name 'sim' y iteramos sobre todos ellos
            $("input[name='sim']").each(function(i, obj) {
                //Recogemos el input que nos toca en esta vuelta del iterador
                var tmp = $(this);
                //Sobre el input que nos toca, buscamos la etiqueta 'td' mas cercana a ese input yendo hacia arriba en los padres, cuando lo encuentra, coge la etiqueta td siguiente en el DOM y sobre ese td buscamos un input con el atributo name iigual a 'tipo' y obtenemos su valor.
                var tipoTmp = tmp.closest("td").next("td").find("input[name='tipo']").val();
                //Realizamos una peticion ajax a la url descrita abajo.
                $.ajax({
                    //Url donde realizar la petición
                    url: 'index.php?accion=guardar',
                    //Parametros que enviamos en la peticion
                    data: {icc : tmp.val(), almacen : $("#almacen").val(), tipo : tipoTmp}, 
                    //Tipo de petición
                    type:  'post',
                    //Funcion que se ejecuta cuando la llamada ajax nos devuelve el resultado
                    success:  function (data) {
                        //Según lo que nos devuelva la llamada ajax declaramos un valor de clase o otro
                        clase = "success";
                        if(data != "OK"){
                            clase = "danger";
                        }
                        else{
                            data = "Guardado";
                        }

                        //Volvemos a buscar la fila que toca para modificarle el atributo class y modificar el valor
                        //IMPORTANTE: esto esta mal hecho, ya que las peticiones ajax se realizan de manera asíncrona, lo que significa que el valor de la variable 'tmp' es 
                        //muy probable que no sea el que era en el bucle en el momento de hacer la petición, por lo que requeriría refactorizar el código
                        tmp.closest("td").next("td").next("td").attr("class", clase);
                        tmp.closest("td").next("td").next("td").html(data);
                    },
                //Una alternativa al 'success' de la petición elige uno de los dos.
                }).done( function() {
                    // $(elemento).remove();
                }).fail( function( jqXHR, textStatus, errorThrown ) {
                    if(jqXHR.status === 0) {
                        $("#div_alert_modal").show();
                        $("#p_alert_modal").html("No hay conexión a internet, verifique e intente nuevamente.");
                    }
                }); //Fin llamada ajax
            });// Fin bucle 

            //Escondemos el elemento con una animacion de fade
            $(".loader").fadeOut("fast");
        });
    }
    //Si no tenemos un input con el atributo name='horarioEntrada' en el DOM...
    else{
        $("#div_alert_modal").show();
        $("#p_alert_modal").html("No hay datos para guardar.");
    }
};
    
answered by 31.01.2018 / 17:29
source