0

I am working on a problem where I have to delete entries from the list. I need tp display a toaster message when item is deleted and I want to remove the deleted element without refreshing? How am I supposed to do it? I have tried a lot of links on the web but none of them worked for me.

views.py

 def centre_delete(request):
     if request.is_ajax():
         id = request.POST.get('id')
         Centre.objects.get(pk=id).delete()
         message = "Deleted Successfully"
     else:
         message = "Not Ajax"
     return HttpResponse(message)

centre_list.html

   <script type="text/javascript">
       $(document).ready(function() {
       $(".del").click(function(){
       swal(Delete centre?);
       $.ajax({
          type: "POST",
          url: "/NewApp/centredelete/",
          data: {
            'id': $('#cendel').val()
          },
          success: function () {
               #what should go here?
        }
      });
   return false;
      });
    });
   </script>

 <body>
     {% for c in centres %}
       <tr>
         <td>{{ c.name }}</td>   
         <td>{{ c.address }}</td>                                                                                                                                   
         <td>{{ c.contact  }}</td>
         <td>{{ c.phone }}</td>
         <td>
             <a href="{% url 'NewApp:centreupdate' slug=c.slug %} " style="color:black; margin-left:8px"><span class="glyphicon glyphicon-edit"></span></a>   
              <input type="hidden" id="cendel"  value="{{ c.id }}">
              <a class="btn btn-primary del" type="button" id="del">Delete</a></td>                                                                
       </tr>
  {% endfor %} 
 </body>
Srvastav4
  • 177
  • 2
  • 12

1 Answers1

0

Just on success you can hide those specific row of the table. Ofcourse you have to put the row id

You can set <tr id="{{ c.id }}">

In script:

var update_table = document.getElementById('id').style;
update_table.display = 'none';

for toast message you can implment from here https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_snackbar

there are other way to implement. Hope this will help.

R.A.Munna
  • 1,699
  • 1
  • 15
  • 29