Placing delete method inside a Jquery append

Question

Guys I’m with the following situation, I make an append and inside it I need to send a delete method, to treat it in the web service I’m having doubts, I’ve tried to create a form inside, but it doesn’t work, detail if I put the link "http://localhost/projectohtml/admin/users/'+v.iduser+'/delete" inside href it works but in the webservice dealing with delete method or whatever it requires it to be this method, and if I change in the webservice to get it works, but it’s not safe, jquery code, :

<script>

 $(document).ready(function(){

    $.getJSON('http://localhost/projetohtml/admin/users-list-all',function(data){
      $.each(data, function(k, v){

        $('#table-users').append("<tr>"+'<td>'+v.iduser+'</td>'+
                                        '<td>'+v.desperson+'</td>'+
                                        '<td>'+v.desemail+'</td>'+
                                        '<td>'+v.deslogin+'</td>'+
                                        '<td>'+v.inadmin+'</td>'+
                                        '<td><a href="/projetohtml/admin/users/'+v.iduser+'"class="btn btn-primary btn-xs"><i class="fa fa-edit"></i> Editar</a></td>"'+
                                        '<form action="http://localhost/projetohtml/admin/users/'+v.iduser+'/delete" id="form-delete" method="delete">'+
                                        '<td><a href="#" id="iduser-delete" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i> Excluir</a></td>'+'</form>'+"</tr>");




      });

    });
 });



</script>

Answer 1

You can do this using Ajax, which will be triggered in a delete button click event, and in it you will get the ID of the item you want to remove as parameter.

<script>
     $(document).ready(function(){
         $.getJSON('http://localhost/projetohtml/admin/users-list-all',function(data){
             $.each(data, function(k, v){
                $('#table-users').append("<tr>"+'<td>'+v.iduser+'</td>'+
                                    '<td>'+v.desperson+'</td>'+
                                    '<td>'+v.desemail+'</td>'+
                                    '<td>'+v.deslogin+'</td>'+
                                    '<td>'+v.inadmin+'</td>'+
                                    '<td><a href="/projetohtml/admin/users/'+v.iduser+'"class="btn btn-primary btn-xs"><i class="fa fa-edit"></i> Editar</a></td>"'+
                                    '<td><a href="javascript:;" id="'+ v.iduser +'" class="btn btn-danger btn-xs delete-user"><i class="fa fa-trash"></i> Excluir</a></td>'+"</tr>");
                });
          });
     });
</script>

Since your element was not loaded directly into the DOM you will need to call the event a little different click. Note that first you must pass an element that was loaded in the DOM, then you will use the "on" in the "click" event in the element that was added dynamically.

$('body').on('click', '.delete-user', function () {
    var id_user = $(this).attr('id');

    $.ajax({
        url: 'url',
        method: 'POST',
        data: { id_user: id_user },
        success: function ( response ) {
           console.log(response);
        },
        error: function () {

        }
    });
});