How do you achieve this kind of HTML escaping/encoding automaticly - javascript

I am working on a custom plugin for esri web-app builder and I noticed two things in their dojo widget that I cannot really understand.
there is a cahce property that has a lot of function under it and also this kind fo property "url:widgets/PrintAndShare/templates/Print.html" which is legal by JS, but why using that instead of the standard dojo/text!.template, I see that the template itself is still loaded ( but ignored) - so the question is -how exactly that cached property works.
the main question is - these properties have html encoded in very specific way for example
<div class="gis_PrintDijit">
encoded like this
\x3cdiv class\x3d"gis_PrintDijit"\x3e\r\n
how do I achieve this kind of encoding ? with online tools or even better with some automation, for now I just use manual char replacing but it is really not efficient.
Thanks you all

I do not know if there is a better way.
A simple workaround can be to use encodeURIComponent and then a replace:
var t = "<div>test ok: 100%</div>";
console.log(encodeURIComponent(t).replace(/%/g,"\\x"));

Related

internationalization single page site

I want to provide different translations on a single page website. Is it a good idea to translate every text entry using this approach (pseudo code):
html
<p id="my_text"></p>
js (jQuery)
function init(){
$('#my_text')[0].innerHTML(isEnglish ? "Hello" : "Hallo");
}
If this solution has any disadvantages or will lead to issues, please let me know which (simple) solution is the better option.
In my opinion, this is going to be tedious for a long passage.
I would suggest you use a bing translation API

Using HTML within a JSON Object

I'm working on an FAQ type project using AngularJS. I have a number of questions and answers I need to import into the page and thought it would be a good idea to use a service/directive to load the content in dynamically from JSON.
The text strings are quite unwieldily (639+ characters) and the overall hesitation I have is adding HTML into the JSON object to format the text (Line breaks etc).
Is pulling HTML from JSON considered bad practice practice, and is there a better way to solve this? I'd prefer to avoid using multiple templates but it's starting to seem like a better approach.
Thanks
If you're using AngularJS and already have a build step, html2js could help you with turning HTML templates into JS, which can then be concat'd and minified.
You could try parsing the incoming JSON before sending it to the page and just adding in a <br /> everywhere you run into a \n. That way the JSON is more universally usable if you ever decide you want to port the data to another medium.

heredoc on nodejs

Trying to use the Heredoc Method described here:
http://www.developfortheweb.com/2009/03/multi-line-strings-in-javascript/
var string = (<r><![CDATA[
The text string goes here. Since this is a XML CDATA section,
stuff like <> work fine too, even if definitely invalid XML.
]]></r>).toString();
I can't make it work on node.js. I tested it on client side - it works on Firefox, but Chrome.
How should I use this method on node.js?
Thanks!
Even though this blog posts tells you something else, JavaScript does not have heredoc strings.
So you should not use it at all - it is a dirty hack. The reason why it works in some browsers is that they allow inline XML. NodeJS probably doesn't because well, it's ugly and dirty.
Now with ES6 it's easy to do that using Template Strings
The reason I was looking for it was a need to pass multi-line html text (keeping nice html indents and without splitting it to js strings) as an argument to a template engine.
Finally for my problem I just created a template engine with a heredoc block - so if you anybody is looking for heredoc just for more convenient way to write his templates - the https://github.com/AlexLibs/hot can be used (the module is registered on npm).

onclick in button with parameter value from textarea

I have a very simple scenario where I want to have a textbox where you can enter a number, and a button next to it which when pressed will call a javascript method and send it the integer value in the textbox as a parameter.
I am just learning MVC and have been very spoiled by WebForms so forgive me for the silly question, but why doesn't this work?
Enter Value 1-4<textarea id="param"></textarea>
<br />
<button id="btnTest" onclick="WCFJSONp(" + param.value + ")">Test Service</button>
I tried adding a # sign in front of 'param.value' hoping Razor might see what I'm trying to do, but that didn't work either? And can anyone recommend any links to 'crash courses' in Javascript/HTML for MVC newbs spoiled by WebForms?
As you state the question this has very little to do with MVC -- this is only javascript. Typically you would use jQuery with javascript when running the MVC platform, in which case something like this would work.
onclick="WCFJSONp($('#param').val());"
vs onclick="WCFJSONp(document.getElementById('param').value)"
When using getElementById you are not using the jQuery library but instead just base JavaScript.
There are advantages and disadvantages to using one over the other.
Using base JavaScript is faster, you don't have to load the jQuery library.
jQuery can make your scripts more portable (probably not an issue in this case), because it defines an exact interface to the DOM and takes care of any browser specific issues (this is the BIG one for me.)
jQuery is easier to use and understand. (some might argue if they are use to base javascript)
jQuery has lots of examples of advanced use (also not an issue here).
There are probably more but these are the ones that come right to mind.
This should be:
onclick="WCFJSONp(document.getElementById('param').value)"

Premailer/inline css using phantomjs

We are aware of premailer which converts styling into inline css and also changes relative urls to absolute urls. There is an online version of it premailer.dialect.ca which provides the same.
I need to use this functionality ie given any url, I need to convert it into premailed version.
However I may have to use this may be thousands of times a day and hence I cant use premailer.dialect.ca api. There is a python-premailer which does the same but I couldnt find any documentation for converting html from given url to premailed version.
How can I achieve this using premailer.py or phantom.js or any other solution? Am I missing some thing? I assume it must take lot of time to write it from scratch.
dialectica.ca provides an API for this kind of premailer operations. It converts any html page..provided their url into inline css based html page.

Categories