[SOLVED] Ajax Layout Question

overlordofevil · December 2, 2008

Hello All,

I am brand new to ajax and still learning how to write it.

What I am trying to do is make a "frame" page. I have the css written and I think I have everything correct. When I load the page everything works fine but when I turn on the javascript I loose the header section of my layout.

Also to be fair I did not write the js file I am using the one that was listed in the ajax tutorial on this forum.

here is the css code

html, body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#nav, #top{
position: absolute; 
top: 0; 
left: 0; 
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#top{ 
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
width: auto;
height: 120px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#main{
position: fixed; 
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
top: 120px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}

* html #main{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

* html #top{ /*IE6 hack*/
width: 100%;
}

Here is my home page code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
<title>AJAX Test</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="top">
<div class="innertube">
<h1>HEADER</h1>
</div>
</div>

<div id="nav">
<div class="innertube">
<h3>LINKS</h3>
</div>
</div>

<div id="main">
<div class="innertube">
<h1>MAIN CONTENT</h1>
</div>
</div>

</body>
</html>

So this works now when I add the following to home.php the header disappears.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
<script type="text/javascript" language="javascript" src="ajaxrequest.js"></script>
<title>AJAX Test</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MyAjaxRequest('top','nav','main')">

so what I am looking for is if someone could point me in the right direction to figure out what I did incorrectly with the header or what to look at so I can fix this.

any help is appreciated.

Thanks

rhodesa · December 2, 2008

what is the code for ajaxrequest.js? specifically the MyAjaxRequest() function. i'm gonna guess that you are using the function wrong. what exactly are you trying to accomplish with the JS

overlordofevil · December 2, 2008

your probably right and that's what I want to learn/figure out.

The reason why I went the route of ajax is I am trying to update a web db interface. From what I have read and been told the ajax page will allow me to have the look and function of a frame page but everything is still considered one page so when I turn on the session time out control the entire page will change to the login screen and not just the "main frame".

here's the ajaxrequest.js file as requested. Like I said I took this from the tutorial listed on this forum so I am not sure how to make it work.


function MyAjaxRequest(target_div,file,check_div)
{
var MyHttpRequest = false;
var MyHttpLoading = '<p>Loading...</p>'; // or use an animated gif instead: var MyHttpLoading = '<img src="loading.gif" border="0" alt="running" />';
var ErrorMSG = 'Sorry - No XMLHTTP support in your browser, buy a newspaper instead';

if(check_div)
{
var check_value = document.getElementById(check_div).value;
}
else
{
var check_value = '';
}



if(window.XMLHttpRequest) // client use Firefox, Opera etc - Non Microsoft product
{
try
{
MyHttpRequest = new XMLHttpRequest();
}
catch(e)
{
MyHttpRequest = false;
}
}
else if(window.ActiveXObject) // client use Internet Explorer
{
try
{
MyHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
MyHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
MyHttpRequest = false;
}
}
}
else
{
MyHttpRequest = false;
}



if(MyHttpRequest) // browser supports httprequest
{
var random = Math.random() * Date.parse(new Date()); // make a random string to prevent caching

var file_array = file.split('.'); // prepare to check if we have a query string or a html/htm file
if(file_array[1] == 'php') // no query string, just calling a php file
{
  var query_string = '?rand=' + random;
}
else if(file_array[1] == 'htm' || file_array[1] == 'html') // calling a htm or html file
{
  var query_string = '';
}
else // we have presumable a php file with a query string attached
{
  var query_string = check_value + '&rand=' + random;
}


MyHttpRequest.open("get", url_encode(file + query_string), true); // <-- run the httprequest using GET


// handle the httprequest
MyHttpRequest.onreadystatechange = function ()
{
if(MyHttpRequest.readyState == 4) // done and responded
{
document.getElementById(target_div).innerHTML = MyHttpRequest.responseText; // display result
}
else
{
document.getElementById(target_div).innerHTML = MyHttpLoading; // still working
}
}
MyHttpRequest.send(null);
}
else
{
document.getElementById(target_div).innerHTML = ErrorMSG; // the browser was unable to create a httprequest
}
}
// end of "AJAX" function

I am still reading up on ajax and how these functions all work together.

Again I appreciate any help in figuring this out or pointing me in the right direction.

rhodesa · December 2, 2008

right...so when using that function:

function MyAjaxRequest(target_div,file,check_div)

target_div is the ID of the div you want to populate

file is the URL of the page you want to put inside that div

check_div it looks like you can ignore

but...i don't think this is going to do what you expect. if you load remote contents into a DIV, it is still considered local. so clicking on a link that is loaded up will change the entire page, not just what is inside the 'frame'. and if you are going to do that, it seems like dynamically building the page with PHP would be better then loading the contents remotely

overlordofevil · December 2, 2008

ok that might work better for me as the entire site is written in php all I really need to do is adjust the home page.

thanks for the info I will read up a bit more on the php side of things to see if I can get the layout to work the way I want it to.

Thanks

Sign In

[SOLVED] Ajax Layout Question

Recommended Posts

overlordofevil

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

overlordofevil

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

overlordofevil

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information