Блог

У меня есть панель уведомлений, и когда пользователь нажимает крестик, чтобы удалить уведомление, я хочу, чтобы обновился только 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);
           }
});
  

При успешном обратном вызове я бы использовал функцию jQuery .parents() .
В контексте функции обработчика события click $(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')
  

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

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

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

для этого :

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

в вашем успешном коде.у вас появилось дополнительное пространство

Вам нужно создать новую функцию 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 click следующим образом —

 updateContent();
  

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

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

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

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