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>
Related
This question already has an answer here:
Rendering to JS with Jinja produces invalid number rather than string
(1 answer)
Closed 5 years ago.
I am trying to retrieve flash messages and append them in a text area on a webpage. The function works without the flask/flash provided code but trying to mix flash code with javascript is not working. I am calling this function with a onclick="get_flash();" The onclick does work without the flash code embedded.
head>
<script type="text/javascript">
function get_flash(){
{% with messages = get_flashed_messages() %}
{{% if messages %}
{% for message in messages() %}
document.getElementById('msg_box').innerHTML+={{message}};
{% endfor %}
{% endif %}
{% endwith %}
}
Your code leads to an Unexpected identifier error. Put quotations around your {{message}} variable.
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
document.getElementById('msg_box').innerHTML += "{{message}}";
{% endfor %}
{% endif %}
{% endwith %}
I have python/django app, need search engine and for search engine I'm using the power of jquery. I'm still very new to Jquery(actually whole Javascript) but I think this seems right to, I'm not sure why this won't work.
so I have this code:
<li class="nav-header">search for community</li>
{% csrf_token %}
<input type="text" id="search" name="search" />
<ul id="search-results">
</ul>
I have input id search. and another id search-results.
then I have this javascript file.
$(function(){
$('#search').keyup(function() {
$.ajax({
type: "POST",
url: "/search/",
data: {
'search_text' : $('#search').val(),
'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
},
success: searchSuccess,
dataType: 'html'
});
});
});();
function searchSuccess(data, textStatus, jqXHR)
{
$('#search-results').html(data);
}
I'm matching id search here. using keyup function. Is it because the function is wrong?It's very unlikely because the whole thing works fine. by whole thing , I mean the functionality of searching works here http://127.0.0.1:8000/search/ which has search.html
{% extends 'base.html' %}
{% block content %}
<h2>Search</h2>
<form method="get" action=".">
<table>
{{ form.as_table }}
<tr>
<td> </td>
<td>
<input type="submit" value="Search">
</td>
</tr>
</table>
{% if query %}
<h3>Results</h3>
{% for result in page.object_list %}
<p>
{{ result.object.name }}
</p>
{% empty %}
<p>No results found.</p>
{% endfor %}
{% if page.has_previous or page.has_next %}
<div>
{% if page.has_previous %}{% endif %}« Previous{% if page.has_previous %}{% endif %}
|
{% if page.has_next %}{% endif %}Next »{% if page.has_next %}{% endif %}
</div>
{% endif %}
{% else %}
{# Show some example queries to run, maybe query syntax, something else? #}
{% endif %}
</form>
{%endblock%}
I'm trying to use what works in search.html to work in a search bar in index.html and with Jquery keyup function.
can you please tell why I can't use jquery function that has matched id?
For detail: this is how my code works
Inside urls.py
I have url(r'^search/$',include('haystack.urls')),
and other haystack settings.
then inside views.py
def search_titles(request):
categories = SearchQuerySet().autocomplete(content_auto=request.POST.get('search_text', ''))
return render_to_response('ajax_search.html', {'categories' : categories
})
for ajax_search.html
{% if categories.count > 0 %}
{% for category in categories %}
<li>{{ category.title }}</li>
{% endfor %}
{% else %}
<li>None to show!</li>
{% endif %}
The problem is occuring from ajax I'm almost sure
If you're just practicing AJAX, your approach is ok, but jQuery has a neat method to do this..
$(function(){
$('#search').keyup(function() {
$('#search-results').load("/search/", {
'search_text' : $('#search').val(),
'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
});
});
});
Have you checked in developer tools(chrome)? If you go to Network tab, then click on XHR, you will get all the ajax requests for the current page.
Now, when you find your request, click it and go to "Response". If HTTP code 20x or 304 is used, you're getting a proper response back. If not, the server doesn't know how to handle your request(404) or a server error occured(500).
If you're getting a proper response back, try adding a console.log inside that callback. You should see whatever your script is returning.
Ajax is never to blame, ajax is just the method for hiding client > server communication. It's either how the client side script is handling things or how the server side script is handling things.
I saw this hasn't been resolved yet.
The way I usually do this is by setting the global site root just before loading the JS file or by generating an url for your search url. Then in your javascript file, just use the global variable that you set earlier. I don't know django so code below could have errors.
<script type='text/javascript'>var ROOT= {{ build_absolute_uri('/')|escapejs }};</script>
<script src='{% url search_script %}'></script>
Hi I am building a simple blog using Python/Django. In my index.html file, I am trying to show archived posts when a button containing a month is clicked. At the moment, I am just trying to get the id of every post made in that month into a javascript array. For some reason though,it always returns true!
<script type="text/javascript">
function showPosts(month)
{
var posts_in_month=[];
{% for post in all_posts %}
var match = {{ post.pub_date.month }}
{% ifequal match month %}
posts_in_month.push({{ post.id }})
{% endifequal %}
{% endfor %}
}
</script>
I then go on to have a switch statement where I show the contents of the array depending on the month clicked. The code definitely works, when I call an alert(month) it shows up correctly, and when I call alert({{ post.pub_date.month }}) it shows up fine as well. These are usually not the same though, why is it always evaluating the ifequal to true?
You cannot create Javascript variable in python and use it as python's variable.
Replace the match with actual value:
{% ifequal post.pub_date.month month %}
posts_in_month.push({{ post.id }})
{% endifequal %}
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.