Putting delete method inside an append Jquery

Question

Putting delete method inside an append Jquery

Navigation

#1 by (2 votes)

0

I have 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 already tried to create a form inside, but it does not work, detail if I put the link " link '+ v.iduser +' / delete" inside the href it works however in webservice I deal with delete method ie it requests that is this method, and if I change in the webservice to get it works, but it is not safe at all, 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>

php javascript html jquery html5

asked by anonymous 13.06.2017 / 15:52

1 answer

Debug Eclipse - Classes with equal names in different projects how to load read JSON file in JS and load search result in HTML code?

score 2 · Accepted Answer

You can do this using Ajax, which will be triggered in a click event on the delete button, and in it you will get the ID of the item you want to remove as a 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 has not been loaded directly into the DOM you will need to call the click event a little differently. Note that you must first pass an element that has been loaded into the DOM, then you will use the "on" event in the "click" event on 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 () {

        }
    });
});