I'm trying to create a jQuery plugin, inside I need to do an AJAX call to load an xml.
jQuery.fn.imagetags = function(options) {
s = jQuery.extend({
height:null,
width:null,
url:false,
callback:null,
title:null,
}, options);
return this.each(function(){
obj = $(this);
//Initialising the placeholder
$holder = $('<div />')
.width(s.width).height(s.height)
.addClass('jimageholder')
.css({
position: 'relative',
});
obj.wrap($holder);
$.ajax({
type: "GET",
url: s.url,
dataType: "xml",
success:function(data){ initGrids(obj,data,s.callback,s.title); } ,
error: function(data) { alert("Error loading Grid data."); },
});
function initGrids(obj, data,callback,gridtitle){
if (!data) {
alert("Error loading Grid data");
}
$("gridlist gridset",data).each(function(){
var gridsetname = $(this).children("setname").text();
var gridsetcolor = "";
if ($(this).children("color").text() != "") {
gridsetcolor = $(this).children("color").text();
}
$(this).children("grid").each(function(){
var gridcolor = gridsetcolor;
//This colour will override colour set for the grid set
if ($(this).children("color").text() != "") {
gridcolor = $(this).children("color").text();
}
//addGrid(gridsetname,id,x,y,height,width)
addGrid(
obj,
gridsetname,
$(this).children("id").text(),
$(this).children("x").text(),
$(this).children("y").text(),
$(this).children("height").text(),
$(this).children("width").text(),
gridcolor,
gridtitle
);
});
});
}
function addGrid(obj,gridsetname,id,x,y,height,width,color,gridtitle){
//To compensate for the 2px border
height-=4;
width-=4;
$grid = $('<div />')
.addClass(gridsetname)
.attr("id",id)
.addClass('gridtag')
.imagetagsResetHighlight()
.css({
"bottom":y+"px",
"left":x+"px",
"height":height+"px",
"width":width+"px",
});
if(gridtitle != null){
$grid.attr("title",gridtitle);
}
if(color != ""){
$grid.css({
"border-color":color,
});
}
obj.after($grid);
}
});
}
The above plugin I bind with
2 DOM objects and loads two seperate XML files but the callback function is run only on the last DOM object using both loaded XML files.
How can I fix this, so that the callback is applied on the corresponding DOMs. Is the above ajax call is correct?
Sample usage:
<script type="text/javascript">
$(function(){
$(".romeo img").imagetags({
height:500,
width:497,
url: "sample-data.xml",
title: "Testing...",
callback:function(id){
console.log(id);
},
});
});
</script>
<div class="padding-10 min-item background-color-black">
<div class="romeo"><img src="images/samplecontent/test_500x497.gif" alt="Image"> </div>
</div>
<script type="text/javascript">
$(function(){
$(".romeo2 img").imagetags({
height:500,
width:497,
url: "sample-data2.xml",
title: "Testing...",
callback:function(id){
console.log(id);
},
});
});
</script>
<div class="padding-10 min-item background-color-black">
<div class="romeo2"><img src="images/samplecontent/test2_500x497.gif" alt="Image"> </div>
</div>
Here is the sample XML data:
<?xml version="1.0" encoding="utf-8"?>
<gridlist>
<gridset>
<setname>gridset4</setname>
<color>#00FF00</color>
<grid>
<color>#FF77FF</color>
<id>grid2-324</id>
<x>300</x>
<y>300</y>
<height>60</height>
<width>60</width>
</grid>
</gridset>
<gridset>
<setname>gridset3</setname>
<color>#00FF00</color>
<grid>
<color>#FF77FF</color>
<id>grid2-212</id>
<x>300</x>
<y>300</y>
<height>100</height>
<width>100</width>
</grid>
<grid>
<color>#FF77FF</color>
<id>grid2-1212</id>
<x>200</x>
<y>10</y>
<height>200</height>
<width>10</width>
</grid>
</gridset>
</gridlist>
