javascript - dynamically creating bootstrap dropdown from jQuery AJAX doesnt work

I'm new to jQuery, its bin 3 days and before asking i've looked upon all ques here. I want to populate the navbar with dropdowns using data from a json file, i'm able to perfectly parse the data but the usage to bootstrap for dropdown, I'm adding classes from jQuery dynamically but they simply wont work, please help.

Heres my index.html

    <html lang="en" xmlns="">
<head>
    <title>JavaScipt AJAX</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div class="navbar secondary-navbar" id="department-nav">
    <div class="navbar-inner" id="menu">

    </div>
</div>
<script src="jquery.min.js"></script>
<script src="script_menu.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>

sript_menu.js

$( document ).ready(function() {
        $.getJSON( "data.json", function(data) {
                console.log( data );
                var menu_item = '<ul class="nav nav-departments nav-featured">';
                var output = '<ul class="nav-list">';
                $.each(data, function(key, val) {
                    if(val.warehouse_id=="1"){
                        if(val.name=="Produce" || val.name=="Bakery" || val.name=="Dairy & Eggs" || val.name=="Beverages" ) {
                            menu_item += '<li class="dropdown">';
                            menu_item += '<a class="navbar-link dropdown-toggle">' + val.name + '</a>';

                            output+= '<li>';
                            output+= '<h2>' + val.name + '</h2>';

                            menu_item += '<ul class="dropdown-menu">';
                            for(var i=0; i<val.aisles.length; i++) {
                                output+= '<p>' + val.aisles[i].name + '</p>';
                                menu_item += '<li>' + val.aisles[i].name + '</li>';
                            }
                            menu_item += '</ul>';
                            menu_item += '</li>';
                            output+= '</li>';
                        }

                    }
                });
                output+= '</ul>';
                menu_item+= '</ul>';

                $('#menu').html(menu_item);
                $('#update').html(output);
            });
});

Heres my data.json

[

{
    "display_name": "Beer, Wine & Spirits",
    "id": 148,
    "name": "Beer, Wine & Spirits",
    "rank_offset": 991,
    "sort_order": 9,
    "visible": true,
    "warehouse_id": 2,
    "aisles": [{
        "department_id": 148,
        "id": 979,
        "name": "Spirits",
        "rank_offset": 1,
        "visible": true
    }, {
        "department_id": 148,
        "id": 976,
        "name": "Beer",
        "rank_offset": 2,
        "visible": true
    }]
}, {
    "display_name": "Prepared Food",
    "id": 59,
    "name": "Prepared Food",
    "rank_offset": 990,
    "sort_order": 3,
    "visible": true,
    "warehouse_id": 2,
    "aisles": [{
        "department_id": 59,
        "id": 776,
        "name": "Tofu & Soy",
        "rank_offset": 45,
        "visible": true
    }, {
        "department_id": 59,
        "id": 465,
        "name": "Salads, Sushi & Wraps",
        "rank_offset": 10,
        "visible": true
    }, {
        "department_id": 59,
        "id": 466,
        "name": "Sides & Soups",
        "rank_offset": 40,
        "visible": true
    }, {
        "department_id": 59,
        "id": 468,
        "name": "Whole Meals",
        "rank_offset": 20,
        "visible": true
    }, {
        "department_id": 59,
        "id": 764,
        "name": "Fresh Pasta",
        "rank_offset": 35,
        "visible": true
    }, {
        "department_id": 59,
        "id": 770,
        "name": "Desserts",
        "rank_offset": 50,
        "visible": true
    }, {
        "department_id": 59,
        "id": 771,
        "name": "Fresh Pizza",
        "rank_offset": 30,
        "visible": true
    }]
}, {
    "display_name": "Grocery",
    "id": 57,
    "name": "Grocery",
    "rank_offset": 997,
    "sort_order": 5,
    "visible": true,
    "warehouse_id": 2,
    "aisles": [{
        "department_id": 57,
        "id": 443,
        "name": "Spices",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 444,
        "name": "Baking",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 445,
        "name": "Condiments",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 446,
        "name": "Peanut Butter & Jelly",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 447,
        "name": "Oil, Vinegar & Tuna",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 448,
        "name": "Oil & Olives",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 449,
        "name": "Canned & Jarred Vegetables",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 450,
        "name": "Tomato Sauce",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 451,
        "name": "Pasta",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 452,
        "name": "Grains, Rice & Dried Beans",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 453,
        "name": "Soup",
        "rank_offset": 100,
        "visible": true
    }]
}, {
    "display_name": "Personal & Home Care",
    "id": 56,
    "name": "Personal & Home Care",
    "rank_offset": 994,
    "sort_order": 6,
    "visible": true,
    "warehouse_id": 2,
    "aisles": [{
        "department_id": 56,
        "id": 435,
        "name": "Vitamins & Supplements",
        "rank_offset": 30,
        "visible": true
    }, {
        "department_id": 56,
        "id": 436,
        "name": "Paper Products",
        "rank_offset": 20,
        "visible": true
    }, {
        "department_id": 56,
        "id": 438,
        "name": "Pets!",
        "rank_offset": 40,
        "visible": true
    }, {
        "department_id": 56,
        "id": 437,
        "name": "Cleaning Products",
        "rank_offset": 10,
        "visible": true
    }, {
        "department_id": 56,
        "id": 778,
        "name": "Personal Care",
        "rank_offset": 28,
        "visible": true
    }, {
        "department_id": 56,
        "id": 779,
        "name": "Soap",
        "rank_offset": 25,
        "visible": true
    }]
}
]

