Нужна помощь со скриптом Ajax


Dario_mafrut
340

Есть такой скрипт, который удаляет посты.Скрипт в принципе работает, но криво. Допустим на странице выводится вертикально 5 записей, я клацаю на кнопку удаления самой нижней записи, и сразу же удаляется самая верхняя запись. Стоит только перезагрузить страницу, всё сразу на своих местах, то, что удалял удалилось, а верхняя запись которая пропала, появилась.


<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

$(document).ready(function () {
$("body").on("click","#delete",function(e){
e.preventDefault();

var id = $(this).data('id');
var token = $("meta[name="csrf-token"]").attr("content");

$.ajax({
url: "delete/"+id,
type: 'DELETE',
data: {_token: token, id: id},
success: function (){
$("#textpostdata").remove();
},
});

});
});
</script>

И шаблон


<div class="infinite-scroll" id="textpost">
@foreach($posts as $post)
<div class="list-group-item py-5 textpost" id="textpostdata" data-id="{{$post->id}}">


<div class="media">
<div class="img-post" style="background-image: url({{$user->avatar ?? asset('img/default-ava.jpg')}});"></div>
<div class="media-body">
<div class="media-heading"><small class="float-right text-muted">{{$post->created_at->diffForHumans()}}</small>
<h5>{{$user->name}}</h5>
</div>
@if($post->img)
<div>
<img src="https://searchengines.guru/ru/forum/{{$post->img}}" class="img-fluid">
</div>
@endif
<br>
@if($post->message)
<div class="text-muted text-small">{!!$post->message!!}</div>
@endif
</div>
</div>


@if(Auth::check())
@if(Auth::user()->id == $user->id)
<div class="text-right">
<form action="{{route('deletePost', ['id' => $post->id])}}" method="post" id="formDelete">
@csrf @method('DELETE')
<button type="submit" id="delete" class="btn btn-sm btn-outline-danger py-0 mt-4" data-id="{{ $post->id }}">Удалить</button>
</form>
</div>
@endif
@endif
</div>
@endforeach
{{$posts->links()}}
</div>


denisArb

Так ты удаляешь просто textpostdata

Ты не пробовал создать уникальный класс и удалять его?

Например:

<div class=»list-group-item py-5 textpost textpostdata-{{$post->id}}» id=»textpostdata» data-id=»{{$post->id}}»>

Получится у 1 записи class=textpostdata-1, а у 5 — class=textpostdata-5

В ajax:

$(«.textpostdata»+id).remove();


onep

denisArb:
создать уникальный класс

Может id уникальный сделать?

Идентификатор в коде документа должен быть в единственном экземпляре.


Samail

$("#textpostdata").remove();

Замени на:

$("div.textpost[data-id="+id+"]").remove();


Dario_mafrut

Samail:

$("#textpostdata").remove();

Замени на:

$("div.textpost[data-id="+id+"]").remove();

Спасибо!Был бы девушкой, отсосал бы…2 дня мозг парил себе этой фигней


Х.З.

Dario_mafrut:
Был бы девушкой, отсосал бы..

Это и некоторые «мужчины» делают

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *