jquery plugin: creation

Posted by user1542535 on Stack Overflow See other posts from Stack Overflow or by user1542535
Published on 2012-08-28T03:22:38Z Indexed on 2012/08/28 3:38 UTC
Read the original article Hit count: 80

Filed under:
|
|

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!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JSON