jquery plugin: creation
- by user1542535
The output am expecting is an unordered list which am creating with jquery...which takes in put from a json file (which works fine when i dont create it as a plugin). Am very new with the concept of building a plugin. i've tried to create one which doesnt output my unordered list
json file structure
{
"Categories": [
{
"cat_id":"1",
"name":"Main Menu1",
"sub_categories":[
{
"cat_id":"10",
"name":" Sub Menu11",
"sub_level_one_link":"http:\/\/one.com"
},
my js file
//create plugin
jQuery.fn.emrMenu= function (options) {
myoptions = jQuery.extend ({ url: "error" }, options);
if (myoptions.url=="error") { alert("Error:No data recieved"); return false; }
$(this).html (myoptions.url);
return this.each (function () {
//alert(myoptions.url+this.id);
$.getJSON(myoptions.url, function(data)
{
$.each(data.Categories, function(i, category)
{
alert("test1");
//get all sub menu items in list indexes
var submenudata='';
$.each(category.sub_categories, function(i, sub_categories)
{
submenudata += "<li><a href='"+sub_categories.sub_level_one_link+"' <span>"+sub_categories.name+"</span></a></li>";
});
var menudata ="<li id='"+category.cat_id+"' class='has-sub '><a href='#'><span>"+category.name+"</span></a><ul>"+submenudata+"</ul></li>";
//stringify unordered list and bind to div
var menu="<ul>"+menudata+"</ul>";
// $(menu).appendTo("#"this.id);
});
});
//alert (this.id);
});
}
and am calling the plugin:
<script>
$(document).ready(function() {
$('#menu_n').emrMenu ({ url: "menu_data.json"});
});
</script>
I'am pretty confused at this point any help is greatly appreciated cheers!
