Обновить div после запроса AJAX

Question

У меня есть панель уведомлений, и когда пользователь нажимает крестик, чтобы удалить уведомление, я хочу, чтобы только DIV обновлялся, чтобы он выбрасывал старые уведомления и обновлял текущие, вот что я имею сейчас, он обновляетно все данные исчезают и ничего не отображается, кроме поля.

Снимки экрана

До:

После:

HTML

<div id="messageboxcon">
  @php
     $usersid2 = Auth::id();
     $usersalert2 = DB::table('notifications')->where('userid', $usersid2)->orderBy('created_at', 'desc')->get();
  @endphp

  <h3 style="color: gray; 
      font-weight: 100; 
      float: left; 
      margin-left: 15px; 
      margin-top -50px;">
      Notifications : {{count($usersalert2)}}
  </h3>
  <div class="notificationcontainer">
      @php
         $usersid = Auth::id();
         $usersalert = DB::table('notifications')->where('userid', $usersid)->orderBy('created_at', 'desc')->get();
      @endphp

      @if(count($usersalert) > 0)
        @foreach ($usersalert as $item)
          <div class="notification">
             <h2 class="notiftitle">{{$item->type}}</h2>
             <h3>{{$item->message}}</h3>
             <a class="removenotif" data-id="{{$item->id}}" data-token="{{ csrf_token() }}"><i  class="crossnotif fas fa-times fa-sm"></i></a>
          </div>
        @endforeach
      @endif
  </div>
</div>

JavaScript

$(".removenotif").click(function(ev){
   var id = $(this).data("id");
   var token = $(this).data("token");
   $.ajax({
           url: 'deletenotif/'+id,
           type: 'DELETE',
           dataType: 'JSON',
           data: {
               "id":id,
               "_method": 'DELETE',
               "_token": token,
               },

           success: function (data) {
              console.log("it worked");
              $('#messageboxcon').load(document.URL +  ' #messageboxcon');
           },
           error: function (data) {
                 alert(data);
           }
});

Answer 1

Создайте дубликат контейнера уведомлений в другом файле, скажем, not.php Затем создайте новый Ajax с URL-адресом как not.php Затем используйте идентификаторконтейнер уведомлений для получения данных jquery.Так что это будет похоже на обновление.

Затем создайте кнопку, которая будет выполнять новый jQuery, который вы создали для события click.

Итак, что вы будете делать, после предыдущегоjQuery удалил уведомление, вы сделаете так, чтобы оно вызывало щелчок даже по новой кнопке, чтобы вам не пришлось нажимать на нее вручную.Это заменит старый контейнер уведомлений новым.

Не забудьте связать файл jQuery и добавить, также может потребоваться добавить код jQuery в новый файл, то есть not.php в противном случаеон будет работать только один раз, так как он не будет использовать никакой ajax, если вы не добавите его туда также

Answer 2

Вам необходимо создать новую функцию javascript, в которой вы будете получать данные из таблицы уведомлений.Функция должна выглядеть следующим образом:

function updateContent(){
$.ajax({
    url: 'n.php',
    type: 'GET',
    success: function (data) {
        console.log("get recent data in HTML");
        $('.notificationcontainer').html(data);
    },
    error: function (data) {
        console.log(data);
    }
});   

}

И, код которого находится в n.php файле

@php
$usersid = Auth::id();
$usersalert = DB::table('notifications')->where('userid', $usersid)->orderBy('created_at', 'desc')->get();
@endphp

@if(count($usersalert) > 0)
@foreach ($usersalert as $item)
    <div class="notification">
        <h2 class="notiftitle">{{$item->type}}</h2>
        <h3>{{$item->message}}</h3>
        <a class="removenotif" data-id="{{$item->id}}" data-token="{{ csrf_token() }}"><i  class="crossnotif fas fa-times fa-sm"></i></a>
    </div>
@endforeach
@endif

Теперь,просто вызовите эту функцию javascript в removenotif методе успешного клика, как это -

updateContent();

Answer 3

При успешном обратном вызове я бы использовал функцию jQuery .parents().
В контексте функции обработчика события щелчка $(this) представляет «закрывающий элемент уведомления».
Вам необходимоудалите <div> с классом notification.
Так что я бы сделал что-то вроде $(this).parents('.notification').remove().

Я не уверен, что вы пытаетесь достичь с этим:

$('#messageboxcon').load(document.URL +  ' #messageboxcon');

Он загрузит всю веб-страницу в messageboxcon <div>, что не является тем, чего вы хотите достичь.

Если вы хотите обновить содержимое, выполните вызов AJAX, получая только HTML-код дляУведомления.

Просто создайте страницу (notifications.php) на стороне сервера, которая будет делать то, что вы делаете изначально:

      @php
         $usersid = Auth::id();
         $usersalert = DB::table('notifications')->where('userid', $usersid)->orderBy('created_at', 'desc')->get();
      @endphp

      @if(count($usersalert) > 0)
        @foreach ($usersalert as $item)
          <div class="notification">
             <h2 class="notiftitle">{{$item->type}}</h2>
             <h3>{{$item->message}}</h3>
             <a class="removenotif" data-id="{{$item->id}}" data-token="{{ csrf_token() }}"><i  class="crossnotif fas fa-times fa-sm"></i></a>
          </div>
        @endforeach
      @endif

Затем при успешном обратном вызове вы удаляете уведомление, которое пользователь хочетудалить для немедленной обратной связи.А затем сделайте AJAX-вызов, чтобы обновить уведомления примерно так:

$('#notificationcontainer').load('notifications.php')

Answer 4

измените эту строку

$('#messageboxcon').load(document.URL +  ' #messageboxcon');

на эту:

$('#messageboxcon').load(document.URL +  '#messageboxcon');

в вашем коде успеха. У вас есть дополнительный пробел

Answer 5

в случае успеха сделайте что-то вроде $("#item-"+id).remove();