On Wed, Feb 11, 2009 at 5:09 PM, Phill-X <gllphill
...@gmail.com> wrote:
> Hi Sri,
> You can actually do this simply using an Iframe instead of a Div.
> Use an Iframe like this
> <iframe id='url_frame'></iframe>
> and the call a function like this to add a new page to iframe
> function changeIframe()
> {
> document.getElementById(url_frame).src = url;
> return false;
> }
> On Feb 11, 9:56 am, sri <srik1...@gmail.com> wrote:
> > Could any one help to me. I am new to the Ajax. I stucked with one
> > 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 :
> > This is the main file
> > example1.html
> > ------------------------
> > <html>
> > <head>
> > <title>Test Example</title>
> > <script type="text/javascript" src="ajax1.js"> </script>
> > </head>
> > <body>
> > <div id="mainContainer">
> > <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>
> > test.html
> > ---------------
> > <html>
> > <head>
> > <script type="text/javascript" src="ajax1.s"></script>
> > </head>
> > <body>
> > <a
> href="javascript::load('article1.html','contentContainer')">Article1</a>
> <br/>
> > <a href="article2.html" onClick="load
> > ('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/>
> > <a href="test.html" onClick="load('test.html','contentContainer')"
> > >Back</a>
> > </body>
> > </html>