开发者

How to retrieve multiple json files to multiple divs?

开发者 https://www.devze.com 2023-03-10 17:01 出处:网络
I want to retrieve json data from multiple files. I am making plugin to do this. Here I am able to put data from one json file. But when I wanted to pull the data from multiple json files, all the dat

I want to retrieve json data from multiple files. I am making plugin to do this. Here I am able to put data from one json file. But when I wanted to pull the data from multiple json files, all the data are appended to same div. What can I do to retrieve separate file data on separate div? My code to call plugin is:

$(document).ready(function(){
    //$("#slider").easySlider();
    $(".slider1").r3dImage({
            url: "ajax/test.txt",
            pause: 800
    });

    $(".slider2").r3dImage({
        url: "ajax/test2.txt",
        pause: 400
    });
});

My plugin to do this is:

(function($){

    $.fn.r3dImage = function(options){
    var defaults = {
        url:    '',
        pause:  2000
    }; 

    var options = $.extend(defaults, options);
    //retrive json file
    //setInterval(function(){
        // get new json result from server by Ajax here

        obj = $(this);
        //var body = obj.html();

        $.ajax({
        type: "POST",
        url: options.url,
        dataType: "json",
        cache: false,
        contentType: "application/json",
        success: function(data) {
        //alert("Success");
        $.each(data.dashboard, function(i,post){
           html = '<li>';
           html += '<a href="'+post.TargetUrl+'" target="'+post.Target+'">';
    开发者_StackOverflow       html += '<img src="' + post.ImageUrl + '" alt="' + post.Alt +'" title="' + post.OverlayText +'" />';
           html += '</a><p>'+post.OverlayText+'</p></li>';
        $("ul", obj).append(html);

        });
        $(obj).easySlider({
            auto: true, 
            continuous: true
        });
        },
        error: function(xhr, status, error) {
            alert(xhr.status);
        }
        });
    };

})(jQuery);

After I load content on separate div, I will scroll the data using easyslider.

The json file format is:

{
"dashboard": [
    {
        "ImageUrl": "images/03.jpg",
        "OverlayText": "demo image 3",
        "TargetUrl": "http://lkamal.com.np",
        "Target": "_blank",
        "Alt": "Image 3",
        "Timer ": 2000
    },
    {
        "ImageUrl": "images/04.jpg",
        "OverlayText": "demo image 4",
        "TargetUrl": "http://lkamal.com.np",
        "Target": "_blank",
        "Alt": "Image 4",
        "Timer ": 2000
    }
    ]
}

any help?


I did this with some modification.

//retrive JSON feed from external file
            $.ajax({
               type: "POST",
               url: test.txt,
               dataType: "json",
               cache: false,
               contentType: "application/json; charset=utf-8",
               //beforeSend: function() { $("#slider ul").html("Saving").show(); }, 
               success: function(data) {
               //alert("Success");
               html = '';
                $.each(data.dashboard, function(key,items) {
                   html += '<li>';
                   html += '<a href="'+items.TargetUrl+'" target="'+items.Target+'">';
                   html += '<img src="' + items.ImageUrl + '" alt="' + items.Alt +'" title="' + items.OverlayText +'" />';
                   html += '</a><p>'+items.OverlayText+'</p></li>';                           
                });
                $("ul", element).empty();
                $("ul", element).append(html); //appending the json data with respective div
                //startSlides(element); //start slideshow


                //$(options.container).easySlider({
              },
                error: function(xhr, status, error) {
                    alert(xhr.status);
                }
            });

But I am stuck with other issue on this plugin which i have posted Here.

0

精彩评论

暂无评论...
验证码 换一张
取 消