Load a specific div in the HTML file from other HTML file

Question

I have 2 pages of html. One page contents all menus only & this is my index.html. The 2nd html file or the home.html contents all data of all menus. I mean, all data from different menus are in this page.

What i wanted to is once i click a specific menu in the index.html, only the contents of this menu will be displayed in the screen where it is in the home.html .

This is my code in index.html

<div class="list-group topics">
   <a href="home.html #headrest" onclick="headrest_main()" class="list-group-item list-group-item-success sub_topic"><i class="fa fa-circle-o text-red"></i> <span>Headrest Guide Clearance</span></a>
</div>

Home.html

<aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu">
        <!-- <li class="header">MAIN NAVIGATION</li> -->
        <li><a href="#headrest" onclick="headrest()"><i class="fa fa-circle-o text-aqua"></i> <span>Headrest Guide Clearance</span></a></li>
       <!--  <li class="header">LABELS</li> -->
        <li><a href="#structures" onclick="structures()"><i class="fa fa-circle-o text-red"></i> <span>Structures</span></a></li>
        <li><a href="#foams"><i class="fa fa-circle-o text-yellow"></i> <span>Foams</span></a></li>
        <li><a href="#fasteners"><i class="fa fa-circle-o text-teal"></i> <span>Fasteners</span></a></li>
        <li><a href="#recliner"><i class="fa fa-circle-o text-olive"></i> <span>Recliner Mechanism</span></a></li>
        <li><a href="#plastics"><i class="fa fa-circle-o text-teal"></i> <span>Plastics</span></a></li>
        <li><a href="#trims"><i class="fa fa-circle-o text-olive"></i> <span>Trims</span></a></li>
        <li><a href="#seat"><i class="fa fa-circle-o text-olive"></i> <span>Seat Tracks</span></a></li>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header hide">
      <h1>
        Dashboard
        <small>Control panel</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <!-- Main row -->
      <div class="row">
        <div id="headrest">
            <h1 class="title_topic">Headrest Guide Clearance</h1>       
        </div>

      </div><!-- /.row (main row) -->
      <div class="row">
        <div id="structures">
            <h1 class="title_topic">Structures</h1>         
        </div>

      </div><!-- /.row (main row) -->

    </section><!-- /.content -->
  </div><!-- /.content-wrapper -->

Javascript:

function headrest_main() {
     document.getElementById("headrest").innerHTML='<object type="text/html" data="home.html"></object>';
}

But this code in here is still not working. Is there a way that I could load an HTML file but only the specific div? This is really I wanted to implement but I still don't know how to do it.

Answer 1

Since you have tagged jquery I am suggesting you to do it in jquery using .load as below:

You need to pass the control to the function to know which element was clicked as below:

<div class="list-group topics">
   <a href="home.html #headrest" onclick="headrest_main(this)" class="list-group-item list-group-item-success sub_topic"><i class="fa fa-circle-o text-red"></i> <span>Headrest Guide Clearance</span></a>
                                                        ^^^^
</div>

and then use .load

function headrest_main(ctrl) {
     $("#headrest").load($(ctrl).attr("href"));
}

---

UPDATE

Instead of keeping the function for all the element keep a common class and capture the event click:

Ex:

<div class="list-group topics">
   <a href="home.html #headrest" class="list-group-item list-group-item-success sub_topic"><i class="fa fa-circle-o text-red"></i> <span>Headrest Guide Clearance</span></a>
</div>

Assuming that sub_topic is a common class for all the anchors you can capture event as below instead of adding onclick

$(".sub_topic").on('click',function(){
    $("#headrest").load($(this).attr("href"));
});

---

UPDATE 2

Ok since the anchor will have href attribute it will directly execute post and load the whole page in a new page and thus your load will not execute. So either you need to prevent its default action or you need to provide the url to fetch i.e. home.html #headrest in a separate anchor attribute:

Solution 1 - Prevent default action

Am using my second approach of capturing click event

$(".sub_topic").on('click',function(e){
    e.preventDefault();//this will prevent the default action of anchor
    $("#headrest").load($(this).attr("href"));
});

Solution 2 - Store in a different attribute

Change href="#" and store actual href in different attribute

<div class="list-group topics">
   <a href="#" data-href="home.html #headrest" onclick="headrest_main(this)" class="list-group-item list-group-item-success sub_topic"><i class="fa fa-circle-o text-red"></i> <span>Headrest Guide Clearance</span></a>
    <!--       ^^^^ store url to load in some data-* attribute -->
</div>

and in JS

function headrest_main(ctrl) {
     $("#headrest").load($(ctrl).attr("data-href")); //get the value from data-href
}