Page Loading Script. (new Question)

norNerd · December 5, 2009

Hey people, i found a nice page loader :)Dont remember where i found it but it's free to use, and works, but i got a problem.script:

<script>function LoadPage(page,usediv) {		 // Set up request varible		 try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}		 //Show page is loading		 document.getElementById(usediv).innerHTML = 'Loading Page...';		 //scroll to top		 scroll(0,0);		 //send data		 xmlhttp.onreadystatechange = function(){				 //Check page is completed and there were no problems.				 if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {						//Write data returned to page						document.getElementById(usediv).innerHTML = xmlhttp.responseText;				 }		 }		 xmlhttp.open("GET", page);		 xmlhttp.send(null);		 //Stop any link loading normaly		 return false;}</script>

html:

<a onclick="java script:LoadPage('popup/popup_categories.php','page_content');">Load Page</a><div id="page_content"></div>

What i want to be able to do is use php inside LoadPage('here','page_content');Like this:

<a onclick="java script:LoadPage('<?php echo "$someDir/$someFile?page_category=$somePageCategory";?>','page_content');">Load Page</a><div id="page_content"></div>

Anyone know how to solve this?Or does anyone know about a better script for only loading pages?(Question solved, but got a new one at the bottom )Kris

jeffman · December 5, 2009

What's the problem, exactly? When you view source, does the <a> element look incorrect?+++I would be remiss if I didn't point out some bad practices that have nothing to do with your problem.1. You only need to use the javascript: keyword in an href attribute. It doesn't do anything wrong in a click handler; it's just wasted code.2. to validate, an <a> element must have an href attribute.

norNerd · December 5, 2009

Hi, My problem is not the use of the page loading function it works quite well.Until i decided to use PHP to output variables with echo inside the "page" "id" in the PageLoad('page','div_to_place_page_in'); function.I need to be able to use etc this;

<?php//File i want outputted$get_page = "index.php";//Page section i want outputted$get_view = "news";//Page article i want outputted$get_article = rand(1,5);//Output the link to pageecho "<a onclick="LoadPage('$get_one?view=$get_two&article=$get_article','page_content');">Load Page</a>?><div id="page_content"></div>

Then my "news" section will be something like this:

$select_news_id = $_GET['article'];$output_news = mysql_query("myquery");$out_news = mysql_fetch_object($output_news);echo "$out_news->name<br />";echo "$out_news->text";

In other words, i want to be able to load pages with variables in the url.Variables must be outputted with php.If this fucntion is wrong to use for this, do you know where i can find a function to do this?Kris

jeffman · December 5, 2009

This . . .echo "<a onclick="LoadPage('$get_one?view=$get_two&article=$get_article','page_content');">Load Page</a>. . . is not the line of code you showed in your first post. This will not work. Your quotation marks are incorrect. The nested quotes need to be escaped. The string to be echoed must be terminated. And the line of code also must be terminated. Try this:echo "<a onclick=\"LoadPage('$get_one?view=$get_two&article=$get_article','page_content');\">Load Page</a>";If your PHP is outputting an error or a blank page, you should explain that when you ask for help. If your PHP is outputting HTML, then you should post the incorrect HTML that you see when you View Source.

norNerd · December 5, 2009

I know its not the line i posted in the first post, my real line looks like the one you posted.It does load wrong, but it works now, what i did wrong in the first place was that i dident echo the whole link, i only printed a echo in the LoadPage();Thanks for the validation lesson on the a tag tho :)Kris

norNerd · December 6, 2009

Hi again, now that the script works, and i think my system is ready to go over to smooth loadings, i have a question.Ok before we start ill post a example page:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>My example</title><script>function LoadPage(page,usediv) {		 // Set up request varible		 try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}		 //Show page is loading		 document.getElementById(usediv).innerHTML = 'Loading Page...';		 //scroll to top		 scroll(0,0);		 //send data		 xmlhttp.onreadystatechange = function(){				 //Check page is completed and there were no problems.				 if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {						//Write data returned to page						document.getElementById(usediv).innerHTML = xmlhttp.responseText;				 }		 }		 xmlhttp.open("GET", page);		 xmlhttp.send(null);		 //Stop any link loading normaly		 return false;}</script> </head><body><table width="100%" border="0">  <tr>	<td width="20%">		<div id="loader_place"></div> 	</td>	<td width="80%">		<div id="header">Wee my site!! Welcome!!</div> 	</td>  </tr>  <tr>	<td>		<?php echo "<a href=\"#\" onclick=\"LoadPage('somepage.php','page_container');\">Some page</a>"; ?>		<br />		<?php echo "<a href=\"#\" onclick=\"LoadPage('someotherpage.php','page_container');\">Some other page</a>"; ?>	</td>	<td>		<div id="page_container"></div>	</td>  </tr></table></body></html>

So as you see, not much in this site now.And it wont be when we are done here either.The LoadPage function places the "Loading Page..." inside the "page_container" div i've used, as the scripts tells it to do.I want "Loading Page..." to appear in the "loader_place" div i've used insted.I tried changeing the line that tells it where to place it to this:

document.getElementById(loader_place).innerHTML = 'Loading Page...';

And to this:

document.getElementById('loader_place').innerHTML = 'Loading Page...';

And none of those worked, and since im no genius with javascript, i have totally no idea of what i can do.So any clues and/or hints are appreciated :)Kris

