1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Problema con funcion que finaliza - ajax.stop

Tema en 'Jquery' comenzado por look68, 30 de Septiembre de 2016.

  1. look68

    look68 Nuevo Miembro

    Se incorporó:
    13 de Mayo de 2016
    Mensajes:
    4
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Hola amigos, hace días que busco información pero no logro solucionar , a ver si pueden darme una mano o explicarme. Estoy aprendiendo jquery , en principio hice un carrito de compra en php para aprender y comencé a modificarlo trabajando con jquery ajax y json, principlamente para situaciones de no recargar la pagina.
    Estoy haciendo un formulario de altas bajas modificacion y eliminación de productos, en una misma pantalla dividida en 2 .
    Del left tengo un form con los campos de los productos, con un select donde puedo filtrar por categoria. Del right una tabla donde al inicio se cargan todos los registros, los últimos 2 campos de cada fila son links editar y borrar , donde cargo el id del producto.
    Por otro lado tengo un miscript.js donde detecto por ejemplo el change del select y mediante funcion devuelvo una consulta por categoria que regenera la tabla de productos , la vacía y la vuelve a completar.
    El problema principal es que si trabajo con los articulos (todos) que se agregan al iniciar la pagina, todo funciona correcto. Cuando uso el select y me muestra los artículos filtrados, cualquier operación , editar o borrar , que quiera hacer con alguno de ellos ... no funciona, es como que se muere el ajax.
    Buscando opciones, probé duplicar una de las funciones fuera del $(document).ready (), tengo x ejemplo :

    $('a#edit-product').on('click', function(event) {
    event.preventDefault();
    getdetails($(this).data('art'))

    Esto detecta el click de a#edit-product' dentro de miscript.js si trabajo con todos los registros q se cargan al inicio funciona ok , si filtro desde el select por categoria y trabajo sobre esos registros deja de funcionar .
    Dupliqué la funcion completa dentro de la funcion ajax.stop :

    $( document ).ajaxStop(function() {
    $('a#edit-product').on('click', function(event) {
    event.preventDefault();
    getdetails($(this).data('art'))

    Y misteriosamente funcionaaaa !!! Es como que en vez de ir a la funcion que corresponde se sale y entra siempre a esta, con el problema agregado que por alguna razon q desconozco, estando aqui adentro me duplica los clicks ,,,,
    No entiendo este comportamiento , el porque entra directamente al ajax.stop .
    El código se entiende pero es largo para postearlo aqui , no quiero incomodar, si alguien puede ayudarme puedo hacer un pastebin.
    Agradeceré ayuda urgente !!!
    Gracias y abrazo
     
  2. look68

    look68 Nuevo Miembro

    Se incorporó:
    13 de Mayo de 2016
    Mensajes:
    4
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Acabo de ver que hay un boton para insertar el codigo , lo agrego :

    var getdetails = function(id) {
    return $.getJSON("busca_articulo.php", {
    "id": id
    });
    };

    var getdetailsfilter = function(categoria) {
    return $.getJSON("busca_articulos.php", {
    "categoria": categoria
    });
    };

    var validateFilter = function (data) {
    verif = false;
    $.each(data, function(key, value){
    if (value.length === 0 || !($.trim(value))) verif = true;
    })
    return verif;
    }

    $(function() {
    $('a#edit-product-before').on("click",function(e) {
    e.preventDefault();
    getdetails( $(this).data('art') )
    .done(function(response) {
    alertify.alert('ABM de Artículos - PRUEBA', 'ESTOY EN BEFORE !').set('label', 'Aceptar').set({transition:'slide'});
    if (response.success) {
    var form = $("#datos");
    var fotito= response.data.arts[0].imagen;
    form.find("input#p_id").val(response.data.arts[0].id);
    form.find("input#category").val(response.data.arts[0].categoria);
    form.find("input#imagen").val(response.data.arts[0].imagen);
    form.find("input#nombre").val(response.data.arts[0].nombre);
    form.find("textarea#descripcion").val(response.data.arts[0].descripcion);
    form.find("input#costo").val(response.data.arts[0].costo);
    form.find("input#precio").val(response.data.arts[0].precio);
    form.find("input#stock").val(response.data.arts[0].stock);
    $("#lafotito").attr("src", fotito);
    } else {
    //response.success no es true
    }
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
    $("#response-container").html("Algo ha fallado: " + textStatus);
    });
    });


    $('select#cmb_categoria').change(function () {
    var optionSelected = $(this).find("option:selected");
    var valueSelected = optionSelected.val();
    var tabla = $("#tablita");
    tabla.find("tbody").empty()
    tabla.find("tbody").html("<tr><td colspan=8>Cargando productos..</td></tr>");
    getdetailsfilter(valueSelected).done(function (response){
    var fila = '';
    $.each(response.data.arts1, function (key, value) {
    fila +='<tr><td width="150" align="LEFT">'+$.trim(value.nombre)+'</td><td width="250" align="LEFT">'+$.trim(value.descripcion)+'</td><td>'+$.trim(value.costo)+'</td><td>'+$.trim(value.precio)+'</td><td>'+$.trim(value.stock)+'</td><td width="80">'+$.trim(value.categoria)+'</td><td><a href="#" onlick="alert(123);" data-art="' + $.trim(value.id) + '" id="edit-product" ><img src="/xxx3/icons/edit002.png"></a></td><td><a href="#" data-art="' + $.trim(value.id) + '"><img src="/xxx3/icons/del001.png"></a></td></tr>';
    });
    tabla.find("tbody").html(fila);
    //alert(fila);
    });
    });

    $("#b_grabar").click(function(evento) {
    evento.preventDefault();
    $('#b_grabar').attr('disabled','disabled');
    var formdatos = $("#datos").serialize();
    var formdatosarray = [$("input#nombre").val(), $("textarea#descripcion").val(), $("input#costo").val(), $("input#precio").val(), $("input#stock").val()];
    if (validateFilter(formdatosarray) === true) {
    alertify.alert('Actualización de Artículos - Bureau de Regalos', 'Todos los campos deben ser completados !').set('label', 'Aceptar').set({transition:'slide'});
    return false;
    }
    // alert(formdatos);
    // Envio el formulario usando AJAX
    $.ajax({
    data: formdatos,
    type: 'POST',
    // dataType:'json',
    url: 'act_articulo.php',
    error: function(jqXHR,estado,error){
    },
    success: function(data) {
    // console.log(data);
    if(data!==""){
    alertify.alert('Actualización de Artículos - PRUEBA', 'Registro actualizado !').set('label', 'Aceptar').set({transition:'slide'});
    var valueSelected = $.trim(data);
    var tabla = $("#tablita");
    tabla.find("tbody").empty()
    tabla.find("tbody").html("<tr><td colspan=8>Cargando productos..</td></tr>");
    getdetailsfilter($.trim(data)).done(function (response){
    var fila = '';
    $.each(response.data.arts1, function (key, value) {
    fila +='<tr><td width="150" align="LEFT">'+$.trim(value.nombre)+'</td><td width="250" align="LEFT">'+$.trim(value.descripcion)+'</td><td>'+$.trim(value.costo)+'</td><td>'+$.trim(value.precio)+'</td><td>'+$.trim(value.stock)+'</td><td width="80">'+$.trim(value.categoria)+'</td><td><a href="#" data-art="' + $.trim(value.id) + '" id="edit-product" ><img src="/xxx3/icons/edit002.png"></a></td><td><a href="#" data-art="' + $.trim(value.id) + '"><img src="/xxx3/icons/del001.png"></a></td></tr>';
    });
    tabla.find("tbody").html(fila);
    //alert(fila);
    });
    // console.log("OK!"+data);
    }else{
    return false;
    }
    },
    complete:function(jqXHR,estado) {
    $('#b_grabar').removeAttr('disabled','disabled');
    console.log(jqXHR);
    console.log(estado);
    },
    });
    });
     
  3. look68

    look68 Nuevo Miembro

    Se incorporó:
    13 de Mayo de 2016
    Mensajes:
    4
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    $("#b_borrar").click(function(evento) {
    evento.preventDefault();
    $('#b_borrar').attr('disabled','disabled');
    var confirm= alertify.confirm('Actualización de Artículos - PRUEBA','Está seguro de eliminar este artículo ?',null,null).set('labels', {ok:'Confirmar', cancel:'Cancelar'}).set({transition:'slide'});
    confirm.set('onok', function() {
    var id_registro= $("input#p_id").val();
    var lacategoria= $("input#category").val();
    $.ajax({
    data: {id:id_registro, categoria: lacategoria,},
    type: 'POST',
    url: 'del_articulo.php',
    error: function(jqXHR,estado,error){
    },
    success: function(data) {
    console.log(data);
    if(data!==""){
    var valueSelected = $.trim(data);
    alertify.alert('Actualización de Artículos - PRUEBA', 'Registro eliminado !').set('label', 'Aceptar').set({transition:'slide'});
    var tabla = $("#tablita");
    tabla.find("tbody").empty()
    tabla.find("tbody").html("<tr><td colspan=8>Cargando productos..</td></tr>");
    getdetailsfilter($.trim(data)).done(function (response){
    var fila = '';
    $.each(response.data.arts1, function (key, value) {
    fila +='<tr><td width="150" align="LEFT">'+$.trim(value.nombre)+'</td><td width="250" align="LEFT">'+$.trim(value.descripcion)+'</td><td>'+$.trim(value.costo)+'</td><td>'+$.trim(value.precio)+'</td><td>'+$.trim(value.stock)+'</td><td width="80">'+$.trim(value.categoria)+'</td><td><a href="#" onlick="alert(123);" data-art="' + $.trim(value.id) + '" id="edit-product" ><img src="/xxx3/icons/edit002.png"></a></td><td><a href="#" data-art="' + $.trim(value.id) + '"><img src="/xxx3/icons/del001.png"></a></td></tr>';
    });
    tabla.find("tbody").html(fila);
    //alert(fila);
    });
    // console.log("OK!"+data);
    }else{
    return false;
    }
    },
    complete:function(jqXHR,estado) {
    $('#b_borrar').removeAttr('disabled','disabled');
    console.log(jqXHR);
    console.log(estado);
    },
    });
    alertify.success('Registro eliminado');
    });
    confirm.set('oncancel', function(){
    alertify.error('Eliminación Cancelada !!');
    });
    });
    });

    $( document ).ajaxStop(function() {
    $('a#edit-product').on('click', function(event) {
    event.preventDefault();
    getdetails($(this).data('art'))
    .done(function(response) {
    alertify.alert('ABM de Artículos - PRUEBA', 'ESTOY EN STOP !').set('label', 'Aceptar').set({transition:'slide'});
    //done() es ejecutada cuándo se recibe la respuesta del servidor. response es el objeto JSON recibido
    if (response.success) {
    console.log(response.success);
    var form = $("#datos");
    var fotito= response.data.arts[0].imagen;
    form.find("input#p_id").val(response.data.arts[0].id);
    form.find("input#category").val(response.data.arts[0].categoria);
    form.find("input#imagen").val(response.data.arts[0].imagen);
    form.find("input#nombre").val(response.data.arts[0].nombre);
    form.find("textarea#descripcion").val(response.data.arts[0].descripcion);
    form.find("input#costo").val(response.data.arts[0].costo);
    form.find("input#precio").val(response.data.arts[0].precio);
    form.find("input#stock").val(response.data.arts[0].stock);
    $("#lafotito").attr("src", fotito);
    } else {
    //response.success no es true
    $("#response-container").html('No hay artículos disponibles : ' + response.data.message);
    }
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
    $("#response-container").html("Algo ha fallado: " + textStatus);
    });
    });
    });
     
  4. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    774
    Me gusta recibidos:
    329
    Puntos de trofeos:
    63
    Género:
    Hombre
    Y si estas empezando entonces ¿por qué usas jQuery? ¿no es mejor aprender javascript puro primero y luego usar un framework?
     
  5. look68

    look68 Nuevo Miembro

    Se incorporó:
    13 de Mayo de 2016
    Mensajes:
    4
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Hola , en realidad estuve estudiando bastante y estoy empezando a entender algo de jquery , fui programador varios años pero en vb orientado a procedimientos , lo cual aún me limita un tanto.
    Fuera de ello desarrollé un carrito en php y ahora lo estoy migrando a jquery ajax json .
    La verdad no entiendo tu respuesta , y tampoco es una respuesta.
    Despues de unos días peleando con el manual y alerts por todos lados , puse una pregunta aqui y otra en otro sitio similar, donde casualmente el mismo día que publiqué me ayudaron, me dieron algunas pistas y lo pude resolver.
    En fin, la respuesta a mi consulta era un tema de contexto , se solucionó armando una función y llamándola en el onclick cuando armo la tabla desde jquery , pude borrar el ajax.stop que no era nada correcto.
    Cuando consulte que me recomiendan aprender seguramente valoraré mejor tu respuesta.
    Slds !
     
  6. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    774
    Me gusta recibidos:
    329
    Puntos de trofeos:
    63
    Género:
    Hombre
    Pues no aprendas jQuery y busca otras tecnologías mas modernas como Angular2. Revisalo.
     

Comparte esta página