dynamically creating bootstrap dropdown from jQuery AJAX doesnt work

Question

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="http://www.w3.org/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..

Could you please provide some sample data from data.json?

pikachu0
– pikachu0

2014-03-11 06:45:32 +00:00
Commented Mar 11, 2014 at 6:45 — pikachu0
– pikachu0, Commented Mar 11, 2014 at 6:45
Here you go i've edited the post..

Ayush
– Ayush

2014-03-11 09:41:30 +00:00
Commented Mar 11, 2014 at 9:41 — Ayush
– Ayush, Commented Mar 11, 2014 at 9:41

Al Foиce ѫ · Accepted Answer · 2017-02-15 14:34:43Z

4

You can't initialize Bootstrap components just with class names after the document has loaded. When you add class names to your components Bootstrap initializes them on page load. If you are adding a component 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)

edited Feb 15, 2017 at 14:34

Al Foиce ѫ

4,33112 gold badges44 silver badges51 bronze badges

answered Jun 11, 2014 at 8:45

Rob Quincey

2,9262 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

dynamically creating bootstrap dropdown from jQuery AJAX doesnt work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related