jeffman · December 6, 2009

The second one should work. You might need to clear your cache?

norNerd · December 6, 2009

Cleard it but still dont work..It wont even load the pages into "page_container" when i change the value of usediv inside that line.Dont know if that gave you some clues? :)Kris

norNerd · December 6, 2009

Added loader into LoadPage(page, usediv, loader)Dident work either :s

jeffman · December 6, 2009

Please post the new page, all of it, and I'll run it for myself. I get nervous when people tell me about their changes, but I can't actually see them. Don't worry about taking up space on the board.

norNerd · December 6, 2009

Hehe here it is

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>My example</title><script>function LoadPage(page,usediv,loader) {		 // Set up request varible		 try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}		 //Show page is loading		 document.getElementById(loader).innerHTML = 'Loading Page...';		 //scroll to top		 scroll(0,0);		 //send data		 xmlhttp.onreadystatechange = function(){				 //Check page is completed and there were no problems.				 if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {						//Write data returned to page						document.getElementById(usediv).innerHTML = xmlhttp.responseText;				 }		 }		 xmlhttp.open("GET", page);		 xmlhttp.send(null);		 //Stop any link loading normaly		 return false;}</script> </head><body><table width="100%" border="0">  <tr>	<td width="20%">		<div id="loader_place"></div> 	</td>	<td width="80%">		<div id="header">Wee my site!! Welcome!!</div> 	</td>  </tr>  <tr>	<td>		<?php echo "<a href=\"#\" onclick=\"LoadPage('somepage.php','page_container','loader_place');\">Some page</a>"; ?>		<br />		<?php echo "<a href=\"#\" onclick=\"LoadPage('someotherpage.php','page_container','loader_place');\">Some other page</a>"; ?>	</td>	<td>		<div id="page_container"></div>	</td>  </tr></table></body></html>

Crated the files i wrote here, index.php, somepage.php and someotherpage.phpAnd i uploaded the files to my server and runned a test, it does actually place the "Loading Page..." inside the loader_place div now.But it wont go away after loading, so something tricky must be done i think

jeffman · December 6, 2009

But it wont go away after loading, so something tricky must be done i think

If that is the only problem now, I won't run a test.The solution is not tricky. Put this line in your onreadystatechange function:document.getElementById(loader).innerHTML = "";

norNerd · December 6, 2009

Thanks DD it now works perfect in the example page :)But in the page i use it dont work.This page im creating is alot bigger and contains alot of code, so i will pull out the pieces i think have something to say in this.First we have a connection script included on all pages.Then we have a Index page where also the connection script is, the loading script is also located here, and it requires me to have the connection script at all pages i have.The menu on the Index page is loaded with a regular php function <?php loadMenu(main); ?>Inside the loadMenu(main); function i set some variables like folder etc, and include the menu file.Some contents of menu file:

<?phpecho"<a href=\"#\" onclick=\"LoadPage('index15.php','page_container','loader_loc');\"><img src=\"$mDIR/client_relations.jpg\" border=\"0\" width=\"183\" height=\"30\" /></a>";?>

Just a notice, all this works when i allow it to show the "Loading Page..." inside the "usediv"/"page_container"So really confusing.Kris

jeffman · December 6, 2009

What exactly do you mean when you say it doesn't work?Do you have a link to this page?

norNerd · December 6, 2009

What i mean is that when i use this:

<?phpecho"<a href=\"#\" onclick=\"LoadPage('index15.php','page_container','loader_loc');\"><img src=\"$mDIR/client_relations.jpg\" border=\"0\" width=\"183\" height=\"30\" /></a>";?>

It dont work, as in, it does not load the pages, it does not show the loader_loc.But when i remove the "loader_loc" "attribute?" it works.like this:

<?phpecho"<a href=\"#\" onclick=\"LoadPage('index15.php','page_container');\"><img src=\"$mDIR/client_relations.jpg\" border=\"0\" width=\"183\" height=\"30\" /></a>";?>

By removeing i also meen that i remove it from the javascript as well, and i change the javascript getElementById('loader') to usediv again.So in other words, when i accept that the javascript only can show the "Loading Page..." in the same div as the page is beeing loaded into, it works. I know its rude of me to ask since i cant show you the site im working on (yet), but the site owner whould actually kill me if i showed it before it was finished, hope you understand this? :)I'm trying to release it around 24th dec, so will give all who have helped in the forum the link when its done.Kris

