Pass Javascript variable into Django tag - javascript

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.

Related

how to copy variable to [clipboard] in django template

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.

how to copy the value of a 'contenteditable' element and insert it to other html template? Django

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.

Accessing a html tag attribute in Django template expression

There is a html element:
<input type="text" id="someInput" name="someInput"></input>
It's value is set in JavaScript:
var tbIndx = 10;
document.getElementById("someInput").value = tbIndx;
Now,I want to construct a Django for-loop which would use the value of the html tag described above.Something like this:
{% for i in val %}//val is the innerHTML of the input box described above.
//code
{% endfor %}
Can we access a value like this in a Django template?Please suggest some methods for achieving this functionality.
Thanks
No you can't do this. Django for loop will run only for values passed from context in view.py. Better you submit the input value using Ajax. And return it to run in template from Ajax response.

replace parameter using jquery

I'm working with python and jinja. When I render template I sent two parameters like this :
return render_template('mod_page/index.html',
types_first = utils.questions_first(),
types_second = utils.questions_second())
questions_first and questions_second are two same functions, something like this:
def questions_first(self):
return ['Name','Surname', 'Phone']
In index page I have a tag like this:
<html lang="en">
...
I want to take lang attribute with jQuery and then to check if it is 'en' I want to use questions_first if it is 'sr' I want to use questions_second.
My question is how can I replace the parameter types_first inside jinja code or put there, I don't know exactly what to do, I tried to do it like this:
<script>
$(document).ready(function(e){
var language = $('html').attr('lang');
var selectedFunction;
if(language == "sq"){
selectedFunction = "sq";}
else{
selectedFunction = "sr"; }
</script>
....
<p> Questions: </p>
{{ _({% for type in types_first %}) }}
<div class="checkbox">
<label><input type="checkbox" value="{{ type }}">{{ type }}</label>
</div>
{% endfor %}
First solution (better):
If you want to change lang, you can use i18next framework (http://i18next.com/docs/). It's much simpler solution.
Second solution (worse):
Select via jQuery element you want to change -> use empty() function -> render element with changed values and assign it to selector with append()
You can also combine both solutions. Write function to rerender template and change dynamically langauge. e.g.:
fn_or_elt.empty();
fn_or_elt.append(markup);
fn_or_elt.i18n();

Submit form in javascript using form name

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.

Categories

Resources