How to load an html inside main index html on button click

Question

Use case:

I have designed a sidbar navigation using HTML and CSS\Js as shown below. lets name this index.html

I have another HTML e.g. Dashboard.html , whose layout looks like below

Now if i click on 'Live Execution' in index.html, the dashboard.HTML should display the content inside the main index.HTML without disturbing the sidebar navigation and headers

I am new to UI coding , so i am confused with all the available option, How can I acheieve the above result !!

Updated code - With Jquery

I was able to resolve this by the input provided by @Hien Nguyen

I have to put a div class before the function load() comes into act , and then reference that div class to call load()

Index.Html

<li class="active">
                <a href="#homeSubmenu" data-toggle="collapse" area-expandable="false" class="dropdown-toggle">Dashboard
                    <i class="far fa-chart-bar"></i>
                </a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#" onclick="load()">Live Execution
                            <i class="fas fa-chart-line"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">Error Analysis
                            <i class="fas fa-bug"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">Rerun failed Tc
                            <i class="fas fa-step-forward"></i>
                        </a>
                    </li>
                </ul>
            </li>
            <li>

</script>
{% block second %}
<div id="content1" class="col-xs1 centre-block text-center" style="width:100%">
</div>
        <script type="text/javascript">

            function load_jumbo() {

//     document.getElementById("content").innerHTML='<object type="text/html" data="dashboard.html" ></object>';
            $("#content1").load("jumbotron.html");

}
</script>
{% endblock %}

I updated it after your comment, now error seems to be gone from debugger, but nothing happens on click — pankaj mishra, Apr 26 '19 at 11:24
where did you put the div id="content" may be another div overlay on it — Hien Nguyen, Apr 26 '19 at 11:25

Hien Nguyen · Accepted Answer · 2019-04-27T02:53:50.363

3

You can use this on click a tag.

function load(file) {

     document.getElementById("content").innerHTML='<object type="text/html" data="flex.html" ></object>';
}

If you use jquery change to $("#content").load("flex.html");

Update:

If you try to open html file in local, you need setup security for browser allow enable CORS. Disable same origin policy in Chrome

You should use a web server to open file. I host sample in free host. It worked

https://viethien.000webhostapp.com

function load(file) {
     
     document.getElementById("content").innerHTML='<object type="text/html" data="flex.html" ></object>';
}

<li class="active">
                <a href="#homeSubmenu" data-toggle="collapse" area-expandable="false" class="dropdown-toggle">Dashboard
                    <i class="far fa-chart-bar"></i>
                </a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#" onclick="load()">Live Execution
                            <i class="fas fa-chart-line"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">Error Analysis
                            <i class="fas fa-bug"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">Rerun failed Tc
                            <i class="fas fa-step-forward"></i>
                        </a>
                    </li>
                </ul>
            </li>
<li>

<div id="content" style="width:100%"></div>

edited Apr 27 '19 at 02:53

answered Apr 26 '19 at 07:51

Hien Nguyen

21,001
7
35
48

You repeated twice same load(file) method. For second you can replace code with jQuery provided example. Else i am agreeing with your answer. – Andris Apr 26 '19 at 08:01
I am using Jquery , Updated my code as per your suggestion ( updated it in question) as well , On debugger i can see that function being called , but nothing happens and also no error reported – pankaj mishra Apr 26 '19 at 10:55
where did you put your html file? you need right url of html file or 2 html file in same folder – Hien Nguyen Apr 26 '19 at 10:56
2html file are in same folder , also for the tag option , i have updated my code in question with error – pankaj mishra Apr 26 '19 at 11:04
Did you add div with id content in your html file? At end of my code have a div with id content – Hien Nguyen Apr 26 '19 at 11:05
I have posted original HTML which i am using with your modification – pankaj mishra Apr 26 '19 at 11:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/192432/discussion-between-hien-nguyen-and-pankaj-mishra). – Hien Nguyen Apr 26 '19 at 12:17

score 0 · Answer 2 · answered Apr 26 '19 at 08:56

You can try something like this:

Index.html

<html> 
<head>......</head>
<script>
   function loadView(_view, _el) {
      //check if already selected view
      if ($(_el).hasClass("menuItemSelected")) {
          return;
       }

         //set selected
         $(".menuItemSelectable").removeClass("menuItemSelected");
         $(_el).addClass("menuItemSelected");

         loadSinglePage(_view);
        }
</script>
<body>
    .......
    //your sidebar here
   <a href="#dashboard" class="menuItemSelectable menuItemSelected" onclick="loadView('dashboard', this);"><i class="fa fa-dashboard" aria-hidden="true"></i><span class="nav-label">dashboard</span></a>
   <a href="#liveexec" class="menuItemSelectable" onclick="loadView('liveexec', this);"><i class="fa fa-globe" aria-hidden="true"></i> <span class="nav-label">Live Execution></span></a>

</body>

</html>

Then you will have a JS file which will handle the rest of the pages.

Content.js

//initialise the pages

var execContent = undefined;
var scheduleContent = undefined;

function loadPages() {

    // initialize your panels here
    $("#divSearchPanel").load("Pages/Search/search.html", function (response, status, xhr) {

        //progress
        $("#divProgressLoader").load("Pages/Search/progress.html", function (response, status, xhr) {
            loadProgress.init($("#divProgressLoader"));
        });

        searchPage.init($("#divSearchPanel"));

        //dashboard
        loadSinglePage("dashboard");
    });
   //call the loadpage function
   loadPage("dashboard");

}

//load the page


   function loadSinglePage(pageId) {

    currentPage = pageId;
    var contentDiv = $("#divPageContent");
    contentDiv.html("");

    if (pageId == "dashboard") {
        contentDiv.load("Pages/Dashboard/dashboard.html", function (response, status, xhr) {
            dashboardContent.init(contentDiv);
        });
    }

    if (pageId == "liveexec") {
        contentDiv.load("file/location/liveexec.html", function (response, status, xhr) {
            execContent .init(contentDiv);
        });
    }

Then your pages will look live this:

liveexec.html

<div style="">
    <table style="width: 100%; height: 100%;" cellpadding="10" cellspacing="10">
        <tr>
            <td id="divgraph"></td>

        </tr>
        <tr>
            <td id="divbuttons"></td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var execContent = execContent || {};

    (function (pub) {
        var _dom = null;

        pub.init = function (dom) {
            _dom = dom;
            //load graphs
            _dom.find("#divgraph").load("graph.html", function (response, status, xhr) {
                riskComparisonGraph.init(_dom.find("#divgraph"));
            });

        }

    })(liveexecContent || {});

</script>

How to load an html inside main index html on button click

2 Answers2

Linked