Format Html String in javascript - javascript

Below is a fragment of my code
{% autoescape on %}
<li><h4 id="instruction" style = "word-wrap: break-word">{{question_1}}</h4></li>
{% endautoescape %}
say {{question_1}} (variable render from server side) is "this is an example ", the output will be like
this is *an example*
But when i change the content from javascript to something like:
document.getElementById("instruction").innerHTML = "this is <i>example 2</i>";
the content of the html changes but it is not italise. hw do i do this. Thanks

Just found out that the problem is from a tag that was not well decoded. so, i just did this
document.getElementById("instruction").innerHTML = "this is <i>example 2</i>".replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/&apos;/g, '\'');
and this works well for me. Thanks.

This is the problem. I noticed you have two ids for just the h4 tag which is not valid.
The browser will render the first Id and ignore the second. So I advise you first try to know whether your code will work when you use one id tag. Then we can know were the problem is coming from.

Related

How to convert html string code into an actual html working code that will appear in front end?

I am using a v-for"item in items"
then I have values in my {{ item.data }} which is an html element but with a values already, example
{{ item.data }} has a value of a string "<'qr-code value="this has specific infos that is already created for this specific code" '>"
so when I would run it on my page with just {{ item.data }} , this will show up
<'qr-code value="this has specific infos that is already created for this specific code" '>
it prints the html code and not running it.
BUT when i try to copy that code and paste it in my html, it works.
it is just how can I make this string code into an actual working HTML code
How can i resolve this?
The directive v-html will render content from string as plain HTML, you can use like this example.
<div v-html=“yourVar”></div>
If you need more information, here more examples:
https://nexladder.com/vuejs-tutorial/vuejs-v-html-directive
If I understood the situation correctly you are looking for the component tag.
You can use :is="" to set the element node type.
You can find more information here:
https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

Passing HTML value to embedded script

So I have a HTML file with an embedded script. A Java application sends a value to this HTML file. Now I wonder how to pass this value from the HTML down to the script. Is this even possible?
Here is the simplified HTML file with my approach:
<html>
<body>
<div id="test">
[VALUE_FROM_BACKEND] // prints "let valueFromBackend = 1234"
</div>
<script>
console.log(document.getElementById('test').value);
// should return: let valueFromBackend = 1234;
// actually returns: undefined
</script>
</body>
</html>
Unfortunately, I can't pass the value from the Java application directly to the script. I got the above approach from here, but this doesn't work.
Other solutions only focus on getting values from remote HTML pages, declaring the HTML files's source in the script tag. But since it is an embedded script here, this also seems not to work.
Does anyone know how to deal with the situation? Help will be much appreciated.
Only HTML input elements have a value in javascript. A div cannot have a value, which is why your code returns undefined.
To access the text inside a regular HTML element, such as a div, use element.innerText instead.
Here is a working code snippet you can try out:
console.log(document.getElementById('test').innerText);
<div id="test">
let valueFromBackend = 1234
</div>
As you want to get value of a div element, so the syntax is:
document.getElementById('test').innerHTML
Remember that getElementById().value works for input and use getElementById().innerHTML for elements like div

Pass a string to javascript function from render_field tag in Django

I can pass a string value to javascript function onblur when using plain html tag as shown below:
<input type="password" name="l_password" onblur="passwordValidation(this,'id_lpassword_error')" />
but when i try to do the same thing for render_field tags it doesnt work. i get error TemplateSyntaxError: Could not parse the remainder
{%render_field form.password onblur="passwordValidation(this,'id_lpassword_error')" %}
how can i pass the string 'id_lpassword_error' to a javascript function from the render_field tag in Django?
render_field is doing its own custom parsing of that tag, and it looks like it treats double quotes and single quotes the same. So it is probably looking for the tag to finish after your first single quote.
It looks like using the filter attr should work, since it is using Django's built-in template tag parsing system, which almost definitely can deal with different types of quotes properly.
So, if I'm understanding this right, something like:
{{form.password|attr:"onblur:passwordValidation(this,'id_lpassword_error')" }}
Let us know if that works.

Unescape HTML string from database on twig template

