Inserting a html page into a current webpage

Hi all,

I have a problem when I try to input a webpage into the current webpage.

The two pages are index.htm and external.htm (external.htm contains a basic javascript calculator)

When a button is clicked to call the external.htm page, the page appears fine. However when I try to use the javascript/form calculator I can input numbers however it wont show me an answer.

The calculator works fine when I just view the external.htm by itself.

If you want to view all the code here it is!....

Does anyone have any ideas why the calculator might not be working when shown in the index.htm page?

This is the code in the index.htm page.....

<script type="text/javascript">

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

And this is the code in external.htm......

<script language="javascript">

function convertOddsToDecimal()
{
var answer
var classicOdds = prompt("Enter the classic fractional odds as, for example, 3/1","");

if ((classicOdds.indexOf('/') == -1)||isNaN(classicOdds.substring(0,classicOdds.indexOf('/'))/classicOdds.substring(classicOdds.indexOf('/')+1,classicOdds.length)))
{
alert ("Odds format not recognised. Please specify the odds in the format 3/1.");
}
else
{
answer = (classicOdds.substring(0,classicOdds.indexOf('/'))/classicOdds.substring(classicOdds.indexOf('/')+1,classicOdds.length)) + 1;
alert("The decimal odds equivalent to " + classicOdds + " is " + answer);
}

}

function clearResults()
{
document.getElementById("bettingresults").innerHTML ="";
}

function showResults()
{
var resultString;
var backreturnresult;
var laystakeresult;
var layriskresult;	

with (document.forms["matchedbettingcalc"])
{

	if((layodds.value>0) && (backodds.value>0) && (backstake.value>0))
	{

	backreturnresult = backodds.value * backstake.value - (backcommission.value * ((backodds.value - 1) * backstake.value)/100)-snr.value;
	laystakeresult = backreturnresult/(layodds.value - (laycommission.value/100));
	layriskresult =  laystakeresult * (layodds.value - 1);

	resultString = "<p><strong>Results</strong></p>";
	//resultString = resultString + "<p>If you win the backed bet you would receive £" + CurrencyFormatted(backreturnresult) + "<br />";
	resultString = resultString + "<p>Your lay stake is £" + CurrencyFormatted(laystakeresult) + " in Betfair.<br />";
	resultString = resultString + "Your liability in Betfair is £" + CurrencyFormatted(layriskresult) + "<br />";
	resultString = resultString + "If you win the backed bet and lose the lay you will receive £" + CurrencyFormatted(backreturnresult - layriskresult) + "<br />";
	resultString = resultString + "If you lose the backed bet and win the lay you will receive £" + CurrencyFormatted(laystakeresult * (100-laycommission.value)/100) + "</p>";

	document.getElementById("bettingresults").innerHTML = resultString;
}			

}

}



function CurrencyFormatted(amount)
{
var i = parseFloat(amount);
if(isNaN(i)) { i = 0.00; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if(s.indexOf('.') < 0) { s += '.00'; }
if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
s = minus + s;
return s;
}



</script><form id="matchedbettingcalc" name="matchedbettingcalc" method="post" action="" style="border-style: solid; background-color:#ffffff; padding: 10px;">
<p>  <label for="backstake"></label></p>
<table width="52%" border="0">

<tr>
<td width="300">Stake</td>
<td><input name="backstake" type="text" id="backstake" onchange="showResults();" onkeydown="clearResults();" size="10"/></td>
</tr>
<tr>
<td><label for="snr">How much stake is not returned? (£)</label>
</td>
<td><input name="snr" type="text" id="snr" size="10" onchange="showResults();" onkeydown="clearResults();"/></td>
</tr>
<tr>
<td>Back odds (decimal)</td>
<td><input name="backodds" type="text" id="backodds" size="6" onchange="showResults();" onkeydown="clearResults();"/>  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="110" height="42">
  <param name="movie" value="one%20page/images/odds_conv.swf" />
  <param name="quality" value="high" />
  <embed src="one%20page/images/odds_conv.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="110" height="42"></embed>
</object></td>
</tr>
<tr>
<td>Commission on Back bet? </td>
<td><input name="backcommission" type="text" id="backcommission" size="6" onchange="showResults();" onkeydown="clearResults();"  /></td>
</tr>
<tr>

<td>Lay odds (decimal)</td>
<td><input name="layodds" type="text" id="layodds" size="6" onchange="showResults();" onkeydown="clearResults();"/></td>
</tr>
<tr>
<td>Commission on Lay bet?</td>
<td><input name="laycommission" type="text" id="laycommission" onchange="showResults();" onkeydown="clearResults();" value="5" size="6" maxlength="5"/></td>
</tr>
<tr>
<td> </td>
<td><label for="Submit"></label><br />
      <input type="button" name="Calculate" value="Calculate" id="Submit" onclick="showResults();"/></td>

</tr>
</table>
<div id="bettingresults">Fill in the form correctly to use the matched betting calculator.
  <!-- /layout -->

  </div>
</form>

Thanks for any help guys. Much appreciated

the Javascript in your external.htm page won't get parsed as JS. easiest thing to do is use a JS package like jquery or prototype to do the ajax call for you. those libraries will look for JS in the HTML code and parse it.

your other option (since it looks like your ajax function can handle JS files) is to make an external.js file, put all the JS from external.htm in there, then load that JS file separately

Thanks for your reply.

Ive had a look and don't know what im looking for and could not find any demos on the site.

Could you please point me a bit more in the right direction or do you know of any options.

Sorry to be such a noob with all this stuff!

Thanks

for example, with jQuery, i would use:

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  </head>
  <body>
    <input type="button" value="Load Calculator" onclick="$('#calc').load('external.htm');" />
    <div id="calc"></div>
  </body>
</html>