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!

David Eldridge · Accepted Answer · 2018-03-13 13:11:58Z

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, 2018 at 13:11

David Eldridge

1567 bronze badges

answered Jun 21, 2012 at 8:58

GShenanigan

5,5035 gold badges41 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Cranio Over a year ago

@user983969 I don't understand, the OP did not want the divs one after another on every click?

Lemex Over a year ago

This code solves it as it would be the javascript i put in to each putton to load each div

Cranio Over a year ago

@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

Lemex Over a year ago

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

Kurkula Over a year ago

access control issues still should exist on external or https urls.

Cranio · Accepted Answer · 2012-06-21 09:10:50Z

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, 2012 at 9:10

answered Jun 21, 2012 at 9:00

Cranio

9,8764 gold badges37 silver badges55 bronze badges

1 Comment

Cranio Over a year ago

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.

Dan Smith · Accepted Answer · 2012-06-21 08:58:25Z

2

jQuery load can easily load page fragments, like so

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

answered Jun 21, 2012 at 8:58

Dan Smith

5,67534 silver badges33 bronze badges

Collectives™ on Stack Overflow

Jquery Load Part of External HTML

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related