[Include menu sidebar] Render layout lỗi!!!



  • Chào mọi người, em mới tập tành code Nodejs bằng EJS. Nhưng hiện giờ đang gặp một lỗi khi include menu sidebar. Hy vọng ai có kinh nghiệm có thể giúp em fix lỗi này với ạ. Nếu em không dùng include thì trang menu load bình thường dùng include thì menu nó bị full width khi load

    Khi em load trang thì cái menu bên trái nó bị tràn full màn hình như hình bên dưới:
    0_1527346793774_Screen Shot 2018-05-26 at 9.57.20 PM.png

    Sau khi load hoàn tất trang thì menu lại trở lại như bình thường:
    0_1527346816139_Screen Shot 2018-05-26 at 9.57.33 PM.png

    Dưới đây là đoạn code menu.ejs của em:

    <!DOCTYPE html>
    <html lang="en">
    <body>
    <!-- Menu Page container -->
    <div class="sidebar sidebar-main">
    <div class="sidebar-content">

        <!-- User menu -->
        <div class="sidebar-user">
            <div class="category-content">
                <div class="media">
                    <a href="#" class="media-left"><img src="/assets/images/placeholder.jpg" class="img-circle img-sm" alt=""></a>
                    <div class="media-body">
                        <span class="media-heading text-semibold">4Marts</span>
                        <div class="text-size-mini text-muted">
                            <i class="icon-pin text-size-small"></i> &nbsp;Ho Chi Minh City, VN
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /user menu -->
    
    
        <!-- Main navigation -->
        <div class="sidebar-category sidebar-category-visible">
            <div class="category-content no-padding">
                <ul class="navigation navigation-main navigation-accordion">
    
                    <!-- Main -->
                    <li class="navigation-header"><span>Main</span> <i class="icon-menu" title="Main pages"></i></li>
                    <li data-link="/customers"><a href="customers"><i class="icon-people"></i> <span>Customers</span></a></li>
                    <li data-link="/orders"><a href="orders"><i class="icon-file-spreadsheet"></i> <span>Orders</span></a></li>
                </ul>
            </div>
        </div>
        <!-- /main navigation -->
    
    </div>
    

    </div>
    <!-- /Menu page container -->

    <script type="text/javascript">

    $(document).ready(function() {
    
        //Set current selected menu
        var host = window.location.host;
        var url = window.location.href.toString();
        var web = '${pageContext.request.contextPath}';
    
        url = url.replace('http://', '');
        url = url.replace('https://', '');
        url = url.replace(host, '');
        url = url.replace(web, '');
    
        if (url.indexOf("#") !== -1) {
            var temp = url.split('#');
            url = temp[0];
        }
        var arr = url.split('?');
        var currentPage = arr[0];
    
        $("div.sidebar-category div.category-content ul li").each(function() {
            var link = $(this).data('link');
            if (link != null && link === currentPage) {
                $(this).addClass('active');
            }
        });
        alert("xin chao")
    });
    

    </script>

    </body>
    </html>



  • Mình nghỉ do câu alert() thay alert thành console.log() xem thế nào


Log in to reply