Hi! Sorry for the bad English…Here’s the problem…Here is the code using ajax to add and remove records to the table. If you open a page with data, you can both delete and add… But! after adding, deleting does not work… the id value becomes ". But if you refresh the page, everything works again. Can you tell me what the reason is?
<script>
output='';
$('#post-form').on('submit',function(e){
event.preventDefault();
var self = this;
let _tlt=$("#idtitle").val();
let csr=$("input[name=csrfmiddlewaretoken]").val();
console.log($(this).attr('action'))
mydata={
title:_tlt,
csrfmiddlewaretoken:csr,
}
$.ajax({
url:$(this).attr('action'),
method:"POST",
data:mydata,
dataType:"json",
success:function(data){
x=data.unit_data;
if (data.status=='Save'){
for(i=0;i<x.length;i++){
output +='<tr><td class="align-middle" style="width:960px;">'+ x[i].title+'</td>'+
'<td class="text-center align-middle">'+'<input data-sid="{{item.pk}}" value="Update" type="image" src="../static/images/update.png" style="width:25px;">'+'</td>'
+
'<td class="text-center align-middle">'+'<input data-sid="{{item.pk}}" data-del="{{url_delete}}" class="btn-del" value="Delete" type="image" src="../static/images/del.png" style="width:28px;">'+'</td></tr>'
}
$('#tbody').html(output)
output='';
$("form")[0].reset();
//location.reload();
}
if (data.status == 0){
alert('Запись не добавлена. Возможно, такая уже есть в справочнике...');
}
}
});
}
);
///////////////////////////////////////////////////////////////////////////////
/////////////////////////////Delete SPR
$('#tbody').on('click','.btn-del',function(){
let id=$(this).attr('data-sid');
alert(id);
let pth='/'+$(this).attr('data-del')+'/';
let csr=$("input[name=csrfmiddlewaretoken]").val();
mydata={sid:id, csrfmiddlewaretoken:csr,};
mythis=$(this);
$.ajax({
url:pth,
method:'POST',
data:mydata,
success:function(data){
if(data.status =='Del'){
$(mythis).closest("tr").fadeOut();
}
if(data.status ==0){
console.log('NO');
}
},
});
});
</script>
View here:
def SprDelete(request):
if request.method == 'POST':
id=request.POST.get('sid')
print(id)
pi=Unit.objects.get(pk=id)
pi.delete()
return JsonResponse({'status':'Del',})
else:
return JsonResponse({'status':0,})
def UnitList(request):
unit = Unit.objects.all()
form=UnitForm()
return render(request,'store/spr/SprList.html',{'title':"Единицы измерения",
'unit':unit,'form':form,'pic_label':'Единицы измерения','url_name': reverse('SprSave'),
'url_delete': reverse('SprDelete'),})
HTML page:
{% extends 'store/menu.html' %}
{% load static %}
{% block DataArea %}
<div class="row">
<div class="col-md-1 ">{{pic_label}}</div>
<div class="col-md-11 mx-auto shadow">
<table class="table shadow ">
<thead>
<tr>
<th >
<form action={{url_name}} method="post" id="post-form">
{% csrf_token %}
{{ form.as_p}}</th>
<th class="pt-4 "> <button type="submit" class="btn btn-primary btn-sm mb-3 pt-2 pb-2 " id="savebtn">Добавить</button>
</form>
</th>
</tr>
</thead>
</table>
<div class="scrolltable">
<table class="table shadow table-bordered">
<tbody id="tbody">
{% for item in unit %}
<tr>
<td style="width:960px; " class="align-middle">{{item.title}}</td>
<td class="text-center align-middle" ><input data-sid="{{item.pk}}" value="Update" type="image" src="{% static '/images/update.png' %}" width="25px" > </td>
<td class="text-center align-middle" ><input data-sid="{{item.pk}}" data-del="{{url_delete}}" class="btn-del " value="Delete" type="image" src="{% static '/images/del.png' %}" width="28px"> </td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<script>
var PictureDeleteUrl="{% static '/images/del.png' %}"
var PictureDeleteUrl="{% static '/images/update.png' %}"
</script>
{% endblock DataArea %}
Thanks!
