Problems creating items from a dropdownmenu submenu using Javascript

Question

I have a dropdownmenu that works normally when I load it using Asp.net core + Razor. Inside it I have the submenus Phones and WEB... When I try to recreate the submenus due to an app need, their items are positioned outside the submenu, unlike when it is loaded using the Asp.net Razor (Watch the phones).

Right should be right:

JS script that reloads submenus (I commented the part that loads the WEB submenu items):

function load_elements_dropdowns() {
    //Carregar Listas
    var selectAdicionarFormaContato = $('#btn-add-contato');

    $.ajax({
        url: "/pessoa-gerenciar/getFormaContatoList",
        type: "POST",
        data: { pessoaNatureza: $('#pessoaNatureza').val() },
        traditional: true,
        success: function (data) {
            selectAdicionarFormaContato.empty();
            selectAdicionarFormaContato.append($('<div class="dropdown-submenu"><a class="dropdown-item" href="javascript:void(0)" tabindex="-1">Telefones</a><div class="dropdown-menu" role="menu">'));
            $.each(data, function () {
                $.each(this, function (i, item) {
                    switch (item.id) {
                        case 1:
                            selectAdicionarFormaContato.append($('<a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="' + item.id + '"><i class="icon fa-tty" aria-hidden="true"></i>' + item.descricao + '</a>'));
                            break;
                        case 2:
                            selectAdicionarFormaContato.append($('<a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="' + item.id + '"><i class="icon wb-mobile" aria-hidden="true"></i>' + item.descricao + '</a>'));
                            break;
                        case 3:
                            selectAdicionarFormaContato.append($('<a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="' + item.id + '"><i class="icon wb-print" aria-hidden="true"></i>' + item.descricao + '</a>'));
                            break;

                        case 4:
                            selectAdicionarFormaContato.append($('<a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="' + item.id + '"><i class="icon md-headset-mic" aria-hidden="true"></i>' + item.descricao + '</a>'));
                            break;
                    }
                });
            });

            selectAdicionarFormaContato.append($('</div></div><div class="dropdown-divider"></div>'));
            selectAdicionarFormaContato.append($('<div class="dropdown-submenu"><a class="dropdown-item" href="javascript:void(0)" tabindex="-1">WEB</a><div class="dropdown-menu" role="menu">'));


            //$.each(data, function () {
            //    $.each(this, function (i, item) {
            //        //select.append($('1'));
            //        switch (item.id) {
            //            case '5':
            //                console.log('Oranges are $0.59 a pound.');
            //                break;
            //            case '6':
            //                break;
            //            case '7':
            //                break;
            //        }
            //    });
            //});

            selectAdicionarFormaContato.append($('</div></div>'));


        },
        error: function () {
            alert("Oops! Algo deu errado.");
        }
    });


}

Dropdownmenu complete code on Asp.net core

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle"
            aria-expanded="true" data-toggle="dropdown">
        <i class="icon wb-plus" aria-hidden="true"></i>
        Novo Contato
    </button>
    <div class="dropdown-menu" aria-labelledby="exampleDefaultDropdownSubMenu" role="menu" id="btn-add-contato">
        <div class="dropdown-submenu">
            <a class="dropdown-item" href="javascript:void(0)" tabindex="-1">Telefones</a>
            <div class="dropdown-menu" role="menu">
                @if (Model.FormasContato != null)
                {
                    @foreach (var item in Model.FormasContato)
                    {
                        switch (item.Value)
                        {
                            case "1":
                                <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="@item.Value"><i class="icon fa-tty" aria-hidden="true"></i>@item.Text</a>
                                break;
                            case "2":
                                <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="@item.Value"><i class="icon wb-mobile" aria-hidden="true"></i>@item.Text</a>
                                break;
                            case "3":
                                <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="@item.Value"><i class="icon wb-print" aria-hidden="true"></i>@item.Text</a>
                                break;
                            case "4":
                                <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="@item.Value"><i class="icon md-headset-mic" aria-hidden="true"></i>@item.Text</a>
                                break;
                        }
                    }
                }
            </div>
        </div>
        <div class="dropdown-divider"></div>
        <div class="dropdown-submenu">
            <a class="dropdown-item" href="javascript:void(0)" tabindex="-1">WEB</a>
            <div class="dropdown-menu" role="menu">
                @if (Model.FormasContato != null)
                {
                    @foreach (var item in Model.FormasContato)
                    {
                        switch (item.Value)
                        {
                            case "5":
                                <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="@item.Value"><i class="icon wb-envelope" aria-hidden="true"></i>@item.Text</a>
                                break;
                            case "6":
                                <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="@item.Value"><i class="icon glyphicon glyphicon-globe" aria-hidden="true"></i>@item.Text</a>
                                break;
                            case "7":
                                <a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="@item.Value"><i class="icon fa-users" aria-hidden="true"></i>@item.Text</a>
                                break;
                        }
                    }
                }
            </div>
        </div>
    </div>
