Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Inserting a new html file

Status
Not open for further replies.
robi2

robi2

Programmer
Jan 19, 2003
62
IL
Hi, how can i dynamicly insert another html page ino the current one?

I dont want to have to reaload the whole page, and i dont want to use iframe because that way it will only fill a portion of the page, and i want the contents of the second page to be loaded as it is, tacking up as much space as necessary.
 
Sort by date Sort by votes
I think it is... i've seen it done, but i can't really figure out the code.
 
Upvote 0 Downvote
Hi mate,

The only way would be to preload it into the current page, then on whatever trigger make it visable. This would show the output of the page when the original page was loaded, not when the trigger event occurs.

Without using frames, you don't have any options to reload part of a page with external content.

Hope this helps

Wullie


The pessimist complains about the wind. The optimist expects it to change.
The leader adjusts the sails. - John Maxwell
 
Upvote 0 Downvote
Upvote 0 Downvote

its in hebrew... but please just click on any forum link, you will see that the page doesn't reload and it just gets the info from some other page after the click, and it does not display a hidden value.

You will see that your connection is reciveing data after you click.
 
Upvote 0 Downvote
Upvote 0 Downvote
So what they make the iframe exactly the size of the reply?
 
Upvote 0 Downvote
There is a way to do this using JavaScript, but not by inserting the contents of a separate file. The new HTML is in the JavaScript.
You can dynamically change the innerHTML of a span or div to seemingly change the page. If you make the span go from <body> to </body>, you can change the whole page.

e.g. Here's code I made for a slide show.
Code: 
<script language=&quot;JavaScript1.2&quot;>
<!--  
// Define and populate a 2-dimensional array with image paths and corresponding descriptions
var imgArr = new Array([&quot;images/image1.gif&quot;, &quot;Image1 Caption&quot;], 
                       [&quot;images/image2.gif&quot;, &quot;Image2 Caption&quot;],  
					   [&quot;images/image3.gif&quot;, &quot;Image3 Caption&quot;], 
                       [&quot;images/image4.gif&quot;, &quot;Image4 Caption&quot;]);
					   
// Define and initialize the array index
var imgSpot = 0;

// Increment the index 
function showNextPic(){
viewNextPic();
}

function viewNextPic(){
imgSpot = imgSpot < imgArr.length - 1 ? imgSpot + 1 : 0;
showPic();
}

function showPic(){
document.images.mainPic.src = imgArr[img]pot[/img][0];  // Change the image
document.images.mainPic.alt = imgArr[img]pot[/img][1];  // Change the image's alternative text
defaultStatus = imgArr[img]pot[/img][1];				   // Change the text in the Status bar
document.all.PicNum.innerText = (imgSpot + 1) + &quot;: &quot; + imgArr[img]pot[/img][1];  // Display the image number and description
}

// Decrement the index
function showPrevPic(){
imgSpot = imgSpot == 0 ? imgArr.length - 1 : imgSpot - 1;
showPic();
}

function AddToOptionList() {
   // Add options to the selection list from the image Array
var optionSpot;
for(optionSpot = 0; optionSpot < imgArr.length ; optionSpot++)
   document.all.PicList[optionSpot] = new Option(imgArr[optionSpot][1], optionSpot);
}



//-->
</script>
	
</head>
<body bgcolor=&quot;Silver&quot; onload=&quot;AddToOptionList()&quot;>
<table width=&quot;100%&quot;><tr>
<td width=&quot;15%&quot; valign=&quot;top&quot;>
  <a href=&quot;javascript:showNextPic()&quot;>Next</a>
  <br><br>
  <a href=&quot;javascript:showPrevPic()&quot;>Back</a>
  <br><br>
  Show Picture 
<br> <select name=&quot;PicList&quot; size=&quot;1&quot; onchange=&quot;SelectPic()&quot;>
</select>
<br>
<br>
  </td>
<td align=&quot;center&quot; valign=&quot;top&quot;>
  <img src=&quot;images/Search.gif&quot; border=&quot;0&quot; id=&quot;mainPic&quot; alt=&quot;Picture Goes Here&quot; >
	<br><br>
  Picture Number <span id=&quot;PicNum&quot;>1: Search Button</span>  
</td>
</tr></table>

</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
114
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
714
Chris Miller
Chris Miller
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
688
spamjim
spamjim
Mackeinath
  • Locked
  • Question
Xml file import
Replies
0
Views
276
Mackeinath
Mackeinath
scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
338
3esolar
3

Part and Inventory Search

Sponsor

Back
Top