none
Montar menu com jquery vindo do banco tá dando pau RRS feed

  • Pergunta

  • Estou com um problema que eu não consigo resolver. Preciso montar um menu, em três níveis e não está funcionando. Com dois níveis eu consegui, mas com três não está funcionando. Creio que seja um dos meus each(o primeiro), acho. Está assim(estático). Uma DIV(Principal, geral) dentro dessa DIV tem uma UL(Principal, geral). A partir daí, dessa UL, eu tenho uma LI e uma A HREF, e um MENU. Depois tenho mais uma LI e uma A HREF e assim até o último item. Bem, isso é estático, como eu recebi o HTML. O que passa é que eu preciso agora montar essa mesma estrutura, mas dinamicamente, vindo do banco de dados. Eu disse três níveis, porque está assim. Um Menu principal. Passando o mouse nele, me abre um item e dentro desse item, vários subitens. Tipo assim:
    MENU PRINCIPAL
       MENU SECUNDÁRIO
           Item1
           Item2
           Item 3

    Abaixo o meu HTML. Está comentado a partir da UL principal, para carregar dinamicamente.
    <div class="container_24 nav-menu">
            <ul class="grid_24" id="menuheader">
                @*<li>
                <a href="#" title="">Destinos mais procurados</a>
                <!-- DROP DOWN Destinos mais procurados -->
                <div class="container_24 dropdown-menu">
                <ul class="grid_4">
                    <li>América do Sul</li>
                    <li><a href="#" title="">Argentina</a></li>
                    <li><a href="#" title="">Bariloche</a></li>
                    <li><a href="#" title="">Chile</a></li>
                    <li><a href="#" title="">Peru</a></li>
                </ul>
                <ul class="grid_4">
                    <li>América do Norte</li>
                    <li><a href="#" title="">Estados Unidos</a></li>
                    <li><a href="#" title="">Florida</a></li>
                    <li><a href="#" title="">Disney</a></li>
                    <li><a href="#" title="">Universal</a></li>
                    <li><a href="#" title="">México</a></li>
                    <li><a href="#" title="">Canadá</a></li>
                </ul>
                <ul class="grid_4">
                    <li>Europa</li>
                    <li><a href="#" title="">Erupoa</a></li>
                    <li><a href="#" title="">Itália</a></li>
                    <li><a href="#" title="">Portugal</a></li>
                </ul>
                <ul class="grid_4">
                    <li>Caribe</li>
                    <li><a href="#" title="">Caribe</a></li>
                </ul>
                <ul class="grid_4">
                    <li>Brasil</li>
                    <li><a href="#" title="">Brasil</a></li>
                    <li><a href="#" title="">Club Med</a></li>
                </ul>
                <ul class="grid_4">
                    <li>Ásia e África</li>
                    <li><a href="#" title="">Abu Dhabi e Dubai</a></li>
                    <li><a href="#" title="">Exóticos</a></li>
                    <li><a href="#" title="">Roteiro África</a></li>
                </ul>
                <div class="clear"> </div>
                <ul class="grid_4">
                    <li>Europa</li>
                    <li><a href="#" title="">Erupoa</a></li>
                    <li><a href="#" title="">Itália</a></li>
                    <li><a href="#" title="">Portugal</a></li>
                </ul>
                </div>
                <!-- END DROP DOWN Destinos mais procurados -->
                </li>
                <li>
                    <a href="#" title="">Pacotes & Roteiros</a>
                    <!-- DROP DOWN Pacotes & Roteiros -->
                    <div class="container_24 dropdown-menu">
                        <ul class="grid_4">
                            <li>América do Sul</li>
                            <li><a href="#" title="">Argentina</a></li>
                            <li><a href="#" title="">Bariloche</a></li>
                            <li><a href="#" title="">Chile</a></li>
                            <li><a href="#" title="">Peru</a></li>
                        </ul>
                        <ul class="grid_4">
                            <li>América do Sul</li>
                            <li><a href="#" title="">Argentina</a></li>
                            <li><a href="#" title="">Bariloche</a></li>
                            <li><a href="#" title="">Chile</a></li>
                            <li><a href="#" title="">Peru</a></li>
                        </ul>
                    </div>
                    <!-- END DROP DOWN Pacotes & Roteiros -->
                </li>
                <li>
                    <a href="#" title="">Cruzeiros</a>
                </li>
                <li>
                    <a href="#" title="">Hotéis</a>
                </li>
                <li>
                    <a href="#" title="">Esportes</a>
                </li>
                <li>
                    <a href="#" title="">Luxo</a>
                </li>
                <li>
                    <a href="#" title="">Mais</a>
                    <!-- DROP DOWN Mais -->
                    <div class="container_24 dropdown-menu">
                        <ul class="grid_4">
                            <li>América do Norte</li>
                            <li><a href="#" title="">Disney</a></li>
                            <li><a href="#" title="">Universal</a></li>
                            <li><a href="#" title="">Orlando</a></li>
                        </ul>
                    </div>*@
                    <!-- END DROP DOWN Mais -->
                </li>
            </ul>
        </div>

    Abaixo o meu LINQ que tras do banco, as informações para montar o MENU
     [HttpPost]
            public JsonResult MontaMenuSuperiorDestino()
            {
                AgaxturCmsEntities db = new AgaxturCmsEntities();
                try
                {
                    var resultado =
                        (from c in db.TB_MENUSUPERIOR_CATEGORIAS
                         join s in db.TB_MENUSUPERIOR_SUBCATEGORIAS on c.id equals (s.Id_Categoria)
                         join s2 in db.TB_MENUSUPERIOR_SUBCATEGORIAS2 on s.id equals(s2.Id_SubCategoria)
                         where c.Ativo == 1 && c.CdCliente == 1
                         select new
                         {
                             c.id,
                             c.Categoria,
                             subconsulta = (from sub in db.TB_MENUSUPERIOR_SUBCATEGORIAS
                                            where sub.Ativo == 1 && sub.CdCliente == 1 && sub.Id_Categoria == c.id
                                            select new
                                            {
                                                sub.Id_Categoria,
                                                sub.SubCategoria,
                                                subconsulta2 = (from sub2 in db.TB_MENUSUPERIOR_SUBCATEGORIAS2
                                                                where sub2.Ativo == 1 && sub2.CdCliente == 1 && sub2.Id_Categoria == c.id
                                                                select new { sub2.Id_SubCategoria, sub2.SubCategoria2 }
                                                    ).ToList()
                                            }
                                            ).ToList(),


                         }).ToList();

                    return Json(new { resultado }, JsonRequestBehavior.AllowGet);
                }
                catch (Exception ex)
                {
                    return Json(new { resultado = ex.Message }, JsonRequestBehavior.AllowGet);
                }
            }

    E abaixo o meu jquery para montar o MENU

    function MontaMenuSuperiorDestino() {

        var str = "";
        $.ajax({
            url: '/Home/MontaMenuSuperiorDestino',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            type: "POST",
            success: function (data) {

                $(data.resultado).each(function () {

                    str = str + '<li><a href="#" title="">' + this.Categoria + '</a>';

                    $(this.subconsulta).each(function () {

                        str = str + ' <div class="container_24 dropdown-menu"><ul class="grid_4"><li>' + this.SubCategoria + '</li>';

                        $(this.subconsulta2).each(function () {

                            str = str + '<li><a href="#" title="">' + this.SubCategoria2 + '</a></li>';

                        });

                        str = str + '</ul></div>';

                    });

                    str = str + '</li>';

                    $("#menuheader").append(str);

                    str = "";
                });
            },
            error: function (error) {

            }
        });
    }

    Não consigo colocar esses código nas TAG's code, pois sempre que eu faço, fica tudo em uma única linha e não arrumadinho, conforme original. Tem como fazer isso? A visualização é melhor para quem vai responder.

                                                                 
    segunda-feira, 3 de março de 2014 12:16

