I'm translating an ancient Struts/JSP application to use Spring 5 and Thymeleaf. The original application had a logic:iterate tag over the variable tt for rows in a table, and the cell was displaying a timestamp formatted on the back-end into the user's time zone, with a hover-over for UTC, like this:
<td style="cursor: pointer; cursor: hand"
onmouseover="return escape('<bean:write name="tt" property="ts_UTC" />' + ' UTC')">
<bean:write name="tt" property="ts_User" /></td>
It generates output that looks like this:
<td style="cursor: pointer; cursor: hand"
onmouseover="return escape('04/06/2020 11:14:50 AM' + ' UTC')">
04/06/2020 07:14:50 AM</td>
After a few attempts and reading https://github.com/thymeleaf/thymeleaf/issues/705 and https://github.com/thymeleaf/thymeleaf/issues/707, I translated it to thymeleaf as follows:
<td style="cursor: pointer; cursor: hand"
th:onmouseover="return escape( '[[${tt.ts_UTC}]] UTC');"
th:text="${tt.ts_user}"></td>
The problem is the generated output looks like this:
<td style="cursor: pointer; cursor: hand"
onmouseover="return escape( '"05\/04\/2015 08:05:24 PM" UTC');"
>05/04/2015 04:05:24 PM</td>
I have no idea where the " is coming from, and I really want the ''s to turn back into apostrophes. I'm stumped. How do I do this?
I don't know if this is a full solution - because I don't know how the text ends up being displayed by the mouseover event. But...
I suggest moving the event handler to a separate JavaScript function, to keep things a bit cleaner & more flexible.
Start with this:
<div style="cursor: pointer; cursor: hand"
th:onmouseover="showMouseoverText( /*[[${tt.ts_UTC}]]*/ );"
th:text="${tt.ts_user}">
</div>
What is that /*[[${tt.ts_UTC}]]*/ doing? It uses the escaped form of JavaScript inlining - the double-bracket notation. But it also wraps it in a comment, which makes use of Thymeleaf's JavaScript ntural templating. This ensures there are no syntax errors when processing the template.
Then somewhere in your <head>...</head> section, add this:
<script th:inline="javascript">
function showMouseoverText( ts ) {
console.log(ts + ' UTC');
return escape(ts + ' UTC');
}
</script>
The console line is just there to test. For me, I get my static test data printed as follows:
04/06/2020 11:14:50 AM UTC
I don't know if that final line return escape(ts + ' UTC') will work the way you need. I'm not sure what it does.
What you get in your HTML page will be the following:
The div:
<div style="cursor: pointer; cursor: hand"
onmouseover="showMouseoverText( "04\/06\/2020 11:14:50 AM");">John Doe
</div>
You will see the escaped / characters - and single quotes represented as ". But the JavaScript function should handle these (as shown in the console output above). If not, then at least you can manipulate the data in your function, as needed.
Related
Server: Unix, Client: IE Edge
Part of my code:
%let P_debug_log = %str(<INPUT TYPE='hidden' NAME='_DEBUG' VALUE='LOG'>);
proc stream outfile=_webout quoting=both resetdelim='_do' ASIS;
BEGIN
%if "&_whattodo" ne "print" %then %do;
<script language='JavaScript' type='text/javascript'>
function subForm(f,v) {
if (v !== '') {
$('#'+ f).append('<INPUT TYPE="hidden" NAME="'+ v +'" VALUE="1">');
}
$('#'+f).submit();
}
$(document).ready(function() {
$('#footButtons').append($('.footButton')); /* move all elements with class=footButton to pageFooter */
$('#footMessage').append($('.footMsg'));
$('form.log').append("&P_debug_log.");
});
</script>
%end;
;;;;
Output:
The Problem is, that generated stream Output has linebreaks "somewhere" but not where expected (with Option ASIS it should be formatted like in my code).
This leads to unpredictable JavaScript Errors, e.g. when a linebreak is within a JavaScript string.
It seems as if there is an implicit LRECL 1024. This would be OK if linebreaks would be set as expected.
Any hints?
This is the originally formatted Output (Page Source):
<script language='JavaScript' type='text/javascript'> function subForm(f,v) { if (v !== '') { $('#'+ f).append('<INPUT TYPE="hidden" NAME="'+ v +'" VALUE="1">'); } $('#'+f).submit(); }
$(document).ready(function() { $('#footButtons').append($('.footButton')); $('#footMessage').append($('.footMsg')); $('form.log').append("
<INPUT TYPE=
'hidden
' NAME=
'_DEBUG
' VALUE=
'LOG
'
>"); }); </script>
Not sure if I have an answer, but it looks like the macro quoting is what is causing PROC STREAM to separate out the macro variable into multiple lines.
So if I run this simplified example:
%let P_debug_log = %str(<INPUT TYPE='hidden' NAME='_DEBUG' VALUE='LOG'>);
filename tst temp;
proc stream outfile=tst quoting=both resetdelim='_do' ASIS;
BEGIN
$('form.log').append("&P_debug_log.");
;;;;
Then it generates this file:
$('form.log').append("
<INPUT TYPE='hidden
' NAME='_DEBUG
' VALUE='LOG
'>");
If you remove the %STR() from around the value of the macro variable then it only inserts line breaks before and after the full macro variable reference and not also around the quotes in the macro variable.
$('form.log').append("
<INPUT TYPE='hidden' NAME='_DEBUG' VALUE='LOG'>
");
If you remove the quoting=both option then the line breaks will be outside the quotes, whether or not you use macro quoting.
$('form.log').append(
"<INPUT TYPE='hidden' NAME='_DEBUG' VALUE='LOG'>"
);
First of all, thank you all for your answers.
Robert Penridge was right.
Solution:
If you use PROC STREAM and want to include static code (as in my case: Javascript), then use &STREAMDELIM READFILE instead of %include.
Reason: if there are (valid!) inline comments "//" (comment until next linebreak,) in the included code, it will lead to unpredictable results....
thanks a lot,
dbdb
Simply remove the ASIS option you have added to proc stream.
I'm not sure if this is an undocumented feature but it doesn't appear in the documentation so I'm assuming so.
http://documentation.sas.com/?docsetId=proc&docsetVersion=9.4&docsetTarget=n12zrkr08eiacmn17lcv4fmt79tb.htm&locale=en
Once you remove that the weird line breaks disappear.
Searching around, it appears the ASIS option is something to do with attempting to preserve column alignment.
I am new to MVC and Razor engine. Trying to output the below string using #Html.Raw but the expected result is different.
#Html.Raw(" <span class='label label-warning' style='cursor: pointer' onclick=ChangeRPLocStatus(2,1,'1160001','1160001','X','Test 1')>AABBCC</span>")
Output in Html :
<span class="label label-warning" style="cursor: pointer;" onclick="ChangeRPLocStatus(2,1,'1160001','1160001','X','Test" 1')="">AABBCC</span>
The output is different at "Test 1".
I am expecting to get :
ChangeRPLocStatus(2,1,'1160001','1160001','X',Test 1')
but it become :
ChangeRPLocStatus(2,1,'1160001','1160001','X','Test" 1')=""
I am guessing it is because onclick=ChangeRPLocStatus(2,1,'1160001','1160001','X','Test 1') doesn't have quotes around the js method call. Try this?
onclick=\"ChangeRPLocStatus(2,1,'1160001','1160001','X','Test 1')\"
Also, a little tip, did you get the output from the actual source (Ctrl + U in chrome) or via Dev Tools or Firebug, they can be different an cause confusion.
line breaks or pharagraph not working in textarea output? for example i am using enter for pharagraph in textarea but not working in output? How can i do that?
$("#submit-code").click(function() {
$("div.output").html($(".support-answer-textarea").val());
}).next().click(function () {
$(".support-answer-textarea").val($("div.output").html());
});
.support-answer-textarea{width:100%;min-height:300px;margin:0 0 50px 0;padding:20px 50px;border-top:1px solid #deddd9;border-bottom:1px solid #deddd9;border-left:none;border-right:none;box-sizing:border-box;letter-spacing:-1px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea id="support-answer-textarea" class="support-answer-textarea" placeholder="Destek Konusunu Cevapla!"></textarea>
<button type="submit" id="submit-code" class="btn btn-success">Submit Your Code</button>
<div class="output"></div>
The best and easy way to fix line breaks on the output use these simple css:
.support-answer-textarea {
white-space: pre-wrap;
}
When you hit enter in a <textarea>, you're adding a new line character \n to the text which is considered a white space character in HTML. HTML generally converts the sequence of all white spaces to a single space. This means that if you enter a single or a dozen of whitespace characters (space, new line character or tab) in a row, the only effect in resulting HTML is just a single space.
Now the solution. You can substitute the new line character (\n) to <br> or <p> tag using replace() method.
$("#submit-code").click(function() {
$("div.output").html($(".support-answer-textarea").val().replace(/\n/g, "<br>"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea id="support-answer-textarea" class="support-answer-textarea"></textarea>
<button type="submit" id="submit-code">Submit Your Code</button>
<div class="output"></div>
for me, I had a e.preventDefault() for only Enter keypress on a parent element, this prevents a new line from adding.
If you are capturing an input from a textarea, sending it via ajax (saving to database, e.g. mysql) and then want to display the result in a textarea (e.g. by echoing via php), use the following three steps in your JS:
#get value of textarea
var textarea_value = $('#id_of_your_textarea').val();
#replace line break with line break input
var textarea_with_break = textarea_value.replace(/(\r\n|\n|\r)/gm, '
');
#url encode the value so that you can send it via ajax
var textarea_encoded = encodeURIComponent(textarea_with_break);
#now send via ajax
You can also perform all of the above in one line. I did it in three with separate variables for easier readability.
Hope it helps.
Posting this here as it took me about an hour to figure this out, fumbling together the solutions from the answers below (see for more details):
The .val() of a textarea doesn't take new lines into account
New line in text area
URL Encode a string in jQuery for an AJAX request
I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function to you, and I show you the first step, and then want to show the subsequent steps. Normally, I would use fragments to incrementally display items, but it's not working in a code block.
So I have something like this:
<pre><code>
def python_function()
<span class="fragment">display this first</span>
<span class="fragment">now display this</span>
</code></pre>
But the <span> elements are getting syntax-highlighted instead of read as HTML fragments. It looks something like this: http://imgur.com/nK3yNIS
FYI without the <span> elements highlight.js reads this correctly as python, but with the <span>, the language it detects is coffeescript.
Any ideas on how to have fragments inside a code block (or another way to simulate this) would be greatly appreciated.
To make fragments work in code snippets, you can now use the attribute data-noescape with the <code> tag
Source: Reveal.js docs
I got this to work. I had to change the init for the highlight.js dependency:
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() {
[].forEach.call( document.querySelectorAll( '.highlight' ), function( v, i) {
hljs.highlightBlock(v);
});
} },
Then I authored the section this way:
<section>
<h2>Demo</h2>
<pre class="stretch highlight cpp">
#pragma once
void step_one_setup(ofApp* app)
{
auto orbit_points = app-><span class="fragment zoom-in highlight-current-green">orbitPointsFromTimeInPeriod</span>(
app-><span class="fragment zoom-in highlight-current-green">timeInPeriodFromMilliseconds</span>(
app->updates.
<span class="fragment zoom-in highlight-current-green" data->milliseconds</span>()));
}
</pre>
</section>
Results:
I would try to use multiple <pre class="fragment">and change manually .reveal pre to margin: 0 auto; and box-shadow: none; so they will look like one block of code.
OR
Have you tried <code class="fragment">? If you use negative vertical margin to remove space between individual fragments and add the same background to <pre> as <code> has then you get what you want.
Result:
i am having a problem with parsing html from which i would like to get the data
<td id="Company" style="border-bottom-width: 0px; padding-left: 5px">
<strong>ABC</strong>
</td>
so the data i need is of course "ABC" only, i have tried the following parsing rule but it does not work
/<td id=\"Company\" style=\"border-bottom-width: 0px; padding-left: 5px\">
<strong>(.*)<\/strong>
<\/td>/i
anyone can help and is familiar with this?
You really should not use regular expressions to parse html. It always ends up in an convoluted tangled mess.
Use a library which has the functionality of tidy like Beautiful Soup, JTidy, nekohtml,.... and walk the DOM tree (or handles the sax events) to get at the contents of the tags.
Regex-es are then beautiful to get the nuggets from the rocks once the HTML/XML parsing is done however.
You can try this regex to get text in STRONG tag nested in cell:
/<td\s*id="Company"[^>]*>\s*<strong>(.*?)</strong>\s*</td>/ms
Simple use HtmlAgilityPack
HtmlDocumet doc= new HtmlDocument();
doc.loadHtml("<td id="Company" style="border-bottom-width: 0px; padding-left: 5px">
<strong>ABC</strong>
</td>");
HtmlNode node= doc.DocumentNode.selectSingleNode("//strong");
if(node!=null)
String value= node.innerText;// value have ABC
if you have to get html from web use
var request = (HttpWebRequest)WebRequest.Create("URL");
var response= (HttpWebResponse)request.getresponse();
using (var stream = new StreamReader(response.GetResponseStream(), Encoding.GetEncoding(1252))) // you could change encoding
{
output = stream.ReadToEnd(); // output now have html in string form
}
outpul variable contains html in string foam you can use this string to pass to doc.loadHtml(output);
if want more info google 'htmlagilitypack' and 'HtmlDocument' :)