Jquery Load Part of External HTML

Asked 21/6, 2012 at 8:55 Answered 21/6, 2012 at 9:0

Solved javascript jquery html jquery-load

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!

Immure answered 21/6, 2012 at 8:55 Comment(0)

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

Daughterly answered 21/6, 2012 at 8:58 Comment(5)

@user983969 I don't understand, the OP did not want the divs one after another on every click? – Behemoth 21/6, 2012 at 9:12

This code solves it as it would be the javascript i put in to each putton to load each div – Immure 21/6, 2012 at 9: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 – Behemoth 21/6, 2012 at 10:6

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 – Immure 21/6, 2012 at 10:11

access control issues still should exist on external or https urls. – Cullen 6/9, 2017 at 18:27

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.

Behemoth answered 21/6, 2012 at 9:0 Comment(1)

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. – Behemoth 21/6, 2012 at 10:29

jQuery load can easily load page fragments, like so

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

Intellectual answered 21/6, 2012 at 8:58 Comment(0)

Recommended topics

Hot tags