I'm trying to convert a description, which is a string from my database, into HTML. I'm getting the description with {{ projet.description }}, but it seems that in JavaScript, "description" causes a bug in my script... So I create a div with my description on it, make it invisible, and get it with innerHTML.
Twig code
<div id="desc">{{ projet.description }}</div>
<div>
<script type="text/javascript">
var desc = document.getElementById("desc").innerHTML|e('js')|raw;
document.write(desc);
</script>
</div>
CSS
#descr {
display:none;
}
But now, document.write() still returns a string like "<p><em>POKEMON</em></p>". However, I want it in HTML.
I'm almost sure that HTML was escaped, so try it out:
<div id="desc">{{ projet.description|raw }}</div>
See raw filter on twig docs: raw
The raw filter marks the value as being "safe", which means that in an
environment with automatic escaping enabled this variable will not be
escaped if raw is the last filter applied to it
Also:
var desc = document.getElementById("desc").innerHTML|e('js')|raw;
The above snippet is not valid on twig because it isn't surrounded by valid delimiters such as "{{ }}" or "{% %}".

Showing text from resources.resx in JavaScript

This is example code in ASP.NET MVC 3 Razor:
#section header
{
<script type="text/javascript">
$(function() {
alert('#Resources.ExampleCompany');
});
</script>
}
<div>
<h1>#Resources.ExampleCompany</h1>
</div>
The code above this is just an example, but it also shows my problem with encoding. This variable #Resources.ExampleCompany is a file resources.resx with value ExampleCompany = "Twoja firma / Twój biznes"
In JavaScript, the alert shows the "Twoja firma / Twój biznes".
Why is character 'ó' '&#243'? What am I doing wrong?
In HTML tag, <h1>#Resources.ExampleCompany</h1> is displayed correctly.
UPDATE:
Mark Schultheiss wrote a good hint and my "ugly solution" is:
var companySample = "#Resources.ExampleCompany";
$('#temp').append(companySample);
alert($('#temp').text());
Now the character is ó and looks good, but this is still not answer to my issue.
According to HTML Encoding Strings - ASP.NET Web Forms VS Razor View Engine, the # syntax automatically HTML encodes and the solution is to use the Raw extension-method (e.g., #Html.Raw(Resources.ExampleCompany)) to decode the HTML. Try that and let us know if that works.
Some of this depends upon WHAT you do with the text.
For example, using the tags:
<div id='result'>empty</div>
<div id='other'>other</div>
And code (since you are using jQuery):
var whatitis="Twoja firma / Twój biznes";
var whatitisnow = unescape(whatitis);
alert(whatitis);
alert(whatitisnow);
$('#result').append(whatitis+" changed to:"+whatitisnow);
$('#other').text(whatitis+" changed to:"+whatitisnow);
In the browser, the "result" tag shows both correctly (as you desire) whereas the "other" shows it with the escaped character. And BOTH alerts show it with the escaped character.
See here for example: http://jsfiddle.net/MarkSchultheiss/uJtw3/.
I use following trick:
<script type="text/javascript">
$('<div/>').html("#Resources.ExampleCompany").text();
</script>
Maybe it will help.
UPDATE
I have tested this behavior of Razor more thoroughly and I've found that:
1.When the text is put as normal content of html then #Html.Raw method simply helps and writes char 'ó' without html encoding (not as: ó)
example:
<div> #Html.Raw("ó") </div>
example:
<script type="text/javascript">
var a = $('<div/>').html('#("ó")').text();// or var a = '#Html.Raw("ó")';
console.log(a); // it shows: ó
</script>
2.But if it is put inside html tags as attribute then Razor converts it to: ó and #Html.Raw doesn't help at all
example:
<meta name="description" content="#("ó")" />
Yo can fix it by putting the entire tag to Resource (as in that post) or to string (as in my example)
#("<meta name="description" content="ó" />")
So, sometimes somebody could have been little confused that the answers helps the others but not him.
I had similar issue, but in my case I was assigning a value from Resource to javascript variable. There was the same problem with letter ó encoding. Afterwards this variable was binded to a html object (precisely speaking by knockout binding). In my situation below code give a trick:
var label = '#Html.Raw(Resource.ResourceName)';

Categories

Resources