Question

I developed a simple plugin to sent request to a JSON text file, retrieve a data containing image list and append the html in the element calling the plugin.

Now, the code is working fine while it is running on only one element, but when I am using it on more than one element, now the elements get loaded on the last element calling the plugin only.

Plugin Code:

$.fn.testPlugin = function(param) {
    var options = {
        url : "",
        pause : 2000,
        callback : 5000
    };
    this.each(function() {
        elementId = $(this).attr("id");
        options = $.extend(options,param);
        if(options.url=="") { console.log("URL is not specified"); }
        else {
            $.post(
                options.url,
                function(data) {
                    $("#"+elementId).html("<ul></ul");
                    $.each(data.dashboard, function(k,v) {
                       html = '<li>';
                       html += '<a href="'+v.TargetUrl+'" target="'+v.Target+'">';
                       html += '<img src="' + v.ImageUrl + '" alt="' + v.Alt +'" title="' + v.OverlayText +'" />';
                       html += '</a><p>'+v.OverlayText+'</p></li>';
                       $("ul",$("#"+elementId)).append(html);
                    });
                },
                "json"
            );
        }
    });

}

Plugin Initialization/Execution

$("#this").testPlugin({
    url: 'test.txt'
});
$("#that").testPlugin({
    url: 'text.txt'
}); 

HTML

<div id="this" style="border-style: solid;border-color: #09f;padding: 10px;">
This is a sample div.
</div>

<div id="that" style="border-style: solid;border-color: #09f;padding: 10px;">
Another div
</div>  

UPDATE

I also found out that the problem is happening due to AJAX request. If I create static list and then append it on the div, this time this works with any number of instantiation. A demo of static call is here. Now, help me do the same by retrieving the list from an AJAX request.

UPDATE 2

Thanks to Groovek, Here is a demo of the actual problem. You can notice, that the elements of both requests are append to the last element.

Answer 1

You’re assigning to elementID without declaring it. This means it’ll be a global variable, which means it’ll always be equal to the last thing assigned to it (in this case, #that). If you just keep a local reference to the element, the code will work. Here’s a modified jsfiddle: http://jsfiddle.net/s9BDT/

Code inside the each ‘loop’:

        var el = $(this);
        el.html("<ul></ul>");
        options = $.extend(options,param);
        if(options.url=="") { console.log("URL is not specified"); }
        else {
            $.post(
                //options.url,
                "/echo/json/",
                {json:'{"dashboard":[{"TargetUrl":"toto.html", "Alt" : "sample 1", "ImageUrl":"toto.png", "OverlayText":"toto"},{"TargetUrl":"titi.html", "Alt" : "sample 2", "ImageUrl":"titi.png", "OverlayText":"titi" }]}'},
                function(data) {
                    //alert(data.dashboard);

                    html = '';
                    $.each(data.dashboard, function(k,v) {
                       html += '<li>';
                       html += '<a href="'+v.TargetUrl+'" target="'+v.Target+'">';
                       html += '<img src="' + v.ImageUrl + '" alt="' + v.Alt +'" title="' + v.OverlayText +'" />';
                       html += '</a><p>'+v.OverlayText+'</p></li>';                           
                    });
                    //alert(html);
                    $("ul",el).append(html);
                },
                "json"
            );
        }