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

成功执行类似$("#item-"+id).remove();

的操作

Answer 2

在成功回调中，我将使用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')

Answer 3

更改此行

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

对此：

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

在您的成功代码中。您有多余的空间

Answer 4

您需要创建一个新的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

现在，只需在 removenotif 点击成功方法中调用该javascript函数，如下所示-

updateContent();

Answer 5

在另一个文件中创建通知容器的副本，例如 not.php 然后创建一个新的Ajax，URL为 not.php 然后使用通知容器的ID获取jquery的数据。这样就像刷新一样。

然后创建一个按钮，该按钮将执行您在click事件上创建的新jQuery。

因此，您要做的是，在先前的jQuery删除通知后，您甚至会在新鲜按钮上单击它，从而不必手动单击它。这会将旧的通知容器替换为新的通知容器。

请记住要链接jQuery文件，添加aslo可能想将jQuery代码添加到新文件中，即 not.php ，否则它将只工作一次，因为它将无法获得任何ajax。如果您不把它放在那里也可以使用

在AJAX请求后刷新div

5 个答案: