CODEWITHSUNDEEP
jqueryhtml
NinjaBoy
NinjaBoy

Reputation: 3755

How to put a whole html page in a div using jquery?

First of all I want everyone to know that I am absolute beginner so please be patient with me.

I want to know how am I going to put the entire html page in a div. I tried $("#footballPlayers").html("footballplayers.html"); but it displays footballplayers.html text instead of the whole page.

index.html:

<html>
<head>
<script type="text/javascript" src="jquery1.6.4min.js"></script>
<script type="text/javascript">
 $(function(){
  $("div#tabFootballPlayers").click(function(){
    $("#footballPlayers").html("footballplayers.html");
    $("#actionStars").html("");
    $("#directors").html("");
  });
 });

 $(function(){
  $("div#tabActionStars").click(function(){
   $("#actionStars").html("actionstars.html");
   $("#footballPlayers").html("");
   $("#directors").html("");
  });
 });

 $(function(){
  $("div#tabDirectors").click(function(){
   $("#directors").html("directors.html");
   $("#actionStars").html("");
   $("#footballPlayers").html("");
  });
 });
</script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div>
 <div id="tabFootballPlayers">Football Players</div>
 <div id="footballPlayers"> </div>
 <div id="tabActionStars">Action Stars</div>
 <div id="actionStars"> </div>
 <div id="tabDirectors">Directors</div>
 <div id="directors"> </div>
</div>
</body>
</html>

Upvotes: 7

Views: 29183

Answers (8)

daCoda
daCoda

Reputation: 3865

I'm on the load train:

$("#div1").load("myhtmlpage.htm");

Upvotes: 0

Blender
Blender

Reputation: 298462

You use the .load() function:

$("#footballPlayers").load('footballplayers.html body');

Notice the selector after the URL. You can select elements from that page. I think you need the body, as having nested <html> tags could end badly.

A few more comments about your code:

You don't use this function more than once. Just shove all of your code into it:

$(function() {
  // All of your code here.
});

I prefer this syntax, as it looks more functional and shows you what it does:

$(document).ready(function() {
  // All of your code here.
});

Also, your code is really redundant. Try condensing it:

$(document).ready(function() {
  $("#your_menu_container div").click(function() {
    $(this).load(this.id.substr(3).toLowerCase() + '.html').siblings().html('');
  });
});

Upvotes: 9

Irvin Dominin
Irvin Dominin

Reputation: 30993

using your code you fill the html code with a constant string "footballplayer.html".

You can use the load method, here is an example:

$('#footballPlayers').load('footballplayers.html');

it get via AJAX the page you request and fill the element.

Upvotes: 2

Hitu Bansal
Hitu Bansal

Reputation: 3137

use load 

jQuery("#footballPlayers").load("footballplayers.html");

for more details click here

Upvotes: 9

gen_Eric
gen_Eric

Reputation: 227310

You need to actually load the contents of footballplayers.html using AJAX, and then put that in the div.

Try this:

$("#footballPlayers").load("footballplayers.html");

.load uses AJAX to get the page, then loads it into the div.

Upvotes: 2

Naftali
Naftali

Reputation: 146330

TRY: 

$("#footballPlayers").load("footballplayers.html");

Upvotes: 4

Manse
Manse

Reputation: 38147

replace 

$("#directors").html("directors.html");

with

$("#directors").load("directors.html");

the html file that you load should only contain the contents of the DIV - ie not the <head> the <body> or even the navigation - just the content

Upvotes: 7

James Johnson
James Johnson

Reputation: 46067

You can use load for this:

$("#div1").load("myhtmlpage.htm");

Upvotes: 6

Related Questions