document.write() overwriting the document?
The issue is that when you run document.write after the document has loaded, it overwrites the entire document. If it is run before that, it does not overwrite it.
What you want to do is set the innerHtml of a specific element, something like:
document.getElementById("myDiv").innerHTML="Sup";
Javascript document write overwriting page?
Using document.write()
after the page has finished loading implicitly calls document.open()
, which creates a new page. You should generally avoid document.write()
and stick to proper DOM creation techniques, or use jQuery's shorthand creation methods:
jQuery(function($) {
$('<style type="text/css"> .preload img { display: none; } </style>')
.appendTo("head");
$('#body-wrap').preloadThis();
});
I'm assuming you can't edit the HTML or CSS files that are loaded by the page to include this rule? If that's the case, and you want these styles applied before the page finishes loading, take `document.write()` out of the jQuery ready handler:
// write() before the document finishes loading
document.write('<style type="text/css"> .preload img { display: none; } </style>');
jQuery(function($) {
$('#body-wrap').preloadThis();
});
This will write the <style>
tag immediately after the currently executing <script>
tag. Hopefully, this is in your <head>
element as <style>
is invalid anywhere else, although all browsers should parse it OK either way.
document.Write() overwriting all page content
Basically, innerHTML
is a property not a function,
document.getElementById("audio").innerHTML =
'<EMBED src= "' + soundFile + '" hidden=true autostart=true loop=true>';
In your console, you should see an error like innerHTML is not a function.
Javascript document.write overwriting a php page
You can not use document.write after page load. what it does is opens up a new document and replaces what ever you have there with new content.
In this example there is no need to even use document.write. Just use the script tags. jQuery will handle the script tags for you.
You really should just skip using load and use $.get or $.getJSON and handle the response yourself.
Have the server return a JSON object.
{
raceV : "foo",
clasV : "bar",
outStr : "You have chosen a {1} {2}!"
}
and the JavaScript would be
$.getJSON("statuswindow.php", function(data) {
var outString = data.outStr;
outString = outString.replace("{1}",capitalizeFL(raceV));
outString = outString.replace("{2}",capitalizeFL(clasV));
$("#topMenu").html(outString );
})
BUT the real issue is:
Why are you not doing all of this in PHP. There is no reason for JavaScript to do it.
No JavaScript needed!
<?php
$raceV = ucfirst($player->race);
$clasV = ucfirst($player->clas);
echo "You have chosen a " . $raceV. " " .$clasV ."!";
?>
and the jQuery load would be the same
$("#topMenu").load("statuswindow.php");
Related Topics
Get Base64 Encode File-Data from Input Form
Smooth Scroll Without the Use of Jquery
Jquery Event Won't Fire After Ajax Call
Attach a Body Onload Event With Js
Only Detect Click Event on Pseudo-Element
Select All Elements That Have a Specific Css, Using Jquery
How to Achieve Equal Height Divs (Positioned Side by Side) With HTML/CSS
JavaScript File Per View in Rails
How to Redirect to Another Webpage
Getting Value of HTML Checkbox from Onclick/Onchange Events
How to Detect "Shift+Enter" and Generate a New Line in Textarea
JavaScript Get Element by Name
How to Display Image With JavaScript
How to Change the Background Color With JavaScript
Ios 8 Removed "Minimal-Ui" Viewport Property, Are There Other "Soft Fullscreen" Solutions
Does .Css() Automatically Add Vendor Prefixes
Find the Longest Common Starting Substring in a Set of Strings