</div>

How to solve this problem? Where am I wrong? A hug to all!

Answer 1

You are building HTML wrong using .append. When you append an open div, the browser automatically closes the div.

For example, on this line:

selectAdicionarFormaContato.append($('<div class="dropdown-submenu"><a class="dropdown-item" href="javascript:void(0)" tabindex="-1">Telefones</a><div class="dropdown-menu" role="menu">'));

You’re opening two Ivs and making the append. The browser will close these two Ivs once you make the append, making the result different from what you want.

The Divs closures in the row below will be ignored:

selectAdicionarFormaContato.append($('</div></div><div class="dropdown-divider"></div>'));

What you need to do is mount the HTML into any empty variable (in the example below, I used var html= '';) and go concatenating the HTML parts and only at the end make the append of everything at once:

function load_elements_dropdowns() {
    //Carregar Listas
    var selectAdicionarFormaContato = $('#btn-add-contato');
   var html = '';
    $.ajax({
        url: "/pessoa-gerenciar/getFormaContatoList",
        type: "POST",
        data: { pessoaNatureza: $('#pessoaNatureza').val() },
        traditional: true,
        success: function (data) {
            selectAdicionarFormaContato.empty();
            html +=  '<div class="dropdown-submenu"><a class="dropdown-item" href="javascript:void(0)" tabindex="-1">Telefones</a><div class="dropdown-menu" role="menu">';
            $.each(data, function () {
                $.each(this, function (i, item) {
                    switch (item.id) {
                        case 1:
                            html += '<a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="' + item.id + '"><i class="icon fa-tty" aria-hidden="true"></i>' + item.descricao + '</a>';
                            break;
                        case 2:
                            html += '<a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="' + item.id + '"><i class="icon wb-mobile" aria-hidden="true"></i>' + item.descricao + '</a>';
                            break;
                        case 3:
                            html += '<a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="' + item.id + '"><i class="icon wb-print" aria-hidden="true"></i>' + item.descricao + '</a>';
                            break;

                        case 4:
                            html += '<a class="dropdown-item" href="javascript:void(0)" role="menuitem" tabindex="-1" data-id="' + item.id + '"><i class="icon md-headset-mic" aria-hidden="true"></i>' + item.descricao + '</a>';
                            break;
                    }
                });
            });

            html += '</div></div><div class="dropdown-divider"></div>';
            html += '<div class="dropdown-submenu"><a class="dropdown-item" href="javascript:void(0)" tabindex="-1">WEB</a><div class="dropdown-menu" role="menu">';


            //$.each(data, function () {
            //    $.each(this, function (i, item) {
            //        //select.append($('1'));
            //        switch (item.id) {
            //            case '5':
            //                console.log('Oranges are $0.59 a pound.');
            //                break;
            //            case '6':
            //                break;
            //            case '7':
            //                break;
            //        }
            //    });
            //});

            html += '</div></div>';
            selectAdicionarFormaContato.append(html);

        },
        error: function () {
            alert("Oops! Algo deu errado.");
        }
    });


}