render html from string without affecting formatting [duplicate] - jsf

Is there any way to setup Firefox and Chrome to work with escape=false attribute in h:outputText tag. When there is some html that needs to be shown in the browser, Firefox and Chrome show parsed string correctly, but any other links in application are freezed (??).
The example html from db:
<HEAD>
<BASE href="http://"><META content="text/html; charset=utf-8" http-equiv=Content-Type>
<LINK rel=stylesheet type=text/css href=""><META name=GENERATOR content="MSHTML 9.00.8112.16434">
</HEAD>
<BODY><FONT color=#000000 size=2 face="Segoe UI">läuft nicht</FONT></BODY>
Parsed HTML on the page:
läuft nicht
What is very weird, is that in IE everything works (usually it is opposite).
I use primefaces components (v2.2), .xhtml, tomcat 7 and JSF 2.0

You end up with syntactically invalid HTML this way:
<html>
<head></head>
<body>
<head></head>
<body>...</body>
</body>
</html>
This is not right. There can be only one <head> and <body>. The browsers will behave unspecified. You need to remove the entire <head> and the wrapping <body> from that HTML so that you end up with only
<FONT color=#000000 size=2 face="Segoe UI">läuft nicht</FONT>
You'd need to either update the DB to remove unnecessary HTML, or to use Jsoup to parse this piece out on a per-request basis something like as follows:
String bodyContent = Jsoup.parse(htmlFromDB).body().html();
// ...
Alternatively, you could also display it inside a HTML <iframe> instead with help of a servlet. E.g.
<iframe src="htmlFromDBServlet?id=123"></iframe>
Unrelated to the concrete problem:
Storing HTML in a DB is a terrible design.
If the HTML originates from user-controlled input, you've a huge XSS attack hole this way.
The <font> tag is deprecated since 1998.

It seems to me that you're trying to do something that JSF was not really meant to do. Rather than try to insert HTML in your web page, you ought to try having the links already on your page and modifying the "rendered" attribute through an AJAX call.

Related

Retrieve relative urls from a text

