Jump to content

elements being "deleted" on load


dzhax

Recommended Posts

Hello again, I am having an issue with loading another .html into a page via ajax.the page itself is loading but something in my js code is making a portion of the .html im loading in not show. In the following JS code is the issue, because if I leave this main.js script out of the page it loads fine.

var debug = false; $('html body').ready(function(){var getData = window.location.search.replace( "?", "" );if(getData){if(debug)alert(getData);  var getParams = getData.split('&'),i;  for(i in getParams){  var indvParam = getParams[i].split('='),ii;  switch(indvParam[0]){  case 'page':   loadPage(indvParam[1]);  break;  default:  alert('Fatal Error: Unknown Get Data "'+indvParam[0]+'='+indvParam[1]+'". Please contact the administrator and provide the code: ERR-2');  break;  }  }  } else {  loadPage('home');  }}); /*// loadPage() Documentation// ------------------------// page://   The page name your wish to load without the .html//   These pages are located at /page directory.//   ie. loadPage('home')//	 This will load page/home.html to the page replacing anything within the <body></body> tags.*/function loadPage(page){$.get("page/"+page+".html", function() {   if(debug)alert("$.get:success");})   .done(function(data) {	 document.body.innerHTML = data;   })   .fail(function() {   document.body.innerHTML = page+" has failed to load. Please contact the administrator and provide the code: ERR-1_"+page;   });}

here is the full page:

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>GI.Board</title><link rel="stylesheet" type="text/css" href="lib/css/main.css" media="all"><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript" src="lib/js/main.js"></script></head><body> <link rel="stylesheet" type="text/css" href="lib/css/boxSlider.css" media="all"><link rel="stylesheet" type="text/css" href="lib/css/home.css" media="all"><script type="text/javascript" src="lib/js/home.js"></script><div id="maincontent"><div id="header"><div><img src="lib/img/logo.png" alt=""></div></div><div id="media"><div class="transistor"><span class="pixelSize">30</span><span class="threshold">0.9</span><span class="speed">0.06</span><span class="time">2000</span><span class="opacitySpeed">0</span><span class="fadeTimeout">60</span><span class="bannerOffset">0</span><span class="bannerOpacity">1</span><img src="lib/img/1.png" alt="Integrated tools offer WYSIWYG editing"><img src="lib/img/2.png" alt="Most software is complicated, not ours."><img src="lib/img/3.png" alt="Don't think because you know more than the average user that you can't take advantage of our software"></div><div class="navigation"></div></div><div id="content"><script type="text/javascript">isAcceptingNewWork();</script><div><h2>Welcome</h2><p>GI.Board is a CMS (Content Management System) written from scratch by Garrett Innovations. We strive to make self-service content for our customers so you don't have to wait for content changes to be updated. You can simply log into your site and make changes on the fly. Making all aspects of the software as intuitive as possible will help users understand how to do something without having to learn how to code.</p><p>Our WYSIWYG (What you see is what you get) HTML editors assist you in making professional looking websites with little to no knowledge. However, we do not limit our more experienced users by only offering these easy-to-use solutions. We still offer the more advanced, raw HTML editors aswell.</p><h2>Other Services</h2><p>Don't have time to build a site from scratch? We understand! This is why we offer many other services to aid you in making your website. Wether it is pre-built templates, artwork creation, or a fully-custom website. We can meet your needs! We can even host the website for you, all you would need to do is purchase a domain name from your favorite registrar and point it at our servers.</p><h2>Trust</h2><p>We stand behind our products 100%. In fact this website is running on GI.Board! There is nothing more that demonstrates a companies trust in their product than using it themselves as their main presence in the market.</p></div></div><div id="footer"><div class="creator">Powered By: <img src="lib/img/giboard.png" alt="Creator Badge" title="Website Developed By Garrett Innovations" onclick="goto('http://www.garrett-innovations.com')"></div><div id="copyright" class="copyright">	 © 2004-2013 Garrett Innovations. All Rights Reserved.	 </div>	 <div id="isonline" class="isonline">	 </div></div>		 <script type="text/javascript" src="lib/js/boxSlider.js"></script>	 </div></body></html>

The part that is deleting is:

 <div class="transistor"><span class="pixelSize">30</span><span class="threshold">0.9</span><span class="speed">0.06</span><span class="time">2000</span><span class="opacitySpeed">0</span><span class="fadeTimeout">60</span><span class="bannerOffset">0</span><span class="bannerOpacity">1</span><img src="lib/img/1.png" alt="Integrated tools offer WYSIWYG editing"><img src="lib/img/2.png" alt="Most software is complicated, not ours."><img src="lib/img/3.png" alt="Don't think because you know more than the average user that you can't take advantage of our software"></div><div class="navigation"></div>

Also the part that loads the <script type="text/javascript">isAcceptingNewWork();</script> is not showing up either. The live version of above code: www.garrett-innovations.com/giboard The working hardcoded site with working JS: www.garrett-innovations.com The reason some of the css and js files load in the body is because anything within the body tags are being loaded in via ajax.

Edited by dzhax
Link to comment
Share on other sites

This line is deleting absolutely everything that's in the <body> element before adding something new:

document.body.innerHTML = data; 

Another problem I find is that you're (probably) loading an entire HTML document with <!DOCTYPE>, <html>, <head> and <body> tags inside your <body> element, which is a malformed DOM structure. I cannot predict what the browser would do while trying to render it.

