CODEWITHSUNDEEP
javascriptjqueryhtmljquery-load
Lemex
Lemex

Reputation: 3804

Jquery Load Part of External HTML

Basicily i have a index.html shown below..

<html>

<head>

<title>UI Test: Main Menu</title>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="general.js"></script>

</head>

<body>  

<input type="button" value="Details" onclick="javascript:$('#mainContainer').load('loadpage.html #name1div *');"/><br>
<div id="mainContainer">        

</div>

The loadpage.html cotaints

<div id="nav1div><h3>1 DIV </h3> </div>
<div id="nav2div><h3>2 DIV </h3> </div>
<div id="nav3div><h3>3 DIV </h3> </div>
<div id="nav4div><h3>4 DIV </h3> </div>

And my objective is to basicly load 1 of the divs at a time in to the main container, i know the load function can load the full page at once but this is NOT what i need to do.

Had a few look at similar questions but cant seem to resolve this..

All help is appreciated thanks guys!

Upvotes: 7

Views: 27097

Answers (3)

GShenanigan
GShenanigan

Reputation: 5493

The jQuery .load() function allows you to specify a portion of a page to load, rather than just the whole document.

e.g.

$('#mainContainer').load('loadpage.html #nav1div');

Check out the jQuery load() documentation particularly where it regards “Loading Page Fragments”.

Upvotes: 15

Cranio
Cranio

Reputation: 9848

To load DIVs one after another, define a counter

var curDiv = 1; // current Div

somewhere at the beginning (better to define a $(document).ready() function to initialize it). Define this function:

function loadThing()
{
    if (curDiv<5) $('#mainContainer').load('loadpage.html #nav' + (curDiv++) + 'div');
}

Define the click event like:

$("input#getdiv").click(loadThing);

and you button like:

<input id="getdiv" type="button" value="Details" />

With every click you should get first div, second, and so on.

With this approach you separate JS from HTML, which is always good.

Upvotes: 4

Dan Smith
Dan Smith

Reputation: 5685

jQuery load can easily load page fragments, like so

$('#mainContainer').load('loadpage.html #nav1div');

Upvotes: 2

Related Questions