Question

如果通知表中有未读的通知（read_at：null），我想附加以下代码...

这就是我要附加/添加的内容

<li>
    <div class="an-info-single unread">
        <a href="{{url('iaccs-hook-list')}}">
        <span class="icon-container important">
            <i class="icon-setting"></i>
        </span>
        <div class="info-content">
            <h5 class="user-name">Update Client</h5>
        </div>
        </a>
    </div>
</li>

这是我的JS，它不起作用。

$(document).ready(function(e) {

    var socket = io('http://www.iaccs-admin-console.test' + ':8080');
    socket.on("message", function(message){
    // console.log(message);
    // console.log('Received');

        $('.unread').on('click',function(){
            $.get('/markAsRead');
        });

        $.ajax({
            url: `/iaccs-hook-notifications`,
            method: 'GET',
            success: function(data){
                console.log(data)
                if (!$.trim(data)){   

                }
                else{   
                    if(data.notif[0].read_at === null ){
                        $('#btn-notif').addClass('js-has-new-notification');

                        var items = data.notif[0].read_at;

                        items.each(function(){
                            $('#notiflist li:first').prepend(`
                                <li>
                                    <div class="an-info-single unread">
                                        <a href="{{url('iaccs-hook-list')}}">
                                        <span class="icon-container important">
                                            <i class="icon-setting"></i>
                                        </span>
                                        <div class="info-content">
                                            <h5 class="user-name">Update Client</h5>
                                        </div>
                                        </a>
                                    </div>
                                </li>
                            `);
                        });

                    }
                }


            },
            error: function(err){
                swal('Error!','Please report this issue.', 'error');
            }
        });

    });


});

这是来自控制器url：/ iaccs-hook-notifications的数据，

0:
created_at: "2018-12-18 11:36:07"
data: []
id: "8fbadc27-ced7-4096-b65c-c8abd43d469f"
notifiable_id: 3
notifiable_type: "App\User"
read_at: null
type: "App\Notifications\WebhookNotification"
updated_at: "2018-12-18 11:36:07"
__proto__: Object
length: 1
__proto__: Array(0)

以及我要附加列表的位置

<div class="an-info-content notifications-info notifications-content">

    <ul class="nav" id="notif-list">

    </ul>

</div> <!-- end .AN-INFO-CONTENT -->

当我点击路线时，图标会更改，但是不会附加未读通知列表。我尝试使用@forelse(auth()->user()->unreadNotifications as $notification)，但需要刷新页面以显示列表。

Answer 1

var items = data.notif[0].read_at;

是单个值，您不能使用.each

 var items = data.notif;

 items.each(function(){
     $('#notif-list').prepend(`
      <li>
          <div class="an-info-single unread">
              <a href="{{url('iaccs-hook-list')}}">
                 <span class="icon-container important">
                     <i class="icon-setting"></i>
                 </span>
               <div class="info-content">
                 <h5 class="user-name">Update Client</h5>
               </div>
              </a>
          </div>
        </li>
             `);
        });

Answer 2

@ziomikii我现在有正在使用的JS ...但是我必须解决一些问题...

这是脚本。

function notif(){
    $.ajax({
        url: `/iaccs-hook-notifications`,
        method: 'GET',
        success: function(data){
            // console.log(data)

            var items = data;

            if (data.length > 0) {
            //proceed
                if (!$.trim(data)){   

                }
                else{   
                    if(data[0].read_at === null ){
                        $('#btn-notif').addClass('js-has-new-notification'); 

                        items.forEach(function(value) {
                            console.log(value);
                            $('#notif-list').prepend(`
                                <li>
                                    <div class="an-info-single unread">
                                        <a href="{{url('iaccs-hook-list')}}">
                                            <span class="icon-container important">
                                                <i class="icon-setting"></i>
                                            </span>
                                        <div class="info-content">
                                            <h5 class="user-name">Update Client</h5>
                                        </div>
                                        </a>
                                    </div>
                                </li>
                            `);
                        });
                    }
                }
            } 

        },
        error: function(err){
            swal('Error!','Please report this issue.', 'error');
        }
    });
}


$(document).ready(function(e) {


    notif();

    var socket = io('http://www.iaccs-admin-console.test' + ':8080');
    socket.on("message", function(message){

        notif()

        // $('.unread').on('click',function(){
        //     $.get('/markAsRead');
        // });

    });

});

成功后如何添加<li>列表？ Laravel 5.6 Javascript / JQuery

2 个答案: