I replace html on my page when I return dynamically generated html from a REST method called via Ajax, for example:
[HttpGet] [Route("{unit}/{begdate}/{enddate}", Name = "QuadrantData")] public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate) { _unit = unit; _beginDate = begdate; _endDate = enddate; string beginningHtml = GetBeginningHTML();
It is called from the ready function (when the button is pressed):
$(document).ready(function () { $("body").on("click", "#btnGetData", function () { var _begdate = $("#datepickerFrom").val(); var _enddate = $("#datepickerTo").val(); var _unit = $("#unitName").text(); $("#newhourglass").removeClass("hide"); $.ajax({ type: 'GET', url: '@Url.RouteUrl(routeName: "QuadrantData", routeValues new { httpRoute = true, unit = "un", begdate = "bd", enddate = "ed" })' .replace("un", encodeURIComponent(_unit)) .replace("bd", encodeURIComponent(_begdate)) .replace("ed", encodeURIComponent(_enddate)), contentType: 'text/plain', cache: false, xhrFields: { withCredentials: false }, success: function (returneddata) { $("body").html(returneddata); $("#newhourglass").addClass("hide"); }, error: function () { console.log('error in ajax call to QuadrantData'); $("#newhourglass").addClass("hide"); } }); }); . . .
A line named "HtmlToDisplay" ("returndata" in an Ajax call) begins as follows:
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>eServices Reporting - Customer Dashboard</title><link rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\"><script src= . . .
As you can see, this does not start with a false / excess body tag, but when I look at the page source via F12 in Chrome Dev Tools, the first (above " <!DOCTYPE html> " and the rest) is " <body> "
Why is <body> there?
There is an msg error message "Uncaught SyntaxError: Unexpected token var" on the console in Chrome Dev Tools
When I make a 2-click, this will lead me to the <<24> tag.
Therefore, I am not only surprised why " <body> " is, but also why Chrome Dev Tools, apparently, considers it a token with the name "var"
I carefully compared the contents of "HtmlToDisplay" with the source of the html page before trying to replace the original html and I do not see any significant differences (just escape ("\") characters for strings, etc.)
Why can it happen that Chrome marks the <body> at the top of my HTML code and why does it take me there when 2-clicking the console "Uncaught SyntaxError: Unexpected token var" err msg?
UPDATE
Oddly enough, or it seems, at least I don’t think that the extra / false <body> really a problem, because for some reason it is also on the unchanged page - before I even clicked to replace the html , the page starts (View page source):
<body> <!DOCTYPE html> <html> <head>
UPDATE 2
This extra / false <body> tag apparently came from _Layout.cshtml, which was:
<body> @RenderBody() <hr /> <footer> <p> © @DateTime.Now.Year - PRO*ACT USA</p> </footer> </body>
When I removed the tags (opening and closing) <body> , the secret was solved - they no longer appear in html.
I still have the same underlying problem; it's just that the msg error in the console now goes to the empty line above " <!DOCTYPE html> " with 2 clicks.
Why does html start with an empty line and is it potentially problematic?
The original empty line of line 1 of the document appears both in the source of the view page and in Chrome Dev tools.