Using innerHTML to display contents of other pages

jxn · February 7th, 2006, 06:48 PM

I'm open to suggestions on other ways to accomplish this, but right now I'm trying to use innerHTML to do the following:

I have a page in a frame that lists artists/bands in a form something like this:

Code:

<div onClick="showAlbum(artist1)">Artist 1</div><div id="artist1"></div>
<div onClick="showAlbum(artist2)">Artist 2</div><div id="artist2"></div>
etc.
etc.

the showAlbum() function replaces the empty div after each artist with a list of their albums and tracks in the database. The problem is that from this loooong list of artists (some thousands of them) only one or two artists are ever going to be clicked at one time, so I don't want to spend the resources loading the artists + thousands more albums + tens of thousands (roughly 40,000) tracks into hidden <div> tags in advance. However, I still want to display the albums inline (not in a separate iframe). If there is some way to include a <div> from an unloaded page, I'd love to be able to do that. Something that could use document.getElementById('albumList') from some page albumList.php?artist1 and insert it into innerHTML or something like that would be unbelievably good.

so, anyone know of a way to do this with javascript (and/or php)?

vinod_yadav1919 · February 9th, 2006, 01:37 AM

Hii jxn!!

Offcourse you can do this with javascript,
plz try the code.
Note:-since you want to show image when user click on the artists name,you need to pass id value i.e. id1,id2 where you want to show actual image.
Hope this will help you
<script>
function clickit(imgname)
{

obj=document.getElementById("id1")

//create a tempobject
tempimg=document.createElement("img")
tempimg.src=imgname

//tempimg.src can be either to local folder or any other sites
//tmpimg.src="text.gif"
//in case of local files
//tmpimg.src="http://anyothersite1919.com/foldername/imagename.gif"
// in case of other websites-servers

obj.src=imgname
obj.height=tempimg.height
obj.width=tempimg.width

}
</script>

<table>
</tr>
  <tr><td>
<img id="id1" src="" width="38" height="76" border="0" ></td>
       <td width="100%"> </td>
       <td>test</td>
</tr>
</table>

<a href="javascript:clickit('img1.jpg')">View Image1</a> <br>
<a href="javascript:clickit('img2.jpg')">View Image2</a> <br>
<a href="javascript:clickit('img3.gif')">View Image3</a> <br>
<a href="javascript:clickit('img4.gif')">View Image4</a> <br>
<a href="javascript:clickit('img5.gif')">View Image5</a> <br>
<a href="javascript:clickit('img6.gif')">View Image6</a> <br>
<a href="javascript:clickit('img7.gif')">View Image7</a> <br>

Cheers :)

vinod