Question

i have a complicated PHP conundrum. I have a constantly updating table in my database (Lets call it TABLE) with multiple records being added a second, these results will be posted using PHP on a page (page.php) using AJAX.

The maximum amount of posts shown are 1 every three seconds, for which i have a relevancy algorithm. I don’t know how to merge the jquery transitions with the constantly updated records from the table (Got by AJAX).The best i came up with isn’t much better than a hack, and dosen’t accomadate for an infinite number of posts.

Jquery:

$(#5).delay(1000).slideDown(700);
$(#4).delay(4000).slideDown(700);
$(#3).delay(8000).slideDown(700);
$(#2).delay(12000).slideDown(700);
$(#1).delay(16000).slideDown(700);

PHP:
Not required

HTML:

<div id='5' class='post'></div>
<div id='4' class='post'></div>
<div id='3' class='post'></div>
<div id='2' class='post'></div>
<div id='1' class='post'></div>

I don’t know what to do with AJAX.

Any help would be greatly appreciated,

thanks

Answer 1

If your question is simply how to slidedown the newest appended div, try this:

HTML:

<div id="updatePanel">
    <div id='div5' class='post'></div>
    <div id='div4' class='post'></div>
    <div id='div3' class='post'></div>
    <div id='div2' class='post'></div>
    <div id='div1' class='post'></div>
</div>

Note: id attributes starting with numbers are invalid.

jQuery

setInterval(getData, 3000);

function getData() {
    // call ajax, get data.
    // success: function () {...
    var id = parseInt($("#updatePanel div:first").attr("id").replace("div", "")) + 1;

    $div = $("<div></div>").attr("id", id)
        .addClass("post")
        .text(dataFromAJAX)
        .css("display", "none") // change this to be a class - this is just to make it clear.
        .prependTo("#updatePanel")
        .slideDown();
}

Example fiddle