CODEWITHSUNDEEP
javascriptjquerycss
VincentHuang
VincentHuang

Reputation: 416

Dynamically load content to div but top css style was not applied

I have the following codes in main.html

<link rel="stylesheet" href="static/css/material.cyan-light_blue.min.css">
<link rel="stylesheet" href="static/css/styles.css">
<script src="static/js/jquery-3.1.1.min.js"></script>
<script src="static/js/material.min.js"></script>
<script src="static/js/main.js"></script>

<main class="mdl-layout__content mdl-color--grey-100">
<div id="main-display" class="mdl-grid demo-content">
</div>
</main>

In main.js,

$(document).ready(function() {
    $("#main-display").load(
        "static/tabs.html",
        function() { $("#main-display").trigger("create");
    });
});

And in tabs.html, I have

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
    <a href="#tab1" class="mdl-tabs__tab is-active">Tab1</a>
    <a href="#tab2" class="mdl-tabs__tab is-active">Tab2</a>
    <a href="#tab3" class="mdl-tabs__tab is-active">Tab3</a>
</div>

The problem is when tabs.html is loaded by $("#main-display").load(), its css style was not applied. The MDL tabs feature did not work.

Upvotes: 0

Views: 1024

Answers (1)

VincentHuang
VincentHuang

Reputation: 416

Finally, I figure out a solution as follows by modifying main.js

$(document).ready(function() {
    $("#main-display").load(
        "static/tabs.html",
        function() {
            var tabs = document.getElementById("div-js-tabs");
            componentHandler.downgradeElements(tabs);
            componentHandler.upgradeElements(tabs);
        }
    );
});

And add id="div-js-tabs" to tabs in tabs.html.

<div id="div-js-tabs" class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">

Then, when I dynamically load tabs.html, its MDL css was applied properly.

Upvotes: 1

Related Questions