Jump to content

.innerHTML not printing in Firefox

dzhax

By dzhax
in JavaScript

 Share

Recommended Posts

dzhax Member

dzhax

Posted
Posted (edited)

Everything is working fine in Chrome and IE but the innerHTML does not print in Firefox. I turned on firebug and no errors in console. So confusing...I know for a fact the JS for creating <div id="isAcceptingNewWork"></div> is being created because i have css that shows either a green or red background and it is showing up. But the text is missing. I already tried using innerText also with no luck. I have the following JS

 function isAcceptingNewWork(){	 $.get("lib/php/isAcceptingNewWork.php")		  .done(function(data) {			   if(data == 'yes'){					newDiv('isAcceptingNewWork','greenBanner');					document.getElementById('isAcceptingNewWork').innerHTML = "We are currently accepting new work. Feel free to contact us for a consultation!";			   } else {					newDiv('isAcceptingNewWork', 'redBanner');					document.getElementById('isAcceptingNewWork').innerHTML = "We are not accepting any new work proposals at this time. We appologize for the inconvenience.";			   }		  }	 );} function newDiv(divID, divClass){	 var newDiv = document.createElement("div");	 if(divID != ""){		  newDiv.setAttribute("id", divID);	 } else {		  alert('Fatal Error: A request to create a DIV was received, however no id was given. DIV will not be created without setting a id. newDiv([id],[class]);');	 }	 newDiv.setAttribute("class", divClass);	 document.getElementById('content').insert	 if (document.getElementById('content').firstChild){		  document.getElementById('content').insertBefore(newDiv, document.getElementById('content').firstChild);	 } else {		  document.getElementById('content').appendChild(newDiv);	 }}

and the following HTML:

 <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />		  <link rel="shortcut icon" href="lib/img/favicon.png" />		  <title>GI.Board</title>		  <link rel="stylesheet" type="text/css" href="lib/css/main.css" media="all" />		  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>		  <script type="text/javascript" src="lib/js/main.js"></script>	 </head>	 <body>		  <div id="maincontent">			   <div id="header">					<div>						 <img src="lib/img/logo.png" alt=""/>					</div>			   </div>			   <div id="scrolling">					<img src="lib/img/1.png" alt="Say Goodbye To Hardcoding" />			   </div>			   <div id="content">					<script type="text/javascript">						 isAcceptingNewWork();					</script>			   </div>		  </div>	 </body></html>

Edited by dzhax
Link to comment
Share on other sites
Don E Invested Member

Don E

Posted
Posted

Don't know if this could be the problem... but try renaming the created div to something else incase there is a confusion between that var and the function name newDiv. Also not sure if this line is intended: document.getElementById('content').insert ? Not saying that could be the problem, just noticed it.

  • Like 1
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Well, aside from the error that was pointed out previously, there might also be a problem if firstChild() refers to a text node in this line:

document.getElementById('content').firstChild

To be sure that the newDiv() function is working, check that document.getElementById('isAcceptingNewWork') actually exists. If the element failed to be appended to the document then getElementById() cannot reference it. Another problem is probably here:

$.get("lib/php/isAcceptingNewWork.php")                  .done(function(data) {

Putting a line break and all those spaces is probably going to consider .done to be a different line of code which is not associated to the previous one. Generally, in Javascript, a line break is equivalent to a semi-colon ( ; )

  • Like 1
Link to comment
Share on other sites
dzhax Member

dzhax

Posted
  • Author
Posted

I commented out the document.getElementById('content').insert and changed the function to createDiv() instead of newDiv(). Still not working on my end. @ingolme: #isAcceptingNewWork does exist otherwise it would not show on the screen empty without text. If it wasnt showing I wouldnt see the background color of the div, correct? as for the linebreaks not sure what you mean by that. Care to elaborate? Thanks everyone for your help so far!

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

OK, to debug this, you'll have to go to this part of the code and see if it's working properly:

if(data == 'yes'){    newDiv('isAcceptingNewWork','greenBanner');    // Check that this element is accessible    alert(document.getElementById('isAcceptingNewWork'));    document.getElementById('isAcceptingNewWork').innerHTML = "We are currently accepting new work. Feel free to contact us for a consultation!";    // Check that the innerHTML was set    alert(document.getElementById('isAcceptingNewWork').innerHTML);

  • Like 1
Link to comment
Share on other sites
dzhax Member

dzhax

Posted
  • Author
Posted

Super weird in Firefox and Chrome the alerts are not popping up at all. But still it works fine in chrome and not firefox. The updated code as it is right now.

function isAcceptingNewWork(){$.get("lib/php/isAcceptingNewWork.php")  .done(function(data) {   if(data == 'yes'){    createDiv('isAcceptingNewWork','greenBanner');    alert(document.getElementById('isAcceptingNewWork'));    document.getElementById('isAcceptingNewWork').innerHTML = "We are currently accepting new work. Feel free to contact us for a consultation!";    alert(document.getElementById('isAcceptingNewWork').innerHTML);   } else {    createDiv('isAcceptingNewWork', 'redBanner');    alert(document.getElementById('isAcceptingNewWork'));       document.getElementById('isAcceptingNewWork').innerHTML = "We are not accepting any new work proposals at this time. We appologize for the inconvenience.";    alert(document.getElementById('isAcceptingNewWork').innerHTML);   }  });}function createDiv(divID, divClass){var newDiv = document.createElement("div");if(divID != ""){	 newDiv.setAttribute("id", divID);    } else {	 alert('Fatal Error: A request to create a DIV was received, however no id was given. DIV will not be created without setting a id. newDiv([id],[class]);');    }    newDiv.setAttribute("class", divClass);    //document.getElementById('content').insert    if (document.getElementById('content').firstChild){	  document.getElementById('content').insertBefore(newDiv, document.getElementById('content').firstChild);    } else {	  document.getElementById('content').appendChild(newDiv);    }}

The live page: www.garrett-innovations.com

Link to comment
Share on other sites
dzhax Member

dzhax

Posted
  • Author
Posted

wow i feel real stupid now... I was editing the wrong JS file. I forgot that I relocated the site to another folder and I was updating the old source not the new one. It is working now. Thanks for everyone's help.

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
Go to topic listing
×
×
  • Create New...