thank you for being patient..

Heres my index.html

    <html lang="en" xmlns="http://www.w3/1999/html">
<head>
    <title>JavaScipt AJAX</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div class="navbar secondary-navbar" id="department-nav">
    <div class="navbar-inner" id="menu">

    </div>
</div>
<script src="jquery.min.js"></script>
<script src="script_menu.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>

sript_menu.js

$( document ).ready(function() {
        $.getJSON( "data.json", function(data) {
                console.log( data );
                var menu_item = '<ul class="nav nav-departments nav-featured">';
                var output = '<ul class="nav-list">';
                $.each(data, function(key, val) {
                    if(val.warehouse_id=="1"){
                        if(val.name=="Produce" || val.name=="Bakery" || val.name=="Dairy & Eggs" || val.name=="Beverages" ) {
                            menu_item += '<li class="dropdown">';
                            menu_item += '<a class="navbar-link dropdown-toggle">' + val.name + '</a>';

                            output+= '<li>';
                            output+= '<h2>' + val.name + '</h2>';

                            menu_item += '<ul class="dropdown-menu">';
                            for(var i=0; i<val.aisles.length; i++) {
                                output+= '<p>' + val.aisles[i].name + '</p>';
                                menu_item += '<li>' + val.aisles[i].name + '</li>';
                            }
                            menu_item += '</ul>';
                            menu_item += '</li>';
                            output+= '</li>';
                        }

                    }
                });
                output+= '</ul>';
                menu_item+= '</ul>';

                $('#menu').html(menu_item);
                $('#update').html(output);
            });
});

Heres my data.json

