Menu
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!
289
Is it possible to load a single page from an external website? Yes, it's possible, but you'll need 1 line of PHP :) If you only need RSS feeds and you don't mind relying on Google you could use jquery-feeds.
Method 1: Using HTML: One can use the anchor tag to redirect to a particular section on the same page. You need to add ” id attribute” to the section you want to show and use the same id in href attribute with “#” in the anchor tag.
To load external HTML into a <div>, wrap your code inside the load() function. To load a page in div in jQuery, use the load() method.
Include the jQuery by CDNStep 1: Firstly, we have to open that Html file in which we want to add the jQuery using CDN. Step 2: After then, we have to place the cursor between the head tag just before the title tag. And, then we have to use the <script> tag, which specify the src attribute for adding.
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”.
156
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.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
