Home / Questions / 344151
Accepted
Alberto Julio Arce Escolar
Asked: 2020-04-08 08:46:10 +0800 CST 2020-04-08 08:46:10 +0800 CST

jquery method inside ajax

  • 772

The problem I have is that this jquery method that is inside the ajax $(this).parent().parent("tr").remove();does not work and I think it is because it does not recognize the this function, if I place it above it works perfectly but the idea is that it works after the success of the ajax

$("#tablaproducto").on('click','.eliminar','.productotemp',function(e) {

    ideliminar =$(this).siblings("#ideliminar").val();

             var datos = new FormData();

            datos.append("ideliminar",ideliminar );


            $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                url:"factura/eliminar",
                type: "POST",
                data: datos,
                cache: false,
                contentType: false,
                processData: false,
                success: function(respuesta){

                var obj = JSON.parse(respuesta);

                    if(obj.idproducto>= 0){

                     $(this).parent().parent("tr").remove();

                    }else{

                    alert('Error al ELiminar');


                    }
    }
        });


    });

here I leave the html

 <tbody style="background-color: white;" id="tablaproducto">
     @if($total==0)

            @else
   @foreach($valor as $key=>$productos)

        <tr>

            <th>{{$productos["nombre"]}}</th>
            <th>$ {{ number_format($productos["precio"], 0) }}</th>
            <th>{{$productos["cantidad"]}}</th>
            <th>$ {{ number_format($productos["total"], 0) }}</th>
            <th><img src="/imagenes/agregar.png"></th>
             <th><img id="eliminar" src="/imagenes/eliminar.png"><input type="number" id="ideliminar" value="{{$productos["idproducto"]}}" hidden></th>
        </tr>

        @endforeach
         @endif


  </tbody>
javascript

2 Answers

  1. Your problem can most likely be solved using arrow functions.

    Try defining your function as follows:

    $("$tablaproducto").on("click", ".eliminar", ".productotemp", function(e) {
  // Tu contenido aquí
  
  $.ajax({
    // tus datos para la conexión,
    success: (respuesta) => {
      // Aquí la función que necesitas
    }
  });
});

    Try it and I hope it works for you.

    • 0
  2. Best Answer

    Inside the success function this, switch context.

    At the beginning of the click callback, save the value ofthis

    let $this = $(this);    
let ideliminar = $this.siblings("#ideliminar").val();

    That way, you can use it inside the callback or any internal function without losing its context.

    success: function(respuesta){

    var obj = JSON.parse(respuesta);

        if(obj.idproducto>= 0){

         $this.parent().parent("tr").remove();

        } else{

        alert('Error al ELiminar');


        }
}
    • 0