I have a string of HTML with both absolute and relative URLs and I'm trying to retrieve only the relative URLs. I tried using the get-urls package but this only retrieves absolute URLs.
An example of the string of html received.
<!DOCTYPE>
<html>
<head>
<title>Our first HTML page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h2>Welcome to the web site: this is a heading inside of the heading tags.</h2>
<p>This is a paragraph of text inside the paragraph HTML tags. We can just keep writing ...
</p>
<h3>Now we have an image:</h3>
<div><img src="/images/plantTracing.gif" alt="Graphic of a Mouse Pad"></div>
<h3>
This is another heading inside of another set of headings tags; this time the tag is an 'h3' instead of an 'h2' , that means it is a less important heading.
</h3>
<h4>Yet another heading - right after this we have an HTML list:</h4>
<ol>
<li>First item in the list</li>
<li> Second item in the list</li>
<li>Third item in the list</li>
</ol>
<p>You will notice in the above HTML list, the HTML automatically creates the numbers in the list.</p>
<h3>About the list tags</h3>
</body>
</html>
Currently doing this
getUrls(string of HTML received)
It only returns {https://github.com/}
I want to return {https://github.com/, /modules/example.md}
The get-urls package requires the URL to either start with a scheme such as http:// or to start with a known top-level domain.
In fact, the doc even contains this Require URLs to have a scheme or leading www. to be considered an URL.
Since you're looking for relative paths that have neither of those, that package will not do what you want.
You will probably benefit best from an actual HTML parser such as cheerio which find the HTML attribute based URLs based on HTML context, not on just text matching tricks as that will find all the paths that are relative URLs.

place external JavaScript after CSS file inside head element using JSF 2.3

I use JSF 2.3 for developing web application.
As a web developer, I care about the performance of loading speed of a site.
As I was exploring on how I could make my site faster, I encountered this post on Stack Overflow. And the quote from the accepted and most up-voted answer said
stylesheets should always be specified in the head of a document for better performance, it's important, where possible, that any external JS files that must be included in the head (such as those that write to the document) follow the stylesheets, to prevent delays in download time.
I know that JavaScript performs better when it is placed at the bottom of the <body>, but I want to include reCAPTCHA and Google instructs us to place the required external JavaScript before the closing </head> tag.
So, I decided to include the required external JavaScript before the closing </head> tag and after CSS files to boost the performance.
However, my CSS files are declared in a JSF way like <h:outputStylesheet name="css/default.css"/>, and I realized that the CSS files declared this way are always placed after files that are declared in a non-JSF way, which is <script src="https://www.google.com/recaptcha/api.js"></script>. I also considered making the external JavaScript behave in a JSF way by changing <script> to <h:outputScript>, but the <h:outputScript> can only render local scripts as described in this post .
So, the result will always be as follows.
<head>
<script src="https://www.google.com/recaptcha/api.js"></script>
<link type="text/css" rel="stylesheet" href="/project/javax.faces.resource/css/default.css.xhtml" />
</head>
insted of
<head>
<link type="text/css" rel="stylesheet" href="/project/javax.faces.resource/css/default.css.xhtml" />
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
Maybe I'm thinking too much, and the placement order of link and script doesn't affect the performance that much, but if the loading speed gets faster even a little, I want to follow the better way.

mathjax is not rendered when my page is on Dropbox

I have some mathjax enhanced WWW pages on Dropbox (e.g., mathjax_test.html), that are rendered like this
while on localhost they are rendered like this
The code of the page is
<html>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<head>
<title>Test of mathjax</title>
<meta http-equiv="content-type" content="text/html;charset=latin-1"></>
</head>
<body>
We analyze the common case in which the dynamic load can
be expressed by a constant load vector \(\boldsymbol r\)
modulated by an adimensional function of time,
\(f(t)\) (e.g., the seismic excitation can be
described in such terms).
</body>
</html>
Is there something that can be done to have mathjax code rendered correctly when the page is fetched from Dropbox?
The problem is that Dropbox only serves content over https but in your source MathJax.js is loaded via src="http://cdn.mathjax.org/....
Browsers block such http calls (see this SO post), hence MathJax is not loaded and accordingly can't render the page.
(You can open the JavaScript console in the developer tools of your browser to see an error message about this.)

Should Partial Views contain <head> element

I encounter in some web app that some partial view that is used has head element (it loads some Jquery things).
The thing is that with that and the _layout.xml I get this wierd HTML page structure
<head>
...
</head>
<body>
...
</body>
<head>
...
</head>
<body>
....
</body>
doesn't feel right..
What's the best practice to load some .css.js to particular page? is it all done by _layout.xml and bundles?
and in general - only _layout.xml should contain head element? no other view in my solution?
You want only one head. Use layout with sections and add MVC sections in normal pages to add CSS or JScript. See here on basic section usage http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx. If you want to use partial create a helper to render section from partial see this answer Using sections in Editor/Display templates

Thickbox inline problem

I am trying to create a modal window with hidden content using thickbox
It opens the window fine , not sure whys its not showing the content inside the id="hiddencontent".
i am following as suggested in the examples for inline http://jquery.com/demo/thickbox/#
-thanks
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
Show Content
<div id="hiddenContent" style="display: none">inline content comes here</div>
</body>
</html>
It seems you don't have css file, you can copy thickbox css on http://jquery.com/demo/thickbox/#sectiona-3 to your page (or save as style.css file).
-- edit --
Yeh, sorry, didn't notice that css is already loaded :(
By the way, just found the solution, try to add p tag inside your hiddenContent div:
<div id="hiddenContent" style="display: none"><p>inline content comes here</p></div>
Hope helps ;)
This is a bug in thickbox. Here is how you can fix it:
Inside thickbox.js
on or about line 221 you should see this line of code:
$("#TB_ajaxContent").append($('#'+params['inlineId']).children());
change it to this:
$("#TB_ajaxContent").html($('#'+params['inlineId']).html())
and then, on or about line 223 you will see this line:
$('#'+params['inlineId']).append($("#TB_ajaxContent").children());
disable the line by adding two slashes before it like this:
//$('#'+params['inlineId']).append($("#TB_ajaxContent").children());
Explanation:
When thickbox copies the content from the hidden div into the thickbox container, it does so by copying all .children() elements. If you have only text inside your hidden div there ARE NO CHILDREN because text is not itself a child element. This is why wrapping your content in a <p> tag will work because now there is a child (the <p> tag).
So if you want to have text only in your hidden div using .html() instead will grab everything in your hidden div. The second line being disabled prevents thickbox from trying to copy the content back to the hidden div when the thickbox closes, which would cause any content within child tags to be duplicated in the hidden div.
There is no need to edit the .js file, the solution is quite simple.
Maybe a bit later :) but I overcomed the issue only changing the ? char in #TB_inline? by &
The issue is on the internal parseQuery tickbox function, that parses match pairs but it blows when the query have a double ? like in the case.
UPDATE: In some cases the <p> fix is also needed ;)
Hope it helps.
The function tb_position() needs to be updated.
this condition
if ( !(jQuery.browser.msie && jQuery.browser.version < 7))
is the reason for error.
jQuery does not support jQuery.browser anymore. For detecting IE6 in this case change the above condition to this
if ( !(/\bMSIE 6/.test(navigator.userAgent)))

Resources