Link to comment
Share on other sites

This line is deleting absolutely everything that's in the <body> element before adding something new: document.body.innerHTML = data;
yea the above "full source" was pulled from chrome after the page loaded. so the stuff thats in the body right now was loaded from /page/home.html as for the <!DOCTYPE>, <html>, <head> and <body> tags, the only thing from the home.html that is being pulled is what is in the body tag. thats why the javascript and css link is where it is. I will try removing that stuff from the page to see if it renders any better. Its just weird that leaving out main.js and the page loads just fine. EDIT: the home.html does not have any of the above tags. here is the source
  <link rel="stylesheet" type="text/css" href="lib/css/boxSlider.css" media="all" />  <link rel="stylesheet" type="text/css" href="lib/css/home.css" media="all" />  <script type="text/javascript" src="lib/js/home.js"></script>  <div id="maincontent">   <div id="header">    <div>	 <img src="lib/img/logo.png" alt=""/>    </div>   </div>   <div id="media">    <div class="transistor">	 <span class="pixelSize">30</span>	 <span class="threshold">0.9</span>	 <span class="speed">0.06</span>	 <span class="time">2000</span>	 <span class="opacitySpeed">0</span>	 <span class="fadeTimeout">60</span>	 <span class="bannerOffset">0</span>	 <span class="bannerOpacity">1</span>	 <img src="lib/img/1.png" alt="Integrated tools offer WYSIWYG editing" />	 <img src="lib/img/2.png" alt="Most software is complicated, not ours." />	 <img src="lib/img/3.png" alt="Don't think because you know more than the average user that you can't take advantage of our software" />    </div>    <div class="navigation"></div>   </div>   <div id="content">    <script type="text/javascript">	 isAcceptingNewWork();    </script>    <div>	 <h2>Welcome</h2>	 <p>	  GI.Board is a CMS (Content Management System) written from scratch by Garrett Innovations. We strive to make self-service content for our customers so you don't have to wait for content changes to be updated. You can simply log into your site and make changes on the fly. Making all aspects of the software as intuitive as possible will help users understand how to do something without having to learn how to code.	 </p>	 <p>	  Our WYSIWYG (What you see is what you get) HTML editors assist you in making professional looking websites with little to no knowledge. However, we do not limit our more experienced users by only offering these easy-to-use solutions. We still offer the more advanced, raw HTML editors aswell.	 </p>	 <h2>Other Services</h2>	 <p>	  Don't have time to build a site from scratch? We understand! This is why we offer many other services to aid you in making your website. Wether it is pre-built templates, artwork creation, or a fully-custom website. We can meet your needs! We can even host the website for you, all you would need to do is purchase a domain name from your favorite registrar and point it at our servers.	 </p>	 <h2>Trust</h2>	 <p>	  We stand behind our products 100%. In fact this website is running on GI.Board! There is nothing more that demonstrates a companies trust in their product than using it themselves as their main presence in the market.	 </p>    </div>   </div>   <div id="footer">   <div class="creator">    Powered By: <img src="lib/img/giboard.png" alt="Creator Badge" title="Website Developed By Garrett Innovations" onclick="goto('http://www.garrett-innovations.com')" />   </div>   <div id="copyright" class="copyright">	   © 2004-2013 Garrett Innovations. All Rights Reserved.	  </div>	  <div id="isonline" class="isonline">	  </div>  </div>	    <script type="text/javascript" src="lib/js/boxSlider.js"></script>
Edited by dzhax
Link to comment
Share on other sites

What you're saying is the .transistor div doesn't show up? This ruleset in boxSlider.css does that. When I use the Inspect Element tool to turn off the display rule, all the contents of that div are displayed. Or do I misunderstand something?

.transistor{	margin:auto;	background:#eee;	display: none;}

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

Also, trying to insert a script into innerHTML doesn't work. I think it used to in the old days, and this might be a security measure to prevent code injection. Since you're using it anyway, jQuery has a technique for inserting scripts dynamically. Basically, it runs the script through eval(), which you could also do. Like a normal .js file, you can't have script tags in an external script you load this way.

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

EDIT:I ended up using the following code. for some reason the $.getScript was not loading the boxSlider.js all the way. Bascially the slideshow animation was not happening. So I search for adding css dynamically and modified the sample code to load a script not link a css script and it worked. Here it is:

 var findScriptStart = data.split('<script type="text/javascript" src="'),i;for(i in findScriptStart){	 if(i != 0)var findScriptEnd = findScriptStart[i].split('"></script>'),ii;	 for(ii in findScriptEnd){		  if(debug)console.log("Loading following JS: "+findScriptEnd[0]);		  var scriptURL = findScriptEnd[0];		  //$.getScript(scriptURL, function(data2, textStatus, jqxhr) {});		  $('<script type="text/javascript" src="'+scriptURL+'" ></script>').appendTo("head");	 }}$("body").html(data);

the only issue im having now is something with this code is not 100%. Its loading the scripts in the the <head> fine but its adding it twice. also I tried using the following code to remove the scripts from the data before it gets innerHTML'd to the page:

data = data.replace('<script type="text/javascript" src="'+scriptURL+'" ></script>','');

but it doesn't work.

Edited by dzhax
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
×
×
  • Create New...