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.
精彩评论