i wish to call the JavaScript function on the Jinga button, oninput = input_filename(). But the button doesn't trigger. What am I doing wrong? Please I need help .
{{ form.video_file(onclick="upload('{{ request.url }}');", id="v", class="btn btn-primary", class="custom-file-input", id="file_input", oninput="input_filename()") }}<br><br>
The mistake i made was that the JavaScript code for the function, oninput = input_filename(), was placed after the {% endblock %} i.e outside the {% block content %}. To solve this problem, the JavaScript code was moved above the {% endblock %} i.e inside the {% block content %}
Related
I am trying to create a template with Django to use with all the pages I have in my project. All the pages display similar tables which makes it easier but some of them require an extra check or two. So in writing this one-size-fits-all template, I would like to have this piece of code if it is one type of page:
{% if not package_check %}
<p style="color:red">Package not found, so script did not run. Install package and try again</p>
{% elif count|length %}
<!-- rest of html template -->
{% endif %}
Otherwise, I would like to have this piece of code:
{% if count|length %}
<!-- rest of html -->
{% endif | length %}
Since they are very similar I am wondering if it's possible (and how can I do it) to insert it into the HTML with Javascript when loading the page and make it test for the Django variables in the template tags.
Nothing understandable. Try to write clear.
You want to insert a new template or create a new html element from javascript
if you want include new template
you can do this
{% if not package_check %}
<p style="color:red">Package not found, so script did not run. Install package and try again</p>
{% elif count|length %}
<!-- rest of html template -->
{% include 'youranothertemplate.html' %}
{% endif %}
create new element from javascript
const newElement = document.createElement("h1")
newElement.innerText = "Hai"
document.getElementById("new").append(newElement)
<div id="new">
</div>
How to compare javascript variable "var1" with django multiple values. If a answer is ok, program should say ¡very good!
Django + Javascript:
<script>
var var1 = document.getElementById("userAnswer").value;
if (
{% for textEUS in question.textEUS.all %}
var1 == {{ textEUS }}
{% endfor %}
){
alert(¡Very good!);
}
</script>
only Django:
{% for textEUS in question.textEUS.all %}
{{ textEUS }}
{% endfor %}
only Javascript:
<script>
function tocorrect(){
var var1 = document.getElementById("userAnswer").value;
if (var1 == "answer"){
alert(¡Very good!);
}
}
</script>
What you're trying to do isn't possible the way you're trying to do it. This is the order of things:
Django renders a page using the django template language. This page might consist of HTML, javascript, and text really. All of the django tags, filters, variables have been assessed and processed at this point. For example:
{% for textEUS in question.textEUS.all %}
{{ textEUS }}
{% endfor %}
will have turned into a list of text.
The page rendered above is sent to your users browser
In the browser, the page is loaded, and javascript is executed, but at this point there are no more django template-tags etc.
The key point is:
You can't expect django template tags to 'run' at the sametime as your javascript. One happens on the backend, the other on the frontend.
You can however set a javascript variable using the django template language in the backend, and then use it in the front-end:
<script>
var var1 = document.getElementById("userAnswer").value;
// create a variable called textEusAll, this is completed in the backend
// before the page is sent to the user
var textEusAll = [
{% for textEUS in question.textEUS.all %}
"{{ textEUS }}"{% if not forloop.last %},{% endif %}
{% endfor %}
]
// use plain javascript for stuff happening in the front-end
if (textEusAll.includes(var1)) {
alert("¡Very good!");
}
</script>
I have a jquery function that works when I run that as an event, but does not work when I try to get it to run when the document reloads.
This is my element for the window to scroll to when the page refreshes.
{% block content %}
{% for poll in polls %}
<button class="test" id="{{ poll.id }}">{{ poll.id }}</button>
{% endfor %}
{% endblock %}
This code below works fine, it's attached to a click event.
{% block jquery %}
{# <script>#}
testEvent();
// sending the poll id to report after the flag is clicked on
function testEvent() {
$(".test").click(function(event){
event.preventDefault();
var scrolltoid = document.getElementById('54')
scrolltoid.scrollIntoView(true);
window.scrollBy(0, -50);
});
};
{# </script>#}
{% endblock %}
I need the code to work when the page refreshes. However, when the same code is inserted into document ready function to scroll the window to the specific element when the page refreshes, it is not working.
{% block jquery %}
{# <script>#}
$(document).ready(function(){
var scrolltoid = document.getElementById('54')
scrolltoid.scrollIntoView(false);
})
{# </script>#}
{% endblock %}
I also tried running the alternative code below. I saw the scroll successful very quickly for just a split second, but when the page completely refreshes, my window scrolls back to the top again instead of shifting to the element id.
{% block jquery %}
{# <script>#}
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#54').offset().top
}, 'slow');
});
{# </script>#}
{% endblock %}
This code was left over by a previous programmer and I am confused about the usage of {# #}. I think the reason my code wouldnt work might be because of the {# #} that was included. I am very confused as to its usage, if I remove the comment, all the jquery/javascript on the page would stop running, so I couldn't remove it. But this confuses me because {# #} is for commenting out code on django, and what is commented out should not impact the code itself, but the {# #} tag in my code is required to get all the script on my page to work (except it doesn't work with scroll when page refreshes). I have tried doing research on {# #} but havent found anything useful on it.
I pass some data and process in my django template file. It works just fine. However, when i right click and then select "view page source" on my internet browser, i can see all the values that i passed from my view.py. How to hide the values in the template file.
Child.page
{% extends "base.html" %}
{% block title %}My amazing blog{% endblock %}
{% block extra_js %}
<script>
var secret_data = new Array();
function mybutton(){
{% for data in Mysecret%}
// Here, I wanna make the value of data invisable
secret_data.push({{ data.0 }})
{% endfor %}
}
</script>
{% endblock %}
{% block content %}
<input type="submit" name="submitButton" value="Submit" onclick ="mybutton();"> </input>
{% endblock %}
When i right click and select "view to source" on my internet browser, i can see all the values something like that:
<script>
var secret_data = new Array();
function mybutton(){
secret_data.push("Secret-1")
secret_data.push("Secret-2")
}
</script>
I have tried this:
secret_data.push({% csrf_token %}{{ data.0 }})
The values cannot be seen in case of viewing source code of the page, but at the same time it messes up the data that i pass (cannot access data cause the data turns out a div). How can i make my secret_data list invisible so that if someone tries to view source of my page, she would not be able to see the passed values ("Secret-1" and "Secret-2").
In a Django template, how could I refer to the URL. I want to use it in static pages, to avoid having live links to the current page. Is there a way to do this with the Django template language or do I have to use JavaScript to do it?
I would like to do something like
{% if current_url == "/about/" %}
About
{% else %}
<a href='/about/'>About</a>
{% endif %}
I'm using it for a simple blog, so there are no views written for those pages.
I presume by your reference to 'static pages' you mean generic views. Internally, these use RequestContext, so you have access to the request object which is the current HttpRequest. So you can access the current URL with request.path.
{% if request.path == '/about/' %}
...
{% endif %}
Note that this if syntax is Django 1.2+ only - if you're using an older version, you have to do:
{% ifequal request.path '/about/' %}
...
{% endifequal %}
instead of current_url in your example above, you can substitute request.path (assuming you've got django.core.context_processors.request in play). And it'd have to be == not = :o)
I think you can accomplish this with simple template inheritance:
# base.html
{% block contactlink %}<a href='/contact/'>Contact</a>{% endblock %}
{% block aboutlink %}<a href='/about/'>About</a>{% endblock %}
...
# about.html
{% block aboutlink %}About{% endblock %}
# contact.html
{% block contactlink %}Contact{% endblock %}
Of course this only works if you have a separate template for each page, but I'm assuming you do since you said the pages are static. Knowing more about what views you are using (assuming generic view direct_to_template or similar) and your urls.py would help.