dzhax Posted April 4, 2013 Share Posted April 4, 2013 (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 April 4, 2013 by dzhax Link to comment Share on other sites More sharing options...
jeffman Posted April 4, 2013 Share Posted April 4, 2013 I tried a simplified version of your code in FF 19 for Mac and it works just fine. Link to comment Share on other sites More sharing options...
Don E Posted April 5, 2013 Share Posted April 5, 2013 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. 1 Link to comment Share on other sites More sharing options...
Ingolme Posted April 5, 2013 Share Posted April 5, 2013 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 ( ; ) 1 Link to comment Share on other sites More sharing options...
dzhax Posted April 5, 2013 Author Share Posted April 5, 2013 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 More sharing options...
Ingolme Posted April 5, 2013 Share Posted April 5, 2013 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); 1 Link to comment Share on other sites More sharing options...
dzhax Posted April 5, 2013 Author Share Posted April 5, 2013 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 More sharing options...
Ingolme Posted April 5, 2013 Share Posted April 5, 2013 Your current website is trying to use innerText rather than innerHTML Link to comment Share on other sites More sharing options...
dzhax Posted April 5, 2013 Author Share Posted April 5, 2013 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now