Javascript document.write overwriting a php page - php

Question

I have this Javascript function:
function capitalizeFL(string) { //takes a string, returns it with first letter capitalized
return string.charAt(0).toUpperCase() + string.slice(1);
}
A file called statuswindow.php, which includes the following:
<?php
$raceV = "<script>document.write(capitalizeFL(\"".$player->race."\"));</script>";
$clasV = "<script>document.write(capitalizeFL(\"".$player->clas."\"));</script>";
echo "You have chosen a " . $raceV. " " .$clasV ."!";
?>
Now the main file, which uses ajax to update and show the player's class and race ($clas, $race), after capitalizing their first letters using capitalizeFL:
Main file includes the following:
$("button").click(function() {
$("#topMenu").load("statuswindow.php");
});
What I would LIKE to happen, is that the html from statuswindow.php will be properly displayed in the main window's #topMenu div.
I'm assuming the problem is due to document.write overwriting the whole page. The question is, how can I do the following, without using document.write?

Answer 1

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");

Answer 2

echo "You have chosen a ".ucFirst($player->race)...
Would make more sense
When you use $.load you do not really want any scripts in the page you load and in this case there is absolutely zero reason to have javascript uppercase the first letter when php has a built-in function to do it

Answer 3

I'm assuming the problem is due to document.write overwriting the whole page. The question is, how can I do the following, without using document.write?
Because is exactly what document.write does.
Try with innerHTML:
For example, if you want to add content to #topMenu, just do:
document.getElementById('topMenu').innerHTML += capitalizeFL(".$player->race.");