Jquery Load Part of External HTML

javascript jquery html jquery-load

24,383

Solution 1

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

Solution 2

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.

Solution 3

jQuery load can easily load page fragments, like so

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

24,383

Author by

Lemex

Updated on July 09, 2022

Comments

Lemex almost 2 years

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!

Cranio about 12 years

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

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

@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 about 12 years

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
Cranio about 12 years

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.
Kurkula almost 7 years

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