| |
google-ajax-discuss |
Hi Sri,
Use an Iframe like this
and the call a function like this to add a new page to iframe
function changeIframe()
> This is the main file
> example1.html
> </head>
> <div id="mainContainer">
> test.html
> <a href="article2.html" onClick="load
> <a href="test.html" onClick="load('test.html','contentContainer')"
> >Back</a>
> </body>
You can actually do this simply using an Iframe instead of a Div.
<iframe id='url_frame'></iframe>
{
document.getElementById(url_frame).src = url;
return false;
> problem replacing the content of <div> tag.
> I can get the links in test.html by click on button. When I click on
> the url it is displaying the content in another page, but I am looking
> for the content should also have to display in <div> region.
> Here as follows my code :
> ------------------------
> <html>
> <head>
> <title>Test Example</title>
> <script type="text/javascript" src="ajax1.js"> </script>
> <body>
> <div id="header">
> <img src="/images/heading3.gif">
> </div>
> <div id="contentContainer">
> <h2 class="openingText">Click on one of the articles to the right.</
> h2>
> <p>This will load the the content of external articles into this
> DIV</p>
> </div>
> <div id="articleListContainer">
> <ul id="articleList" class="articleList">
> <li id="article1"><input type="button" value="Click" onClick="load
> ('test.html', 'contentContainer');"/></li>
> <li id="article2">This is the second article</li>
> <li id="article3">Article number 3</li>
> <li id="article4">About AJAX</li>
> <li id="article5">Article number 5</li>
> <li id="article6">Article number 6</li>
> <li id="article7">Article number 7</li>
> <li id="article8">Article number 8</li>
> <li id="article9">Article number 9</li>
> </ul>
> </div>
> </body>
> </html>
> ---------------
> <html>
> <head>
> <script type="text/javascript" src="ajax1.s"></script>
> </head>
> <body>
> <a href="javascript::load('article1.html','contentContainer')">Article1</a> <br/>
> ('article2.html','contentContainer')" >Article2</a> <br/>
> <a href="article3.html" onClick="load
> ('article3.html','contentContainer')" >Article3</a> <br/>
> <a href="article4.html" onClick="load
> ('article4.html','contentContainer')" >Article4</a> <br/>
> <a href="article5.html" onClick="load
> ('article5.html','contentContainer')" >Article5</a> <br/>
> <a href="article6.html" onClick="load
> ('article6.html','contentContainer')" >Article6</a> <br/>
> <a href="article7.html" onClick="load
> ('article7.html','contentContainer')" >Article7</a> <br/>
> <a href="article8.html" onClick="load
> ('article8.html','contentContainer')" >Article8</a> <br/>
> </html>