Polling jQuery ajax for each. Check if element does not exist, if so prepend to div

Question

I have a div #notification-data which on $(document).ready gets populated with multiple <li></li> from $.post.

The $.post then gets called setTimeout(poll_n,9000); so data is up-to-date.

So im not updating all the data every time, I would like to do check if the <li></li> already exists in #notification-data, if it does not exist then I would like to prepend() it to #notification-data.

The data comes in the form of:

<li id="new_notification_1" class="seen_0 li_notification">blah</li>
<li id="new_notification_2" class="seen_0 li_notification">bleh</li>

As an extra question, is this the correct way of long polling?

Here is my code:

function poll_n(){
        $.post('<?php echo $siteUrl ?>notifications.php?x=' + (new Date()).getTime() +'', function(data) {

            $(data).find(".li_notification").each(function () {

                    var li_id = $(this).attr('id');
                    if ($(li_id).closest('#notification-data').length) {
                        //do nothing
                    } else {
                        $('#notification-data').append(??not_sure_what_goes_here??);  // process results here           
                    }

            });

            setTimeout(poll_n,9000);
        }); 
    }

EDIT - After answer I have now got this but it does not work (I get nothing in the console).

success: function(data){

    $(data).find(".li_notification").each(function() {              
            var id = $(this).attr('id'),
                notification = $('#notification-data');
                console.log(id);
                console.log('hello');
            if (notification.find('#' + id).length === 0) {
                // notification doesn't exists yet then lets prepend it
                notification.prepend('#' + id);
            }

    });

},

vher2 · Accepted Answer · 2013-05-01T14:33:41.243

1

You can try this:

function poll_n() {
$.ajax({
    type: 'POST',
    url: 'your url',
    success: function(data){
        var notification = $('#notification-data');
        $.each($(data), function(){
            var id = this.id;
            if (notification.find('#' + id).length === 0) {
                // notification doesn't exists yet then lets prepend it
                notification.prepend(this);
            }
        });
    },
    complete: function(jqXHR, status) {
        if (status === 'success') {
            setTimeout(poll_n, 9000);
        }
    }
});
}

You must call poll_n() again after the request has been completed.

edited May 01 '13 at 14:33

answered Apr 30 '13 at 15:14

vher2

980
6
9

Its is just appending them all eveytime – Codded Apr 30 '13 at 15:31
Appending even if the `id` is the same? – vher2 Apr 30 '13 at 15:46
yes, i have 6
for a test each with individual ids. It just appends all 6 every time so i end up with 12, 18, 24 etc

Codded

Apr 30 '13 at 15:50

I edited the code above. I forgot to put `#` in `find(id)`. It should be `find('#' + id)` – vher2 Apr 30 '13 at 15:58

;) brilliant, seems to work. Is this the correct way of long polling? – Codded Apr 30 '13 at 16:02

Yeah, I'm using the same in my projects. – vher2 Apr 30 '13 at 16:07

I have just realised, this does not do for each

from success: function(data){} the response has multiple

within. So i need to work out for each

– Codded May 01 '13 at 07:40

Polling jQuery ajax for each. Check if element does not exist, if so prepend to div

1 Answers1