Jump to content

Page Loading Script. (new Question)


norNerd
 Share

Recommended Posts

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

Edited by norNerd
Link to comment
Share on other sites

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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 = "";
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...