Unescape HTML string from database on twig template - javascript

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 "{% %}".

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

How to convert string into html format using ejs in javascript

The scenario is the user will enter the text in HTML format (e.g. <\/b>Testing<\/b>) then the inserted text will get saved into the database(HTML code as a string (e.g. <\b>Testing<\/b>).
I want the string fetched back from the database to be displayed as HTML text (e.g. Testing).
I followed the below snippet but didn't get anything as output.
Note: <%= cData.description %> worked fine when executed simply but displayed HTML code as plain text.
test.js (route file):
var testid = 234123;
b.find(testid, function(data) {
b.otherdet(testid, function(cdata){
res.render('blogdesc',{
Data: data,
cdata: cdata
});
});
});
test.ejs file:
<p class="" id="descid"></p>
<script>
var $log = $( "#descid" );
html = $.parseHTML('<%= cData.description %>'); //description is column in database
$log.append( html );
</script>
https://stackoverflow.com/a/8125053/20394 shows how to emit HTML as-is in EJS, but please make sure that you sanitize that content to avoid XSS.
I've found, where did it go wrong. I was using:
html = $.parseHTML('<%=blogData.description%>');
while the actual syntax should be this:
html = $.parseHTML('<%-blogData.description%>');

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.

Format Html String in 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.

How to pass parameter to js function from template parameter array

I generated in tornado template table with cities and I am trying to have like last column details button
{% if globals().has_key('results') %}
{% for result in results %}
<tr>
<td>{{result['name']}}</td>
<td>{{result['citizens']}}</td>
<td style="width:100px; height:100px;">
<div class="ui-grid-b">
<a class="ui-block-a ui-icon-detail" onclick="showDetails('{{id}}',{{result['city_id']}});" data-role="ui-li-aside" data-icon="right_arrow" data-theme="a"></a>
</div>
</td>
</tr>
{% end %}
{% end %}
and on click to load on another page with parameters in url.
<script type="text/javascript">
function showDetails(id, city_id)
{
window.location = '/cities?id='+id+'&city_id='+city_id;
}
</script>
How to pass parameters to show details function ? (I cannot use ', I tried with \" but it doesn't work). Results is list of dictionaries with keys name, citizens, city_id.
{{ }} is used by tornado template to access passed parameter.
showDetails = function (id, city_id)
{
window.location = '/cities?id='+id+'&city_id='+city_id;
}
I think is the easy way
The variable inside the braces will be output directly (or, the string representation of it), so it depends what it is set to.
e.g. if you have:
id = 'foo'
results = [{ 'city_id': 'bar' }]
and you are passing them to the template, then this line:
showDetails('{{id}}',{{result['city_id']}});
will be output as follows (you can confirm this with view source):
showDetails('foo',bar);
I'm guessing you're missing the quotes around {{result['city_id']}}, unless result['city_id'] is an integer, in which case it should work. Single or double quotes are both fine in JavaScript.
However, as #Pete already pointed out, "on click to load on another page with parameters in url" is what we have the href attribute for. You can save yourself a lot of work and potential brokenness with:
<a href="/cities?id={{ id }}&city_id={{ result['city_id'] }}" ....></a>

Categories

Resources