4
\$\begingroup\$

I am working on a monitor signage display and have a "welcome to RSS" feed with just a title and description. I have code from feedEk that's been tweaked a bit to parse the feed and cycle it so I only have one title and desc. showing at a time. This feed could be added to or deleted info at any time so I need it to refresh every five minutes. I've tried several solutions on here and just can't seem to work it out.

Here is the adjusted FeedEk code with comments on the adjustments:

(function (e) {
e.fn.FeedEk = function (t) {
    var n = {
        FeedUrl: "http://myrss.com/",
        MaxCount: 1,
        ShowDesc: true,
        ShowPubDate: false,
        CharacterLimit: 100,
        TitleLinkTarget: "_self",
        iterate: false
    };
    if (t) {
        e.extend(n, t)
    }
    var r = e(this).attr("id");
    var i;

    processFeedData = function (t) {
        //This just makes it flash too much
        //e("#" + r).empty();
        var s = "";
        en = t.responseData.feed.entries;

        if (n.iterate == true) {
            //Setting a variable to store current item
            i = window.feedcur = typeof(window.feedcur) === 'undefined' ? 0 : window.feedcur;

            t = en[i];
            s = makeString(t);

            //incrementing the current for the next time we loop through
            window.feedcur = ((i+1)%en.length);
        } else {
            for (i=0;i<en.length;i++) {
                t = en[i];
                s += makeString(t);
            }
        }
        //Changing this to just replace what was there (less blinky feeling)
        e("#" + r).html('<ul class="feedEkListSm">' + s + "</ul>");
    }

    makeString = function (t) {
        s = '<li><div class="itemTitleSm"><a href="' + t.link + '" target="' + n.TitleLinkTarget + '" >' + t.title + "</a></div><br>";
        if (n.ShowPubDate) {
            i = new Date(t.publishedDate);
            s += '<div class="itemDateSm">' + i.toLocaleDateString() + "</div>"
        }
        if (n.ShowDesc) {
            if (n.DescCharacterLimit > 0 && t.content.length > n.DescCharacterLimit) {
                s += '<div class="itemContentSm">' + t.content.substr(0, n.DescCharacterLimit) + "...</div>"
            } else {
                s += '<div class="itemContentSm">' + t.content + "</div>"
            }
        }
        return s;
    }

    if (typeof(window.feedContent) === 'undefined') {
        e("#" + r).empty().append('<div style="padding:3px;"><img src="loader.gif" /></div>');
        e.ajax({
            url: "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + n.MaxCount + "&output=json&q=" + encodeURIComponent(n.FeedUrl) + "&hl=en&callback=?",
            dataType: "json",
            success: function (t) {
                window.feedContent = t;
                processFeedData(window.feedContent);
            }
        });
    } else {
        processFeedData(window.feedContent);
    }        

}
})(jQuery)

On the PHP page I have the following code which cycles through on an interval. I've tried wrapping this into another function that refreshes it but that didn't work. I've also tried just refreshing the page, but that just makes the whole page blink and still doesn't refresh the feed. It seems to refresh every 12 to 24 hours.

<!-- this is for the rss feed -->
<script type="text/javascript" >
$(document).ready(function () {
    feedsettings = {
        FeedUrl: 'http://myrss.com/',
        MaxCount: 100,
        ShowDesc: true,
        ShowPubDate: false,
        DescCharacterLimit: 100,
        iterate: true
    }
    $('#divRss').FeedEk(feedsettings);

    setInterval(function(){
        $('#divRss').FeedEk(feedsettings);
    },7000);
 });

</script>

<style>
.rssDiv{float:right; padding-left:35px;}
ul{width:500px !important}
</style>
<!-- end feed stuffs -->

Any help guidance assistance or direction is immensely appreciated. I have to make this self sustaining with little to no extra installations.

\$\endgroup\$
3
\$\begingroup\$

I know this code is more than four years old and you haven't been on CR since then but maybe it will help somebody else.

The code adds a lot of HTML via string concatenation. It might be better to use the JS DOM element creation APIs like document.createElement() or a template (e.g. with the <template> tag).


There is a mix of local and global variables - for example, in processFeedData(), s is declared with the var keyword but then en is not, making it a global variable. Then in makeString() the variable s is assigned without having been declared locally so its scope is the wrapping function (i.e. e.fn.FeedEk = function (t) {...). It is best to avoid global variables to avoid unintentional consequences... For more in this topic refer to answers to why are globals bad in javascript.


The DOM ready code in the second page looks up the element with id attribute divRss initially as well as in the interval callback. DOM lookups aren't cheap:

DOM queries aren't cheap:

”...DOM access is actually pretty costly - I think of it like if I have a bridge - like two pieces of land with a toll bridge, and the JavaScript engine is on one side, and the DOM is on the other, and every time I want to access the DOM from the JavaScript engine, I have to pay that toll”
    - John Hrvatin, Microsoft, MIX09, in this talk Building High Performance Web Applications and Sites at 29:38, also cited in the O'Reilly Javascript book by Nicholas C Zakas Pg 36, as well as mentioned in this post

Bearing in mind he said that ~10 years ago and browsers have come a long way, it is still wise to consider. I would recommend storing $('#divRss') to a variable (or constant using const if supporting ) and referencing that variable instead of querying the DOM each time.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.