Ajax load content in multiple divs with same id/class

Question

I'm trying to load a RSS feed into a slider. The slider is in loop mode, so in this mode you will get infinite scrolling and first slides will repeat after last ones. So there are actually 2 slides of my RSS slide.

Now the problem is that the content only loads if there is one div.

My jQuery that loads the rss file:

        (function($)
{
    $(document).ready(function()
    {
        $.ajaxSetup(
        {
            cache: false,
            beforeSend: function() {
                $('#rssblok').show();
                $('#loading').show();
            },
            complete: function() {
                $('#loading').hide();
                $('#rssblok').show();
            },
            success: function() {
                $('#loading').hide();
                $('#rssblok').show();
            }
        });
        var $container = $("#rssblok");
        $container.load("/kantivi/kantivi_rss.php");
        var refreshId = setInterval(function()
        {
            $container.load('/kantivi/kantivi_rss.php');
        }, 9000);
    });
})(jQuery);

The kantivi_rss.php file is just an RSS loader and it echo's the content. This all works

Now the part where the feed must be loaded in the slider content looks like this:

<?php 
$slider .= '<div id="rssblok">';
                                            $slider .= '<img src="/img/loading.GIF" id="loading" alt="loading" style="display:none;" />';
                                            $slider .= '</div>';
?>

If I put the slider not in a loop, there will be only one

<div id="rssblok">

and it works great. However in loop mode it will not load the RSS content because there are 2 slides with the <div id="rssblok"> div in it.

Hopefully the problem is clear, how to fix this?

Answer 1

You need to loop over all of the containers and apply the load to each one:

var $containers = $("#rssblok");
for (var i=0, j=$containers.length; i<j; i++){
    var $container = $($containers[i]);
    $container.load("/kantivi/kantivi_rss.php");
    var refreshId = setInterval(function(){
        $container.load('/kantivi/kantivi_rss.php');
    }, 9000);
}