Go to Google Groups Home    google-ajax-discuss
Re: replace content of <div> tag

Phill-X <gllphill...@gmail.com>

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>