ansaurus

Question

jQuery Plugin to update live a <li> from PHP

Answer 1

+2 A:

You really don't need a plugin for this, you could easily create something similar yourself using jQuery to make AJAX calls to a PHP MySQL feed

Create a script to make reoccurring AJAX calls using setTimeout() and then add the new found results to the feed container using .prepend()

HTML

<html>
<head><title>Tweets</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

<style>
#tweets {
    width: 500px;
    font-family: Helvetica, Arial, sans-serif;
}
#tweets li {
    background-color: #E5EECC;
    margin: 2px;
    list-style-type: none;
}
.author {
    font-weight: bold
}
.date {
    font-size: 10px;
}
</style>

<script>
jQuery(document).ready(function() {
    setInterval("showNewTweets()", 1000);
});

function showNewTweets() {
    $.getJSON("feed.php", null, function(data) {
        if (data != null) {
            $("#tweets").prepend($("<li><span class=\"author\">" + data.author + "</span> " +  data.tweet + "<br /><span class=\"date\">" + data.date + "</span></li>").fadeIn("slow"));
        }
    });
}
</script>

</head>
<body>

<ul id="tweets"></ul>

</body>
</html>

PHP

<?php
echo json_encode(array( "author" => "someone",
                        "tweet" => "The time is: " . time(), 
                        "date" => date('l jS \of F Y h:i:s A')));
?>

gurun8 2010-05-09 19:18:24

Can you put an example of code. I don't know jQuery a lot. Thanks.

Francesc 2010-05-09 19:58:19

Sure. I'll post an example a little bit later today.

gurun8 2010-05-09 20:48:11

You shouldn't be forming the element in the Javascript - form it in the PHP. Here's why. What happens when your markup changes? The form contained in your Javascript is now deprecated, and the new `<li>` will be different from the others on the page.Also, shouldn't that be `setInterval(showNewTweets, 1000)`? I know in jQuery you're not supposed to put the `()` on a function name as an argument.

Christian Mann 2010-05-10 04:13:40

This makes a loop with the last. How to limit to only 10 messages? And, it's possible to encode various messages in JSON?

Francesc 2010-05-11 16:47:21

I'm not sure what you mean by "encode various messages" in JSON but depending on what you're trying to do, I'd guess yes. You can also use XML rather than JSON if that floats your boat.As for truncating the line items, you'd want to use .remove() http://api.jquery.com/remove/ in combination with $("#tweets ul li:last"). Check the length (e.g. number of LIs) and remove the last LIs until you have only 10 LIs total. Give it a shot.

gurun8 2010-05-11 17:38:23

Can you put an example of remove, please?

Francesc 2010-05-11 19:54:12

Sorry this gravy train is done. You have the tools and references at your fingertips to solve the problem. Good luck.

gurun8 2010-05-11 21:00:05

Answer 2

A:

setInterval() would be more adequate, since you want a check at regular intervals.

Then, there is a jquery comet plugin that explores the implementation of the "push" technology. Check it out here.

pixeline 2010-05-09 19:43:54

Answer 3

A:

var frequency = 5000,  // number of milliseconds between updates.

    updater   = function() {
        jQuery.ajax({
            url: 'http://twitter.com/example/something.html',
            success: function(data) {
                // update your page based upon the value of data, e.g.:
                jQuery('ul#feed').append('<li>' + data + '</li>');
            }
        });
    },

    interval  = setInterval(updater, frequency);

Matt Huggins 2010-05-09 22:02:35

Answer 4

A:

thanks buddy i will implement it today General Softwares

generalsoftwares 2010-08-06 10:18:33

ansaurus

tags:

views:

answers:

jQuery Plugin to update live a <li> from PHP

related questions