jeffman · December 6, 2009

Are you testing this in Firefox? I hope so. The error console is very useful. It sounds like your script should be reporting errors. It would be good to look at them.Is this a typing error or the actual code:getElementById('loader')? If loader is a variable, it should not be in quotation marks.

norNerd · December 6, 2009

I started using firefox for a few months ago, and it has made me hate IE so bad :)And know firefox's error handler was better, but dident know it had a so perfect error console attached Thanks big time!!!Ill post some more code :)Here is a ripout of my header:

<?phpinclude "matrixFunctions.php";?><!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Matrix</title><script>function LoadPage(page,usediv,loader) {		 // Set up request varible		 try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}		 //Show page is loading		 document.getElementById(loader).innerHTML = 'Loading Page...';		 //scroll to top		 scroll(0,0);		 //send data		 xmlhttp.onreadystatechange = function(){				 //Check page is completed and there were no problems.				 if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {						//Write data returned to page						document.getElementById(loader).innerHTML = '';						document.getElementById(usediv).innerHTML = xmlhttp.responseText;				 }		 }		 xmlhttp.open("GET", page);		 xmlhttp.send(null);		 //Stop any link loading normaly		 return false;}</script>

Here is a ripout of my body where you can see the page, usediv and loader areas:

	<img style="float:left;" src="images/jpg/header.jpg" width="615" height="85" border="0" usemap="#Map3" />	<span id="header_bar_content">Logged in as <?php echo "".$_COOKIE['user']."   -  "; matrixNewPM($userName); ?></span></td>  </tr>  <tr>	<td height="56" colspan="2" background="images/jpg/menu_vertical_flexible.jpg"><img src="images/jpg/menu_horizontal.jpg" width="1085" height="53" border="0" usemap="#Map5" /><!--loader is here: --></div id="loader_loc"></div></td>  </tr>  <tr>	<td valign="top" bgcolor="#4B4C4E"><!--Menu is here: --><?php matrixMenu(main); ?>	</td>		<td width="85%" height="592" align="center" valign="top" bgcolor="#727272">	<table width="100%" border="0" cellpadding="0" cellspacing="0">		<tr>		  <td align="center">	 <!--page (usediv) is here: -->				  <div id="page_container"></div>

The matrixMenu(main); you got the code in the other post :)Does this tell you anything? Kris

jeffman · December 6, 2009

I used your function and it worked correctly for me with all three arguments.I noticed this in your HTML:</div id="loader_loc"></div>The first slash looks like a typing mistake. If it is in your real code, the code will not work.

norNerd · December 6, 2009

Aha, so typical!! Thanks alot for your help :)Kinda amazing what big truble a slash can create, when the writer tries to write to fast :)Will look for typing mistakes from this day on Thanks again :)Kris

norNerd · December 6, 2009

Well, it brings me to another question since we got it going here, if i wanna include a image insted of just the text "Loading Page...".What whould i need to add? Guess <img src="imgrul" size="size" height="height" \> wont work? or?Kris

jeffman · December 6, 2009

Do it with CSS. You have several options. Here is the easiest. You will of course need to adapt the technique to your situation:

div.empty {	width: 100px;	height: 100px;	background-image: none;	/* set width and height to the dimensions of your image */ }div.loading {	width: 100px;	height: 100px;	background-image: url('imgs/loading.gif');	/* set width and height to the dimensions of your image */}...function toggleLoadingMessage(id, loading) {	var el = document.getElementById(id);	if (loading) {		el.className = "loading";	} else {		el.className = "empty";	}	return false;}...<div id="msg1" class="empty"></div><a href="#" onclick="return toggleLoadingMessage('msg1', true);">Click me</a>

To hide the message image, pass false in the second argument.

norNerd · December 6, 2009

Thanks alot again :)That worked perfectly, and i now i feel i get abit more like a "logical thinker" about javascript, often use this.className='someclass' onclick and onmouseover, so should have known that i chould use it, thanks for opening some doors for me :)Kris

norNerd · December 6, 2009

Script turned out like this tho

<script>function LoadPage(page,usediv,loader) {		 // Set up request varible		 try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}		 //Show page is loading		 document.getElementById(loader).className = 'loading';		 //scroll to top		 scroll(0,0);		 //send data		 xmlhttp.onreadystatechange = function(){				 //Check page is completed and there were no problems.				 if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {						//Write data returned to page												document.getElementById(loader).className = 'no_loading';						document.getElementById(loader).innerHTML = '';						document.getElementById(usediv).innerHTML = xmlhttp.responseText;				 }		 }		 xmlhttp.open("GET", page);		 xmlhttp.send(null);		 //Stop any link loading normaly		 return false;}</script>

Page Loading Script. (new Question)

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived