4

Estou carregando o menu, do sistema que estou desenvolvendo, através de uma requisição via ajax usando o jQuery, porém a formatação do menu não esta ficando conforme o esperado.

Minha requisição via jQuery

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: '/Menu/Index',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            dataType: 'html'
        })
            .success(function (result) {
                $('#menuNavigation').html(result);
            });
    });
</script>

Meu controller

public class MenuController : Controller
{
    public ActionResult Index()
    {
        using (DevcompyContext context = new DevcompyContext())
        {
            var menus = context.Menu.ToList();

            return PartialView(menus);
        }
    }          
}

Resultado esperado inserir a descrição da imagem aqui

Resultado obtido. inserir a descrição da imagem aqui

Resumidamente o meu problema estaria que quando carrego meu menu usando o jQuery, a formatação do mesmo é perdida, quando deixo estático a formatação fica correta.

Acredito que quem faz o serviço de fechar o menu seja via os seguintes javascripts

/*
 * metismenu - v1.0.3
 * Easy menu jQuery plugin for Twitter Bootstrap 3
 * https://github.com/onokumus/metisMenu
 *
 * Made by Osman Nuri Okumuş
 * Under MIT License
 */
;(function ($, window, document, undefined) {

var pluginName = "metisMenu",
    defaults = {
        toggle: true
    };

function Plugin(element, options) {
    this.element = element;
    this.settings = $.extend({}, defaults, options);
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
}

Plugin.prototype = {
    init: function () {

        var $this = $(this.element),
            $toggle = this.settings.toggle;

        if (this.isIE() <= 9) {
            $this.find("li.active").has("ul").children("ul").collapse("show");
            $this.find("li").not(".active").has("ul").children("ul").collapse("hide");
        } else {
            $this.find("li.active").has("ul").children("ul").addClass("collapse in");
            $this.find("li").not(".active").has("ul").children("ul").addClass("collapse");
        }

        $this.find("li").has("ul").children("a").on("click", function (e) {
            e.preventDefault();

            $(this).parent("li").toggleClass("active").children("ul").collapse("toggle");

            if ($toggle) {
                $(this).parent("li").siblings().removeClass("active").children("ul.in").collapse("hide");
            }
        });
    },

    isIE: function() {//https://gist.github.com/padolsey/527683
        var undef,
            v = 3,
            div = document.createElement("div"),
            all = div.getElementsByTagName("i");

        while (
            div.innerHTML = "<!--[if gt IE " + (++v) + "]><i></i><![endif]-->",
            all[0]
        ) {
            return v > 4 ? v : undef;
        }
    }
};

$.fn[ pluginName ] = function (options) {
    return this.each(function () {
        if (!$.data(this, "plugin_" + pluginName)) {
            $.data(this, "plugin_" + pluginName, new Plugin(this, options));
        }
    });
};
})(jQuery, window, document);

e

$(function() {

$('#side-menu').metisMenu();
});
//Loads the correct sidebar on window load,
//collapses the sidebar on window resize.
// Sets the min-height of #page-wrapper to window size
$(function() {    
$(window).bind("load resize", function() {        
topOffset = 50;
    width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
    if (width < 768) {
        $('div.navbar-collapse').addClass('collapse')
        topOffset = 100; // 2-row-menu
    } else {
        $('div.navbar-collapse').removeClass('collapse')
    }

    height = (this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height;
    height = height - topOffset;
    if (height < 1) height = 1;
    if (height > topOffset) {
        $("#page-wrapper").css("min-height", (height) + "px");
    }
})
});

Minha view _Layout

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
@RenderSection("styles", required: false)
</head>
<body>    
<div id="wrapper">
@if (Request.IsAuthenticated)
{
    <div id="menuNavigation"></div>            
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">@ViewBag.Title</h1>
            </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    @RenderBody()
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
        </div>
    }
    else
    {
        @RenderBody()
    }
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/plugins")

@RenderSection("scripts", required: false)

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: '/Menu/Index',
            contentType: 'application/html; charset=utf-8',
            type: 'GET',
            dataType: 'html'
        })
            .success(function (result) {
                $('#menuNavigation').html(result);
            });
    });
</script>

12
  • Não estou certo do que está errado, a pergunta ficou pouco clara... O problema está no menu que devia estar fechado para as abas que têm sub-menus? Como é que isso é feito, via CSS ou JS?
    – Sergio
    Commented 19/12/2014 às 12:21
  • Sergio, não tenho um profundo domínio em layout html, estou usando o layout startbootstrap.com/template-overviews/sb-admin-2, acredito que o problema ocorre pelo fato de estar usando o jQuery para carregar dinâmicamente meu menu, pois quando coloco ele estático no meu layout fica correto Commented 19/12/2014 às 12:23
  • E tens mais jQuery na página? ou só o Bootstrap?
    – Sergio
    Commented 19/12/2014 às 12:28
  • 1
    @PabloVargas podes experimentar a colocar $('#side-menu').metisMenu(); como ultima linha da função .success(function (result) {
    – Sergio
    Commented 19/12/2014 às 13:23
  • 1
    Resolveu, outra coisa que fiz que também resolveria, seria por os *.js usado pelo menu dentro da minha View, mas não gostei de ter arquivos js no meio do meu html Commented 19/12/2014 às 13:25

1 Resposta 1

2

O problema é que esse menu é fechado via JavaScript e o código que faz isso está a ser corrido antes do AJAX, portanto antes do HTML estar presente na página.

Uma solução é colocar $('#side-menu').metisMenu(); como ultima linha da função .success(function (result) {. Dessa maneira chamas o plugin que fecha o menu quando o HTML já está na página.

Outra solução, ideal, é fazer isso com CSS. Nesse caso a parte dos menus expandidos seria controlada por CSS e somente o abrir/fechar por JavaScript como o plugin tem. Isso implica mudar algum HTML e usar classes para identificar os ul com submenus.

sugestão de CSS:

#menuNavigation ul.submenu li { display: none; }
#menuNavigation ul.submenu.active li { display: block !important; }

jQuery:

$('#menuNavigation').on("click", "li ul a", function (e) {
    e.preventDefault();
    $(this).parent("li").toggleClass("active");
    $(this).parent("li").siblings().removeClass("active");
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .