How to load page into div layer using ajax

[anfetienne]

hi,

I am using ajax to load external pages into a div layer... my reason for this is when in a certain section of the site the transition is smooth with no white flash.

my problem is that when a page has been loaded into the div layer I have a custom scroll which i use for div box overflow... the scroller is not being included, my div layers all resort back to the generic standard browser scroll bar. how can i load the external .js ile along with the page as it seems that it will load everything but an external js file

this is the code i use to load the pages in a div

//link
<a href="javascript:void()" onclick="javascript:sendRequest('friends.php', 'connectionsHolder')">Friends</a>


//ajax code
function createRequestObject() 
{
	var returnObj = false;
	
    if(window.XMLHttpRequest) {
        returnObj = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
		try {
			returnObj = new ActiveXObject("Msxml2.XMLHTTP");

			} catch (e) {
			try {
			returnObj = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {}
			}
			
    }
	return returnObj;
}

var http = createRequestObject();
var target;

// This is the function to call, give it the script file you want to run and
// the <strong class="highlight">div</strong> you want it to output to.
function sendRequest(scriptFile, targetElement)
{	
	target = targetElement;
	try{
	http.open('get', scriptFile, true);
	}
	catch (e){
	document.getElementById(target).innerHTML = e;
	return;
	}
	http.onreadystatechange = handleResponse;
	http.send();	
}

function handleResponse()
{	
	if(http.readyState == 4) {		
	try{
		var strResponse = http.responseText;
		document.getElementById(target).innerHTML = strResponse;
		} catch (e){
		document.getElementById(target).innerHTML = e;
		}	
	}
}



//this is the page code that i am trying to load
<?php session_start(); ?>
<link href="css/mainCSS.css" rel="stylesheet" type="text/css" />
<link href="css/indexCSS.css" rel="stylesheet" type="text/css" />
<?
include ("admin-dbcon.php");

$userName = $_SESSION['_amember_user']['login'];
$firstName = $_SESSION['_amember_user']['name_f'];
$firstName = ucfirst($firstName); 
$lastName = $_SESSION['_amember_user']['name_l'];
$lastName = ucfirst($lastName); 

$commentID=rand(0000000000,9999999999);
$dateAdded = gmdate("d M Y H:i:s");
$userAV="user/$userName/av/av.jpg";
$profilePic="user/$userName/profilePic/profile.jpg";
$formLocation="commentsBox";
?>
<style type="text/css">
<!--
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: underline;
	color: #E9C100;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
.style5 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
.style6 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #666666;
	text-align: center;
}
.style7 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
.style11 {font-size: 10px}
-->
</style>

//it won't load this flexcroll.js along with the whole page and reverts the scroll bar back to the standard browser bar
<script type="text/javascript" language="javascript" src="Scripts/flexcroll.js"></script>

<div id='connectionsFrameHolder' class='flexcroll'>
<div style="width:300px; height:auto;">
<?
mysql_connect($hostname,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");

$sql = "SELECT * FROM friendsList WHERE userName='{$userName}'";
$res = mysql_query( $sql ) or die( mysql_error );
 
	if ( mysql_num_rows( $res ) > 0 ){
	$row = mysql_fetch_array( $res );
	
	$str = $row['friendID'];
	$userID = explode(",",$str);
	$sts = $row['friendAV'];
	$userAV = explode(",",$sts);
	$arrayLength = count($userID);
		
		for($i=0;$i<$arrayLength;$i++)
		{
echo '<div style="width:300px; height:auto; overflow:visible">';  
echo '<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">';
  echo '<tr>';
    echo '<td width="50" height="50"><img src="Images/noImage.png" height="50" width="50"/></td>';
    echo '<td width="15">&nbsp;</td>';
    echo '<td width="215"><table width="215" border="0" cellspacing="0" cellpadding="0">';
      echo '<tr>';
        echo '<td height="50">'.ucwords($userID[$i]) .'<br />
          location
        </td>';
      echo '</tr>';
    echo '</table></td>';
  echo '</tr>';
echo '</table>';
echo '</div>';
		} 
}
mysql_close();
?>
</div>
</div>

[acoder]

1. Load the script into the page:

var script = document.createElement("script");
// then set the src and append to the head

2. or use eval
3. or have the script already included in the parent page.

[anfetienne]

i used a ajax tutorial to get that far with my code lol... could you explain that script in a little more detail or show me a place i can learn it?

[acoder]

Once you've created a script element, set the source and add it to the head:

script.src = "file.js";//location of file
document.getElementsByTagName("head")[0].appendChild(script);

[anfetienne]

just an idea i want to pass by you... since the pages that i am loading are php... wouldn't it be easier to use php to echo the script src into the header on load?

[acoder]

That'd work for the initial page, but when using Ajax, the PHP page will be loaded separately, so any JavaScript will have to be evaled or added manually.