Menu
I am replacing the html on my page when I return dynamically generated html from a REST method called via Ajax like so:
[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(); // This could be called from any page to reuse the same "header"
string bodyBeginningHtml = GetBodyBeginHTML();
string top10ItemsPurchasedHtml = GetTop10ItemsPurchasedHTML();
string pricingExceptionsHtml = GetPriceComplianceHTML();
string forecastedSpendHtml = GetForecastedSpendHTML();
string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
string endingHtml = GetEndingHTML();
String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}{6}",
beginningHtml,
bodyBeginningHtml,
top10ItemsPurchasedHtml,
pricingExceptionsHtml,
forecastedSpendHtml,
deliveryPerformanceHtml,
endingHtml);
return new HttpResponseMessage()
{
Content = new StringContent(
HtmlToDisplay,
Encoding.UTF8,
"text/html"
)
};
}
It is called from within the ready function (when a button is clicked) like so:
$(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");
}
});
});
. . .
The string named "HtmlToDisplay" ("returneddata" in the Ajax call) begins like so:
<!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, it does not begin with a spurious/superfluous "body" tag, but when I look at the page source via F12 in Chrome Dev Tools, the first thing (above "<!DOCTYPE html>" and the rest) is "<body>"
Why is <body> there?
In the console there in Chrome Dev Tools, there is an err msg "Uncaught SyntaxError: Unexpected token var"
When I 2-click that, it takes me to the "<body>" tag.
So not only do I wonder why "<body>" is there, but also why Chrome Dev Tools apparently thinks it's a token named "var"
I have painstakingly compared the contents of "HtmlToDisplay" with the html page source prior to the attempt to replace the original html, and see no significant differences (just escape ("\") symbols for strings, and such).
Why might it be that Chrome slaps a <body> tag at the top of my HTML, and why does it take me there when 2-clicking the "Uncaught SyntaxError: Unexpected token var" console err msg?
Weird as it is, or seems, at least, I don't think the superfluous/spurious <body> tag is really the problem, because for some reason it is on the unmodified page, too - before I even click the button to replace the html, the page (View page source) begins:
<body>
<!DOCTYPE html>
<html>
<head>
This superfluous/spurious "<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 both (opening and closing) <body> tags, the mystery was resolved - they no longer appear in the html.
I still have the same basic problem, though; it's just that the err msg in the console now goes to an empty line above "<!DOCTYPE html>" when 2-clicked.
Why does the html start with an empty line, and is this potentially problematic?
The initial blank line of row 1 of the doc appears both in View page source and in Chrome Dev Tools.
290
Looking at the error message Uncaught SyntaxError: Unexpected token var I don't think it has anything to do with HTML, but instead its something about JS code that's embedded in your HTML.
Are you missing a semicolon / bracket / end of statement before declaring the next var? I'll suggest that you copy the complete returneddata to your favorite editor and search for all vars to see if there is any issue on previous line.
199
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