Todas as Respostas

  • Esqueci de dizer qual é o erro. O erro é o seguinte. No meu BD existe, no primeiro menu ele monta da tabela TB_MENUSUPERIOR_CATEGORIAS e nessa tabela existe apenas cinco registro. O que passa que ele repete várias vezes o primeiro MENU. No segundo nível, ele mostra o último registro da tabela TB_MENUSUPERIOR_SUBCATEGORIAS e quando deveria ser o primeiro e no terceiro nível ele pega todos os registros e não apenas os que possuem chave da tabela referida. Eu não fiz o banco, ele já existia.
    segunda-feira, 3 de março de 2014 12:29
  • Pessoal, debugando a função javascript(jquery), o bservei que o foreach traz a primeira linha várias vezes. Assim, a primeira linha(Primeiro item de menu, seria DESTINOS MAIS PROCURADOS) e a segunda deveria ser(PACOTES & ROTEIROS) só DESTINOS MAIS PROCURADOS continua aparecendo na segunda iteração do loop e na terceira e acho que se repete de acordo com a quantidade de linhas na segunda tabela. Veja o que me trouxe. Meu problema está no each da jquery. Alguém pode me ajudar?

    <li><a href="#" title="">Destinos mais procurados</a>
    <div class="container_24 dropdown-menu">
    <ul class="grid_4">
    <li>América do Sul</li>
    <li><a href="#" title="">Argentina</a></li>
    <li><a href="#" title="">Bariloche</a></li>
    <li><a href="#" title="">Chile</a></li>
    <li><a href="#" title="">Peru</a></li>
    </ul>
    </div>

    <div class="container_24 dropdown-menu">
    <ul class="grid_4"><li>América do Norte</li>
    <li><a href="#" title="">Estados Unidos</a></li>
    <li><a href="#" title="">Florida</a></li>
    <li><a href="#" title="">Disney</a></li>
    <li><a href="#" title="">Universal</a></li>
    <li><a href="#" title="">México</a></li>
    <li><a href="#" title="">Canadá</a></li>
    <li><a href="#" title="">Caribe</a></li>
    </ul></div>

    <div class="container_24 dropdown-menu">
    <ul class="grid_4">
    <li>Europa</li>
    <li><a href="#" title="">Portugal</a></li>
    </ul></div>

    <div class="container_24 dropdown-menu">
    <ul class="grid_4">
    <li>Caribe</li>
    <li><a href="#" title="">Erupoa</a></li>
    <li><a href="#" title="">Itália</a></li>
    </ul></div>

    <div class="container_24 dropdown-menu">
    <ul class="grid_4"><li>Brasil</li>
    <li><a href="#" title="">Brasil</a></li>
    <li><a href="#" title="">Club Med</a></li>
    </ul></div>
    <div class="container_24 dropdown-menu">
    <ul class="grid_4"><li>Ásia e África</li>
    <li><a href="#" title="">Abu Dhabi e Dubai</a></li>
    <li><a href="#" title="">Exóticos</a></li>
    </ul></div>

    Esse já é minha terceira iteração

    <li><a href="#" title="">Destinos mais procurados</a> <div class="container_24 dropdown-menu"><ul class="grid_4"><li>América do Sul</li><li><a href="#" title="">Argentina</a></li><li><a href="#" title="">Bariloche</a></li><li><a href="#" title="">Chile</a></li><li><a href="#" title="">Peru</a></li></ul></div> <div class="container_24 dropdown-menu"><ul class="grid_4"><li>América do Norte</li><li><a href="#" title="">Estados Unidos</a></li><li><a href="#" title="">Florida</a></li><li><a href="#" title="">Disney</a></li><li><a href="#" title="">Universal</a></li><li><a href="#" title="">México</a></li><li><a href="#" title="">Canadá</a></li><li><a href="#" title="">Caribe</a></li></ul></div> <div class="container_24 dropdown-menu"><ul class="grid_4"><li>Europa</li><li><a href="#" title="">Portugal</a></li></ul></div> <div class="container_24 dropdown-menu"><ul class="grid_4"><li>Caribe</li><li><a href="#" title="">Erupoa</a></li><li><a href="#" title="">Itália</a></li></ul></div> <div class="container_24 dropdown-menu"><ul class="gr


    • Editado pnet terça-feira, 4 de março de 2014 19:20
    terça-feira, 4 de março de 2014 19:18

  • Bem, olhando bem a query eu em realidade tenho um "join" e é claro que vai sim, repeti sempre a primeira linha para cada linha da outra tabela. Agora sim, já sei qual é o erro e vou corrigir a minha query. Sei que esse forum não é de query, mas se alguém tem idéia, agradeço.
    quarta-feira, 5 de março de 2014 10:45
  • Removi o join e parece querer funcionar, mas ainda está dando pau, pois está montando o Menu exatamente com os itens que não tem relacionamento e deveria ser o oposto. Veja como ficou minha LINQ

     var resultado =
                        (from c in db.TB_MENUSUPERIOR_CATEGORIAS
                         //join s in db.TB_MENUSUPERIOR_SUBCATEGORIAS on c.id equals (s.Id_Categoria)
                         //join s2 in db.TB_MENUSUPERIOR_SUBCATEGORIAS2 on c.id equals(s2.Id_Categoria)
                         where c.Ativo == 1 && c.CdCliente == 1
                         select new
                         {
                             c.id,
                             c.Categoria,
                             subconsulta = (from sub in db.TB_MENUSUPERIOR_SUBCATEGORIAS
                                            where sub.Ativo == 1 && sub.CdCliente == 1 && sub.Id_Categoria == c.id
                                            select new
                                            {
                                                sub.Id_Categoria,
                                                sub.SubCategoria,
                                                subconsulta2 = (from sub2 in db.TB_MENUSUPERIOR_SUBCATEGORIAS2
                                                                where sub2.Ativo == 1 && sub2.CdCliente == 1 && sub2.Id_SubCategoria == sub.id
                                                                select new { sub2.Id_SubCategoria, sub2.SubCategoria2 }
                                                    ).ToList()
                                            }
                                            ).ToList(),
                             

                         }).ToList();

    quarta-feira, 5 de março de 2014 11:25
  • É o seguinte. Veja só a minha LINQ. Ela deveria trazer somente os itens que se relaciona com a SubCategoria e SubCategoria2. No banco está assim. Existe 7 itens de Categoria, mas apenas três(3) se relaciona com a SubCategoria e existe 8 itens em SubCategoria e todos se relacionam em SubCategoria2. Acontece que quando o MENU é montado, somente os itens da Categoria que não têm relacionamento com a SubCategoria é que aparecem no MENU e deveria ser exatamente o contrário. O que pode estar errado na minha LINQ e na minha JQuery? Desde já agradeço.
    quarta-feira, 5 de março de 2014 12:20
  • Bem, uma coisa eu consegui resolver, que é trazer os itens. Mudei a LINQ e resolveu(retirei o join ). Quando eu passe a mensagem anterior, no meu Note não funcionou, mas vim para a empresa e já está ok. O que está acontecendo agora, é que nos itens que tem vários subcategoria e as subcategorias várias subcategorias2, o menu não é montado corretamente, ou seja, deveria vir um ao lado do outro e do jeito que está, um sobrepõe o outro. Podem me ajudar?
    quarta-feira, 5 de março de 2014 16:39