How do I copy a variable from inside the html page of Django templates?
render(request, 'doc.html', {'stack': stack, 'text':text,})
Your question may not seem clear enough to describe what you want or describe your problem, but some of my guesses for the solution are that you need to use js code in your template, specifically document.text.select() and document.execCommand('copy').
Perhaps the following example will suffice:
in html code
<html>
<body>
<button style="background:green; text-align:center;" onclick="CopyText()">Copy Text</button>
<input style="text-align:center;" type="text" value="{{text}}"id="yourtext">
</body>
</html>
javascript:
{% block scripts %}
<script>
function CopyText() {
var text = document.getElementById('yourtext')
text.select();
document.execCommand('copy')
}
</script>
{% endblock scripts %}
In the example shown above, we used the value of the variable that you send to the template as a default value in the text tag, and then we specify the text through the tag's ID yourtext, and then execute the copy command.
It may not seem perfect but it is enough to solve your problem.
Related
as the title says I'm trying to replace a value in my Django tag with a Javascript variable. I'm not sure if it's even possible but here is what I have (The tag is between ``):
const myTemplate = (list) => html`
<form method="post" class="notes-form">
{% csrf_token %}
{{ user.profile|meet_notes:15 }}
<div>
<button type="submit">Send</button>
</div>
</form>
`
I would like to replace the 15 by a variable like ${list.met_profile.id} for exemple (this tag will render an input with a value of this variable, here 15).
Thank you!
put the following code in your HTML document
<span id="change_val">abc</span>
<script>
const ele = document.getElementById("change_val")
ele.innerText = 15
</script>
The better way to do this is to use a serializer instead of a template tag. the django template tag will run before the js so this is not ideal.
I'm trying to copy the value of a 'textarea' input (where the user provides a text) and use it as it is in a "draft page" before posting it.
I won't paste here all my code but the relevant things.
First of all I'm using Django Framework, and I added to the base.html template the Jquery script.
In other html template called 'userblog' I added a mini text editor where 1 of his elements is a paragraph and you can change its content.
The end part of it:
<div id="textBox" contenteditable="true" name="post_content"><p>Lorem ipsum</p></div>
<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
<p><input type="submit" value="Send" /></p>
{% csrf_token %}
</form>
<script type="text/javascript">
var textAreaContent = $('textBox').val();
</script>
</body>
</html>
{% endblock %}
And in the draft.html I wrote:
{% extends "TheApp/base.html" %}
{% load static %}
{% block body_block %}
<div class="container">
<h1>This is a preview of you're post:
<script type="text/javascript" src="userblog.html">
document.write(textAreaContent)
</script>
</h1>
{% endblock %}
The view is:
def draft(request):
if request.method == 'POST':
draft = request.POST.get('post_content')
return render(request, 'TheApp/draft.html', {'draft':draft})
else:
return render(request, 'TheApp/userblog.html',)
The problem is that it does not display my paragraph content.. whats wrong in my code?
I'm new to this, I learn a bit python and the Django framework.. towards the process i touched a bit of HTML & CSS but I know almost nothing about JS..
Your "userblog.html" is indeed not getting the variable you expected.
In your view in the line
return render(request, 'TheApp/draft.html', {'draft':draft})
you are sending a context variable called "draft" to your template, which can be accessed in the template like so
<h1>This is a preview of you're post:
{{ draft }}
</h1>
As you can see you do not need any javascript for your scenario at all.
Technically you can mix the context variables and javascript (I think):
<h1>This is a preview of you're post:
<script>
document.write({{ draft }})
</script>
</h1>
This does not make sense here, but just in case your code is just an example to understand some basics.
EDIT:
Of course you must make sure that the post_content is actually sent to your view. That means in your first template you need a textarea or input for your editable content. The only thing I see is a <div> with that name. A <div> does not send anything. So your form in your "userblog.html" this could be something like this:
<form action='/draft/' method='POST'>
{% csrf_token %}
<textarea name="post_content">
</textarea>
<button type="submit">Save</button>
</form>
Then with my code above your draft.html will display what you entered.
At first I thought it was the wysiwyg editors fault I had to try different ones. But turns out they all return contents with html tag...so it must be me. I'm using https://github.com/douglasmiranda/django-wysiwyg-redactor and this also returns with html tag. ex: if I type hello it returns <p>hello</p> so I tried safe filtering and some other filtering but none of them works. how do I fix this? Thanks in advance
{% block content %}
<form id="post_form" method="post" action="/add_post/" enctype="multipart/form-data">
{% csrf_token %}
{{ form |crispy|safe }}
<input type="submit" name="submit" value="Create Post">
</form>
{% endblock %}
I also tried {{form|safe}} which doesn't work...and I want to use crispy as well.
After I read the docs I've found this one:
data = django_wysiwyg.clean_html(data)
Try it, I hope it works...
EDIT:
{{ form |crispy|safe }}
This outputs the RAW Html, this is what you don't want I guess...
I would like to use Content Security Policy and make my Django web application safe without any unsafe inline code. But while it is easy to move most of the JavaScript code to external files, I also have a segment of inline code which I do not know fix. I am using Django and I have some variables in Django template context which I want to pqww to JavaScript. So currently I simply output that as inline JavaScript. But this does not work because of CSP.
<script type="text/javascript">
/* <![CDATA[ */
var documentURL = '{% filter escapejs %}{{ document.get_document_url }}{% endfilter %}';
/* ]]> */
</script>
To put the comments in answer form and add a little...
The easiest way to do this is generate a tag with an attribute set. I don't know django so I'll just leave it in plain html:
<input type="hidden" id="mything" value="<MY VALUE>">
When I have multiple, related values I might throw them into the same element:
<span class="hidden" data-attribute1="<VALUE1>" data-attribute2="<VALUE2>">
<!-- rename 'attributeN' to something meaningful obviously -->
In either case, just read the values with JS (using jquery for brevity)
$('#mything').data("attribute1")
Or if you need a complex object, throw it in a span as html entity escaped data:
<span class="hidden" id="data-container">
<your html-escaped JSON>
</span>
And read it in the external file with:
var myObject = JSON.parse($('#data-container').html());
This is also describe at https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet#RULE_.233.1_-_HTML_escape_JSON_values_in_an_HTML_context_and_read_the_data_with_JSON.parse
I'm dynamically generating forms with hidden input in a webpage using django templates, which should be submitted when clicking on some associated text label. The problem is that I just can't get it to work.
{% for tag in tags %}
<form name="remove_{{ tag }}" id="{{ tag }}" action="/filter" method="post" accept-charset="utf-8">
<input type="hidden" name="remove_tag" value ="{{ tag }}" />
</form>
{{ tag }}
{% endfor %}
<script type="text/javascript">
function remove_tag(tag) {
document.getElementById(tag).submit();
return false;
}
</script>
This code generates the following javascript error: Uncaught TypeError: Cannot call method 'submit' of null
I've also tried submitting the form using
document.forms[tag].submit();
(changing the form name to tag), but receive pretty much the same error but with 'undefined' instead of null.
In the second example, it looks like the javascript function tries to interpret 'tag' as an integer. If I do use an integer it works alright. I could use the forloop.counter used to generate the forms in the first place, but that is kind of ugly and makes the code harder to maintain.
Is there any other, functioning, way of calling submit() on the forms?
Quotes:
{{ tag }}
The "tag" value has to be properly quoted for the Javascript snippet to be syntactically correct.