Search Results

Search found 2 results on 1 pages for 'saneef'.

Page 1/1 | 1 

  • Ajax call in a jQuery plugin not working properly

    - by Saneef
    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>

    Read the article

1