After making the suggested changes, it does still appear that the JavaScript code is not compatible with Firefox 19.0.2. I’ll go look for an alternative method to building the list in case you don’t know of another way. 
I managed to find out what the problem is - Firefox apparently doesn’t support the innerText method, it uses the textContent method instead, so you need to modify the code like this:
if (item.textContent){
item.textContent = e;
}else{
item.innerText = e;
}
They say you learn something new every day, and that was certainly a new one on me!
It’s not working right now. Have I inserted it incorrectly?
function testSecondResults(data){
if (data['validation'] == "pass"){
$("#submissionform").css("display", "none");
$("#person").append(data['name']);
$("#email").append(data['email']);
$("#successfulsubmit").css("display", "block");
$("#blackoverlay, #successfulsubmit").delay(5600).fadeOut(800);
setTimeout(function(){
$(".exit").delay(2800).append("Click to Exit");
$("#blackoverlay, #successfulsubmit").click(function(e){
$("#blackoverlay, #successfulsubmit").remove();
});
}, 2800);
$("#emailbox input").each(function(){
$(this).prop("disabled", "disabled");
});
$("#emailbox :submit").css("width", "60px").val('Thanks!');
$("#go").css("width", "108px");
} else {
$("#errormessage").css("display", "block");
$.each(data['errors'], function (i, e) {
var item = document.createElement('li');
item.innerText = e;
fragment.appendChild(item);
});
$("#errormessage ul").empty().append(fragment.childNodes);
}
}
<div id="errormessage">
<p>The following errors occurred with your submission:</p>
<ul>
</ul>
</div>
Sorry, I guess I could have explained a little better. The testSecondResults function should now look like this:
function testSecondResults(data){
if (data['validation'] == "pass"){
// Code omitted
} else {
$("#errormessage").css("display", "block");
var fragment = document.createDocumentFragment();
$.each(data['errors'], function (i, e) {
var item = document.createElement('li');
if (item.textContent){
item.textContent = e;
}else{
item.innerText = e;
}
fragment.appendChild(item);
});
$("#errormessage ul").empty().append(fragment.childNodes);
}
}
I think it might be helpful to explain exactly what is happening in the else block:
- The first line is your original code, which unhides the #errormessage container.
- Next, we create a document fragment, which is like creating a new document in memory which is detached from page currently loaded in the browser (I’ll explain why below).
- We then call jQuery’s $.each function to loop over our array of error messages. For each message, we create a new li element, and we set it’s text content to the current error. To do this, we check if the element has the textContent property and if not we default to setting the innerText property instead. This should ensure the code also works on FF.
- Then the new element is appended to the fragment.
- When the loop is complete, we select the #errormessage ul, empty it, and append the child nodes (i.e. all the li’s we just created) to it.
The reason for creating a document fragment and appending our new elements to that, rather than directly to the document, is for performance. Each time we dynamically add elements to a page, the browser has to re-render it, which when adding many elements with a loop can be slow (especially with larger numbers of elements). By attaching the elements to a fragment, we’re only forcing the browser to re-render once when we insert the fragment itself.
Are you seeing this produce a list on Firefox? I see it works on all other browsers except FF.
Sorry Tyler, I made a mistake, the IF condition is wrong. Instead of:
if (item.textContent) {
it should be:
if (typeof item.textContent === "string") {
that’ll teach me to post without testing in FF first!
I wonder why Firefox doesn’t work well with the other code.
It may also be fair to say that I’ve learned a boat load more than you have in this thread!
I would have responded sooner, but I was looking up what a lot of this logic and methods mean and what purpose they serve. I’m still wondering what the document fragment does.
Thank you so much!
-Tyler
This may be strictly a CSS issue, but I want to style the lists. I don’t know if JavaScript can disrupt CSS styles, but I seem to think this is strictly CSS. I guess I should go post over there if I still can’t figure this out.
The list doesn’t seem to be taking on a list style nor am I seeing the font size change.
<div id="errormessage">
<p>The following errors occurred with your submission:</p>
<ul>
</ul>
</div>
#errormessage ul li{
list-style:disc;
font-size:.8em;
}
I also tried to target just by using #errormessage ul.
Try adding some left padding to the ul - at the moment it doesn’t have any, so the bulletpoints aren’t visible:
#errormessage ul {
padding-left: 10px;
}
Right again! That’s what the issue was.