Не совсем корректно работает ajax

Question

Feb. 25, 2023, 12:24 a.m.

Не совсем корректно работает ajax

Добрый день! Вот код с использованием ajax для добавления и удаления записей в таблицу. Если открыть страницу с данными, то можно и удалять и добавлять... Но! после добавления не работает удаление... id значение становится ''. Но если обновить страницу все опять работает. Может, подскажите в чем причина?

<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="SprDelete" 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>

We recommend hosting TIMEWEB

Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Subscribe to the discussion3

Section subscription100

Do you like it? Share on social networks!

2.1K

6

0

P

Feb. 25, 2023, 7:40 a.m.

И если после добавления посмотреть код страницы, то там ничего не изменится. Меняется только после обновления страницы... Может, в этом причина? Что тут можно сделать? Спасибо!

<table class="table shadow table-bordered">
<tbody id="tbody">
 
<tr>
<td style="width:960px; " class="align-middle">Новая</td>
 
<td class="text-center align-middle" ><input data-sid="219"  value="Update" type="image" src="/static/images/update.png" width="25px" > </td>
<td class="text-center align-middle" ><input data-sid="219" data-del="SprDelete" class="btn-del " value="Delete" type="image" src="/static/images/del.png" width="28px"> </td>
</tr>
 
<tr>
<td style="width:960px; " class="align-middle">Новая запись</td>
 
<td class="text-center align-middle" ><input data-sid="218"  value="Update" type="image" src="/static/images/update.png" width="25px" > </td>
<td class="text-center align-middle" ><input data-sid="218" data-del="SprDelete" class="btn-del " value="Delete" type="image" src="/static/images/del.png" width="28px"> </td>
</tr>
 
<tr>
<td style="width:960px; " class="align-middle">кг</td>
 
<td class="text-center align-middle" ><input data-sid="53"  value="Update" type="image" src="/static/images/update.png" width="25px" > </td>
<td class="text-center align-middle" ><input data-sid="53" data-del="SprDelete" class="btn-del " value="Delete" type="image" src="/static/images/del.png" width="28px"> </td>
</tr>
 
<tr>
<td style="width:960px; " class="align-middle">л.</td>
 
<td class="text-center align-middle" ><input data-sid="49"  value="Update" type="image" src="/static/images/update.png" width="25px" > </td>
<td class="text-center align-middle" ><input data-sid="49" data-del="SprDelete" class="btn-del " value="Delete" type="image" src="/static/images/del.png" width="28px"> </td>
</tr>
 
<tr>
<td style="width:960px; " class="align-middle">м</td>
 
<td class="text-center align-middle" ><input data-sid="2"  value="Update" type="image" src="/static/images/update.png" width="25px" > </td>
<td class="text-center align-middle" ><input data-sid="2" data-del="SprDelete" class="btn-del " value="Delete" type="image" src="/static/images/del.png" width="28px"> </td>
</tr>

0

P

Feb. 25, 2023, 11:53 a.m.

Хотя ошибка скорее всего во view, вот что пишет:
ValueError: Field 'id' expected a number but got ''.
[25/Feb/2023 12:44:04] "POST /SprDelete/ HTTP/1.1" 500 121525
Понятно, id ждет число , а получает пустую строку. Но почему так? Вот сам view

#***********************//AJAX//**********************************************
# удаление единицы измерения
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,})

Если просто открыть спраочник, то все отлично работает. Но если добавить, а потом попробовать что-то удалить, то вот эта ошибка, пустая строка в id..

0

P

Feb. 25, 2023, 7:28 p.m.
(edited)

если добавить в JavaScript location.reload () - все будет работать. но зачем мне перезагружать страницу? ч от этого и хочу уйти:(

0

P

Feb. 26, 2023, 2:28 p.m.

Вопрос закрыт. Разобрался..

0

Feb. 26, 2023, 6:20 p.m.
(edited)

Всё логично. Ты полностью стираешь форму делая form[0].reset() и она становится пустой. То есть данных никаких нет.

0

P

Feb. 26, 2023, 6:23 p.m.

А всё, разобрался...

0

Comments

Only authorized users can post comments.
Please, Log in or Sign up

Не совсем корректно работает ajax

We recommend hosting TIMEWEB

Comments

Actions