[

{
    "display_name": "Beer, Wine & Spirits",
    "id": 148,
    "name": "Beer, Wine & Spirits",
    "rank_offset": 991,
    "sort_order": 9,
    "visible": true,
    "warehouse_id": 2,
    "aisles": [{
        "department_id": 148,
        "id": 979,
        "name": "Spirits",
        "rank_offset": 1,
        "visible": true
    }, {
        "department_id": 148,
        "id": 976,
        "name": "Beer",
        "rank_offset": 2,
        "visible": true
    }]
}, {
    "display_name": "Prepared Food",
    "id": 59,
    "name": "Prepared Food",
    "rank_offset": 990,
    "sort_order": 3,
    "visible": true,
    "warehouse_id": 2,
    "aisles": [{
        "department_id": 59,
        "id": 776,
        "name": "Tofu & Soy",
        "rank_offset": 45,
        "visible": true
    }, {
        "department_id": 59,
        "id": 465,
        "name": "Salads, Sushi & Wraps",
        "rank_offset": 10,
        "visible": true
    }, {
        "department_id": 59,
        "id": 466,
        "name": "Sides & Soups",
        "rank_offset": 40,
        "visible": true
    }, {
        "department_id": 59,
        "id": 468,
        "name": "Whole Meals",
        "rank_offset": 20,
        "visible": true
    }, {
        "department_id": 59,
        "id": 764,
        "name": "Fresh Pasta",
        "rank_offset": 35,
        "visible": true
    }, {
        "department_id": 59,
        "id": 770,
        "name": "Desserts",
        "rank_offset": 50,
        "visible": true
    }, {
        "department_id": 59,
        "id": 771,
        "name": "Fresh Pizza",
        "rank_offset": 30,
        "visible": true
    }]
}, {
    "display_name": "Grocery",
    "id": 57,
    "name": "Grocery",
    "rank_offset": 997,
    "sort_order": 5,
    "visible": true,
    "warehouse_id": 2,
    "aisles": [{
        "department_id": 57,
        "id": 443,
        "name": "Spices",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 444,
        "name": "Baking",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 445,
        "name": "Condiments",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 446,
        "name": "Peanut Butter & Jelly",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 447,
        "name": "Oil, Vinegar & Tuna",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 448,
        "name": "Oil & Olives",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 449,
        "name": "Canned & Jarred Vegetables",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 450,
        "name": "Tomato Sauce",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 451,
        "name": "Pasta",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 452,
        "name": "Grains, Rice & Dried Beans",
        "rank_offset": 100,
        "visible": true
    }, {
        "department_id": 57,
        "id": 453,
        "name": "Soup",
        "rank_offset": 100,
        "visible": true
    }]
}, {
    "display_name": "Personal & Home Care",
    "id": 56,
    "name": "Personal & Home Care",
    "rank_offset": 994,
    "sort_order": 6,
    "visible": true,
    "warehouse_id": 2,
    "aisles": [{
        "department_id": 56,
        "id": 435,
        "name": "Vitamins & Supplements",
        "rank_offset": 30,
        "visible": true
    }, {
        "department_id": 56,
        "id": 436,
        "name": "Paper Products",
        "rank_offset": 20,
        "visible": true
    }, {
        "department_id": 56,
        "id": 438,
        "name": "Pets!",
        "rank_offset": 40,
        "visible": true
    }, {
        "department_id": 56,
        "id": 437,
        "name": "Cleaning Products",
        "rank_offset": 10,
        "visible": true
    }, {
        "department_id": 56,
        "id": 778,
        "name": "Personal Care",
        "rank_offset": 28,
        "visible": true
    }, {
        "department_id": 56,
        "id": 779,
        "name": "Soap",
        "rank_offset": 25,
        "visible": true
    }]
}
]

thank you for being patient..

Share Improve this question edited Mar 11, 2014 at 9:40 asked Mar 11, 2014 at 6:19 Ayush 5282 gold badges9 silver badges24 bronze badges

Could you please provide some sample data from data.json? – pikachu0 Commented Mar 11, 2014 at 6:45
Here you go i've edited the post.. – Ayush Commented Mar 11, 2014 at 9:41

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

You can't initialize Bootstrap ponents just with class names after the document has loaded. When you add class names to your ponents Bootstrap initializes them on page load. If you are adding a ponent after the page has loaded you will need to initialize it yourself using the 'Via JavaScript' initialization methods listed in the bootstrap docs, i.e. for Dropdowns you would need to fire $('.dropdown-toggle').dropdown() (Bootstrap docs)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - dynamically creating bootstrap dropdown from jQuery AJAX doesnt work - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)