Here is one of the routes in my ESP32 app that is for ESPAsyncWebServer to interpret:
// Route to delete the data log file
server.on("/deletedata", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(SPIFFS, "/index.html", "text/html", false, processor);
DeleteFile(data_logfile);
});
Having had examples to inform me, my initial set of routes is working fine. But I am expanding with new pages and want to more fully understand what the method params are actually doing. For example, what is the full signature of request->send()? In particular, the second parameter ("/index.html") ? This is the origin file of the request as it turns out, but I don't understand why that is needed. Also, what is "processor"? The other params I understand pretty well. "DeleteFile(data_logfile);" calls a method in the ESP32 code that carries out the action indicated by the HTTP /deletedata request.
ESPAsyncWebServer works great but isn't that well-documented (that I can find).
request-send() accepts a file system type, a route to a page in the file system, a content type for the handled page, a flag indicating that the client should download that file or not and a processor function which will be called as the page gets send out to the client.
The processor function will be called as soon as the send() function finds a pair of two signal characters which is default to "%" in the asyncWebserver's case.
It is used for building a dynamic webpage with templates. If you have let's say an index.html file with templates, you can replace your template parameters with values using the Processor function.
Here is an example:
Index.html Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example page</title>
</head>
<body>
<h1> %variableFromESP% </h1>
</body>
</html>
ESP endpoint:
/*
This processor function will be called if the server finds
something between two controll characters.
In this case: %variableFromESP%.
This processor function is used to replace this character
with whatever value.
*/
String processor( const String& var ){
if( var == "variableFromESP" ){
return "Hello World";
}
return "";
}
// Using LittleFs as a file system, a testPage.html route,text/html type
// do not download this file, and passing the processor function.
server.on("/testPage", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFs, "/testPage.html", "text/html", false, processor);
});
My API generates dynamic HTML document and dumps it into a popup window like so:
var popup = window.open('', "_blank", 'toolbar=0,location=0,menubar=1,scrollbars=1');
popup.document.write(result);
After the document is reviewed by a user, they can print it calling
window.print();
Chrome handles it without any problems, but Firefox shows a Printer error:
"Cannot print this document yet, it is still being loaded"
Printer window opens only if I hit Ctrl+R.
It appears that $(document).ready() never happens in firefox and it keeps waiting for something to load.
Status bar in popup says Read fonts.gstatic.com
Here's a brief content of a document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/css?family=Orbitron|Jura|Prompt" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title>Invoice #15001</title>
<style>
...
</style>
</head>
<body>
<div id="invoice_body" >
...
</div><!-- Invoice body -->
</body>
</html>
I have a feeling it has something to do with Google fonts. Any help is appreciated
When you pass "" as the URL to window.open, Firefox loads 'about:blank' at which point script security is likely preventing you from pulling in external resources via http or https ...
I am able to reproduce your problem and have it popup with the same error when I try to print-- I was able to get it working by using a data url when calling window.open ...
Based on your example, result is a string containing the HTML for the popup, so you would call window.open like this, and no longer use document.write for anything:
var popup = window.open("data:text/html;charset=utf-8,"+result, "printPopup", "toolbar=0,location=0,menubar=0,scrollbars=1");
I tested this with result being a string containing:
<html><head>
<link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Tangerine">
<style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style>
<title>Test</title></head>
<body>
<div>Testing testing</div>
<div>Print</div>
</body>
</html>
And clicking the print link worked as expected...
I had to go an extra mile, but:
I added server side code that would save a html file and pass a link to that file instead of html content:
ob_start();
include('ezts_invoice_template.php');
$dom = ob_get_clean();
$ezts_file_path = EZTS_PLUGIN_PATH.'kernel/tmp/'.session_id().'_tmp.html';
$ezts_file = fopen($ezts_file_path, 'w+');
$result = fwrite($ezts_file, $dom);
fclose($ezts_file);
print_r('{"result":"success", "file":"'.plugin_dir_url(__FILE__).'tmp/'.session_id().'_tmp.html"}');
in JS I open a popup by a link passed from PHP:
var popup = window.open(result.file, "_blank", 'toolbar=0,location=0,menubar=0,scrollbars=1');
and, finally, in template file I added event listener to request deletion of temporary file when the window is closed
window.addEventListener('beforeunload', function(event) {
window.opener.eztsApiRequest('deleteTempFile',
'',
function(result, status){ console.log(result); });
}, false);
It's not as easy, but it works great.
I try to parse HTML using HtmlAgilityPack using simple doc.load method by passing the URL, but it comes with the following result how can I resolve this issue?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function setCookie(c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";
expires=" + exdate.toGMTString()) + ";path=/"; }
function getHostUri()
{ var loc = document.location; return loc.toString(); }
setCookie('YPF8827340282Jdskjhfiw_928937459182JAX666', '202.142.170.42', 10);
setCookie('DOAReferrer', document.referrer, 10); location.href = getHostUri();
</script>
</head>
<body>
<noscript>This site requires JavaScript and Cookies to be enabled. Please change your browser settings or upgrade your browser.</noscript>
</body></html>
This site requires JavaScript and Cookies to be enabled.
Please change your browser settings or upgrade your
browser.
This Message says it all, the side needs javascript to be loaded, and HtmlAgilityPack is no JavascriptEngine!
The Load Method of the HtmlDocument can not interpret and execute Javascript-Code it´s just a simple "Download"-Function for static HTML-Sites.
What you could try to do is, with Firebug (or something else) check which HttpRequest are made to get the content, and this Requests you have to recreate in C# to get the HTML you want!
Here are some similar Questions:
Running Scripts in HtmlAgilityPack
C# - Get JavaScript variable value using HTMLAgilityPack
Calling javascript function from HtmlAgilityPack
I have a very strange problem. I have migrated my views from Webforms view engine to Razor. I am finding now that when the html for my page is rendered, it doesn't render the DOCTYPE at the top (as it should), but rather renders some javascript script blocks before the DOCTYPE tag. I have no clue what is causing this. The result it that the browser displays the page in Quirks mode. This manifests by my font-size in my tables not conforming to the font-size set for the body tag.
I must also mention that I am using Telerik MVC extensions version 2011Q1.
Below is a portion of the page source from the beginning of the html page to the end of the head tag. Any help on why this is happening will be appreciated.
<script type="text/javascript" src="/asset.axd?id=PQEAAB-LCAAAAAAABADsvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8Uezjx597xd_tPro0Uevp3WxapuPRh-d82dL-uynf9E6r6-3d8f3x7vjn8Z31UePdn7JSL5t8zKvi7fjabVYVEv7_W73-zZ_106qd7bBXrfBRV3M7Lf3zLfS-fgyK4tZ1ua2wX709XxWtMXywra638MimzQtDdG2-PSXfP-XfH_00bTlRu_auz-dXWYNU4EaXNKnezu7uzTwe7v36YMpkerep_fpl48etfU6_yX_TwAAAP__IQbpFT0BAAA%3d"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
if (!jQuery.telerik) jQuery.telerik = {};
jQuery.telerik.cultureInfo={"shortDate":"dd/MM/yyyy","longDate":"dd MMMM yyyy","longTime":"HH:mm:ss","shortTime":"HH:mm","fullDateTime":"dd MMMM yyyy HH:mm:ss","sortableDateTime":"yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss","universalSortableDateTime":"yyyy\u0027-\u0027MM\u0027-\u0027dd HH\u0027:\u0027mm\u0027:\u0027ss\u0027Z\u0027","generalDateShortTime":"dd/MM/yyyy HH:mm","generalDateTime":"dd/MM/yyyy HH:mm:ss","monthDay":"dd MMMM","monthYear":"MMMM yyyy","days":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"abbrDays":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"abbrMonths":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",""],"months":["January","February","March","April","May","June","July","August","September","October","November","December",""],"am":"AM","pm":"PM","dateSeparator":"/","timeSeparator":":","firstDayOfWeek":1,"currencydecimaldigits":2,"currencydecimalseparator":".","currencygroupseparator":",","currencygroupsize":3,"currencynegative":1,"currencypositive":0,"currencysymbol":"£","numericdecimaldigits":2,"numericdecimalseparator":".","numericgroupseparator":",","numericgroupsize":3,"numericnegative":1,"percentdecimaldigits":2,"percentdecimalseparator":".","percentgroupseparator":",","percentgroupsize":3,"percentnegative":0,"percentpositive":0,"percentsymbol":"%"};
jQuery('#CoursesGrid').tGrid({columns:[{"title":"Id","member":"Id","type":"Number","editor":null},{"title":"Course Title:","member":"Title","type":"String","editor":null},{"title":"Completion Category","member":"CompletionCategory","type":"String","editor":null},{"title":"Expiry Months (0 to 100):","member":"ExpiryMonths","type":"Number","editor":null},{"title":"Commands","commands":[{"name":"edit","buttonType":"Image"},{"name":"delete","buttonType":"Image"}]}], plugins:["editing"], editing:{"mode":"InForm","editor":"\r\n\r\n\u003cdiv\u003e\r\n \u003cfieldset class=\"editfieldset\"\u003e\r\n \u003clegend class=\"titlelegend\"\u003eCourse Details\u003c/legend\u003e\r\n \u003col\u003e\r\n \u003cli\u003e\r\n \u003clabel for=\"Title\"\u003eCourse Title:\u003c/label\u003e \r\n \u003cinput id=\"Title\" name=\"Title\" type=\"text\" value=\"\" /\u003e \r\n \u003cspan class=\"field-validation-valid\" id=\"Title_validationMessage\"\u003e\u003c/span\u003e \r\n \u003c/li\u003e\r\n \u003cli\u003e\r\n \u003clabel for=\"Description\"\u003eDescription:\u003c/label\u003e \r\n \u003ctextarea cols=\"20\" id=\"Description\" name=\"Description\" rows=\"2\"\u003e\r\n\u003c/textarea\u003e \r\n \u003cspan class=\"field-validation-valid\" id=\"Description_validationMessage\"\u003e\u003c/span\u003e \r\n \u003c/li\u003e\r\n \u003cli\u003e\r\n \u003clabel for=\"ExpiryMonths\"\u003eExpiry Months (0 to 100):\u003c/label\u003e \r\n \u003cdiv class=\"t-widget t-numerictextbox\"\u003e\u003cinput class=\"t-input\" id=\"ExpiryMonths\" name=\"ExpiryMonths\" style=\"width:100%\" value=\"0\" /\u003e\u003ca class=\"t-link t-icon t-arrow-up\" href=\"#\" tabindex=\"-1\" title=\"Increase value\"\u003eIncrement\u003c/a\u003e\u003ca class=\"t-link t-icon t-arrow-down\" href=\"#\" tabindex=\"-1\" title=\"Decrease value\"\u003eDecrement\u003c/a\u003e\u003c/div\u003e\u003cscript type=\"text/javascript\"\u003e\r\n\tjQuery(\u0027#ExpiryMonths\u0027).tTextBox({val:0, step:1, minValue:-2147483648, maxValue:2147483647, digits:0, groupSize:3, negative:1, text:\u0027Enter value\u0027, type:\u0027numeric\u0027});\r\n\u003c/script\u003e\r\n \r\n \u003cspan class=\"field-validation-valid\" id=\"ExpiryMonths_validationMessage\"\u003e\u003c/span\u003e \r\n \u003c/li\u003e\r\n \u003c/ol\u003e\r\n \u003c/fieldset\u003e\r\n\u003c/div\u003e\r\n","defaultDataItem":{"Id":0,"Title":null,"Description":null,"CompletionCategory":null,"ReminderId":0,"ExpiryMonths":0,"Deleted":false,"ScheduledCourses":[]}}, dataKeys:{"Id":"id"}, validationMetadata:{"Fields":[{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"Course Title is required.","ValidationParameters":{},"ValidationType":"required"}]},{"FieldName":"Description","ReplaceValidationMessageContents":true,"ValidationMessageId":"Description_validationMessage","ValidationRules":[]},{"FieldName":"ExpiryMonths","ReplaceValidationMessageContents":true,"ValidationMessageId":"ExpiryMonths_validationMessage","ValidationRules":[{"ErrorMessage":"The Expiry Months (0 to 100): field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Expiry Months (0 to 100): must be a number.","ValidationParameters":{},"ValidationType":"number"}]}],"FormId":"CoursesGridform"}, pageSize:0, sortMode:'single', ajax:{"selectUrl":"/Course/_IndexAjax","insertUrl":"/Course/_InsertAjax","updateUrl":"/Course/_UpdateAjax","deleteUrl":"/Course/_DeleteAjax"}, localization:{"addNew":"Add new record","delete":"Delete","cancel":"Cancel","update":"Update","insert":"Insert","edit":"Edit","select":"Select","page":"Page ","displayingItems":"Displaying items {0} - {1} of {2}","pageOf":"of {0}","filter":"Filter","filterAnd":"And","filterClear":"Clear Filter","filterDateEq":"Is equal to","filterDateGe":"Is after or equal to","filterDateGt":"Is after","filterDateLe":"Is before or equal to","filterDateLt":"Is before","filterDateNe":"Is not equal to","filterNumberEq":"Is equal to","filterNumberGe":"Is greater than or equal to","filterNumberGt":"Is greater than","filterNumberLe":"Is less than or equal to","filterNumberLt":"Is less than","filterNumberNe":"Is not equal to","filterShowRows":"Show rows with value that","filterStringEndsWith":"Ends with","filterStringEq":"Is equal to","filterStringNe":"Is not equal to","filterStringStartsWith":"Starts with","filterStringSubstringOf":"Contains","groupHint":"Drag a column header and drop it here to group by that column","filterEnumEq":"Is equal to","filterEnumNe":"Is not equal to","deleteConfirmation":"Are you sure you want to delete this record?","filterSelectValue":"-Select value-","filterBoolIsFalse":"is false","filterBoolIsTrue":"is true","noRecords":"No records to display.","cancelChanges":"Cancel changes","saveChanges":"Save changes","refresh":"Refresh","sortedAsc":"sorted ascending","sortedDesc":"sorted descending","unGroup":"ungroup"}, noRecordsTemplate:'No records to display.'});
jQuery('#TabStrip').tTabStrip();});
//]]>
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Vigilaris Solutions</title>
<link rel="stylesheet" href="/Content/Themes/Shared/vway-backend.css" type="text/css" />
<link rel="stylesheet" href="/Content/Themes/Green/branding.css" type="text/css" />
<link rel="stylesheet" href="/Content/Themes/Shared/StatusBar.css.css" type="text/css" />
<link type="text/css" href="/asset.axd?id=lAAAAB-LCAAAAAAABADsvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8Uezjx597xd_tPro0Ucn1bLNl-1Ho4_O-bMlfdbmZV4Xb8fTarGoluNp09DX1UePdn7JKGxwVSxn1VXzwDXZ_SXf_yXfH300bbnVu_aufHNJf-7t7O6Od8f3du_TB1PC4N6n9-mXjx619Tr_Jf9PAAAA__9JtaUdlAAAAA%3d%3d" rel="stylesheet"/>
</head>
Okay. I have resolved the problem. It is, in fact, a Telerik related issue. The issue is as follows:
In my layout view, my migrated razor view engine script registrar code looked as follows:
#{Html.Telerik().ScriptRegistrar()
.Globalization(true)
.DefaultGroup(g => g.Combined(true).Compress(true))
.Render();
}
This is a code block approach and results in the javascript script blocks being rendered right at the beginning of the page source before the DOCTYPE declaration, thus causing the browser to go into quirks mode (uggglllyyy!).
So, I changed the Telerik code in my layout view to the following:
#(Html.Telerik().ScriptRegistrar()
.Globalization(true)
.DefaultGroup(g => g.Combined(true).Compress(true))
)
The script blocks now correctly get rendered at the end of the page source and the browser no longer operates in quirks mode.
I really hope this can help other developers.
This is caused by something writing those scripts directly to the output stream (Response.Write). Razor uses Writer property of ViewContext for output before flushing everything to Response.
i take it you are using the Telerik MVC Components, more specifically the tabs?
check your view templates, specifically _Layout.cshtml and ensure you arent calling the telerik library before your markup.