Menu
I have a page (which is unfortunately behind a login system), which basically has a nav bar down the left of a list of articles, and when you click on an article, it loads the content from a .inc file stored on the server, using a provided file path.
This works fine on Google Chrome.
However, on Firefox, when the page loads, I get this weird javascript error:
"junk after document element" - When I click the error, it takes me to line 2 of the content from the first article being loaded.
Let me show you some code.
This is the last JS function which is run when the page has finished loading, and it's purpose is to load the initial article.
function initialise_family_center_page()
{
if (current_element_id == "" || current_element_id == "family_center_general_info") //If this is the first article to be loaded
{
//Get the file path of the inc file to load
var content_directory = file path....;
jQuery.get(content_directory, function(data)
{
$('#family_center_main_content').html(data); //Load the content
});
}
}
The content in the .inc file being loaded is as follows:
<p>Some text</p>
<p>Some text</p>
It's worth mentioning at this point, that in Chrome and Firefox, the content loads. However in firefox, because of the JS error, you can no longer use the rest of the page because the JS has stopped working.
Interesting point, which I discovered from googling the problem, is if I change the content of the file to:
<html>
<p>Some Text</p>
<p>Some Text</p>
</html>
Then the error does not appear and the page works (until you load the next content file without the tags.
However, this is not a suitable fix because there are thousands and thousands of files.
Can anyone help?
524
I had this same problem. I had created a base page where clicking on a nav element triggered an $.ajax() fetch of an inc file that would populate the main div on the page - as follows:
$(document).ready(function(){
// Set trigger and container variables
var trigger = $('nav.primary ul li a'),
container = $('#se-main');
trigger.on('click', function(){
// Set click target from data attribute
target = this.target;
$.ajax({
url:'../inc/'+target + '.inc',
success: function(data){
// Load target page into container
container.html(data);
},
dataType: "text" // this seems to be ignored in Firefox
});
// snip other stuff
});
The Firefox console always logged the 'junk after document element' error unless I edited the INC files and wrapped the text in <html></html>. (The page content still updated, though - so the user wasn't held up by it).
To fix this: add inc to the text/html line in the apache mime.types config file.
Find the line with
text/html html htm
change to
text/html html htm inc
Then restart apache.
That worked for me.
Default file locations:
Linux: /etc/mime.types;
WAMP: [wampdir]\bin\apache\[apacheversion]\conf\mime.types
XAMPP: [xamppdir]\apache\conf\mime.types
Where [wampdir] is wherever you installed WAMP/XAMPP, and [apacheversion] is the version of apache that WAMP is using.
This solution is no use if you don't have access to the mime.types file, or if you're running on shared hosting.
In that case - assuming that you have access to .htaccess - adding the following to .htaccess might work -
AddType text/html .html .htm .inc
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
