Jquery Load Part of External HTML

Question

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!

score 15 · Accepted Answer · edited Mar 13 '18 at 13:11

15

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”.

edited Mar 13 '18 at 13:11

David Eldridge

156
7

answered Jun 21 '12 at 08:58

GShenanigan

5,119
5
36
46

@user983969 I don't understand, the OP did not want the divs one after another on every click? – Cranio Jun 21 '12 at 09:12
This code solves it as it would be the javascript i put in to each putton to load each div – Lemex Jun 21 '12 at 09:26
@user983969 Ok so you want to load them *selectively*, that was non clear to me, I thought you'd want them *progressively*, one after another, on every click on the *same* button – Cranio Jun 21 '12 at 10:06
1

Ahh, sorry about that but your code has gave me a major insight to solving the next problem! So don't worry your help hasnt went to waste ! Thanks – Lemex Jun 21 '12 at 10:11
access control issues still should exist on external or https urls. – Kurkula Sep 06 '17 at 18:27

Cranio · Answer 2 · 2012-06-21T09:10:50.147

4

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.

edited Jun 21 '12 at 09:10

answered Jun 21 '12 at 09:00

Cranio

8,964
2
29
51

NOTE: I'm glad for the upvotes, but upon further research it turned out that the OP wants more buttons, one for each DIV (it was absolutely not clear in how the question was stated), making this unnecessary (loading a page fragment on each button's click event is enough). So take my answer as a general approach. – Cranio Jun 21 '12 at 10:29

score 2 · Answer 3 · answered Jun 21 '12 at 08:58

2

jQuery load can easily load page fragments, like so

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

answered Jun 21 '12 at 08:58

Dan Smith

5,425
29
32

Jquery Load Part of External HTML

3 Answers3

Linked