Montar menu com jquery vindo do banco tá dando pau

03/03/2014

0

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) {

        }
    });
}
Pjava

Pjava

Responder

Posts

03/03/2014

Pjava

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.
Responder

04/03/2014

Pjava

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
Responder

05/03/2014

Pjava

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.
Responder

05/03/2014

Pjava

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();
Responder

05/03/2014

Pjava

É 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.
Responder

05/03/2014

Pjava

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?
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar