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.