linos linos - 3 months ago 9
HTML Question

Swap body tags between two HTML files

I have two separate HTML files (index.html and home.html) and a javascript (bodyswapscript.js) file. I'm trying to figure out how to swap the body of home.html (only) into the body of the index.html by using java script. Basically replacing body tags between HTML files.

I have posted my html code and java script below. The html is quick and dirty, so I'm only interested in swapping out the body information from index.html with home.html

1.) index.html

<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta charset="utf-8">

<title> My Profile</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<header>
<hgroup>
<center><h1>Index</h1>
<h4>index page</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="bodyswapscript.js"></script>


<nav>
<div id="wrapper">
<div id="header">
<ul>
<li><a id="homeContainer" href="home.html">Home</a></li>
<!-- <li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li> -->
</ul>
</div>
</div>

</nav>

</header>
<body>
<article>

<div id='swapcontent'>
index page
</div>

</article>
</body>
<footer>
<p>&copy; copy right, all rights reserved.</p>
</footer>


2.) home.html

<header>
<hgroup>
<center><h1>home.html</h1>
<h4>text</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

</header>
<body>
<article>

<div id='swapcontent'>
This is my home page
</div>

</article>
</body>


3.) bodyswapscript.js

$(document).ready(function()
{
$( 'li>a[id$="Container"]' ).click(function(event)
{
event.preventDefault();
var href = $(this).attr('href');
alert("Loading " + href);
$('#swapcontent').load(href);
return false;
});
});


4.) Supporting CSS

* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
width: 720px;
margin: 0px auto;
}

header h1 {
font-size: 36px;
margin: 0px;
}

header h2 {
font-size: 18px;
margin: 0px;
color: #888;
font-style: italic;
}

nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #2B60DE;
padding-left: 4px;
height: 24px;
}

nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}

nav ul li a {
color: #EFD3D3;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}

nav ul li a:hover {
color: #fff;
}

article > header time {
font-size: 14px;
display: block;
width: 26px;
padding: 2px;
text-align: center;
background-color: #993333;
color: #fff;
font-weight: bold;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
float: left;
margin-bottom: 10px;
}

article > header time span {
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
}

article > header h1 {
font-size: 20px;
float: left;
margin-left: 14px;
text-shadow: 2px 2px 5px #333;
}

article > header h1 a {
color: #993333;
}

article > section header h1 {
font-size: 16px;
}

article p {
clear: both;
}

footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}


This code was pulled from the following URL: http://jsfiddle.net/Christophe/hj9ry/1/

Answer

Correct invalid html, include wrapper parent element for content of <body> at home.html; call .load() with fragment identifier referencing wrapper element within home.html; use .unwrap() to remove wrapper element at index.html at complete function of .load()

index.html

<!doctype html>
<html>

<head>
  <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
  <meta charset="utf-8">

  <title> My Profile</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>


<body>
  <header>
    <hgroup>
      <center>
        <h1>Index</h1>
        <h4>index page</h4></center>
    </hgroup>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="bodyswapscript.js"></script>


    <nav>
      <div id="wrapper">
        <div id="header">
          <ul>
            <li><a id="homeContainer" href="home.html">Home</a></li>
            <!-- <li><a id="testContainer" href='test.html'>test</a></li>
                <li><a id="pageContainer" href="page.html">page</a></li> -->
          </ul>
        </div>
      </div>

    </nav>

  </header>
  <article>

    <div id='swapcontent'>
      index page
    </div>

  </article>
  <footer>
    <p>&copy; copy right, all rights reserved.</p>
  </footer>
</body>

</html>

home.html

<!doctype html>
<html>
<head></head>
<body>
  <div id="body">
  <header>
    <hgroup>
        <center><h1>home.html</h1>
        <h4>text</h4></center>
    </hgroup>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

</header>
    <article>

        <div id='swapcontent'>
            This is my home page
        </div> 

    </article>
    </div>
</body>
</html>

bodyswapscript.js

$(document).ready(function() {
  $('li>a[id$="Container"]').click(function(event) {
    event.preventDefault();
    var href = $(this).attr('href');
    // alert("Loading " + href);
    $('body').load(href + " #body", function() {
      $("#body *:first").unwrap()
    });
    return false;
  });
});

plnkr http://plnkr.co/edit/r8WTsQ9Xm3ZLsRp8nwLr?p=preview