access opened html div in javascript - javascript

i call ajax request in A.html and when response is ok I want to show message in B.html.
(I want to show message in a div with id='mes_div' that contains in B.html )
how can I access B.html and
how should I access this div?
I use django as server side.

You should do it like this:
Django view:
default case: -> template A.html
if condition == Load_A_Done -> template B.html
On A.html's AJAX, after loading success you call the Django View, with a form parameter like load=OK
On Django view, check if load parameter is presenting, if no, use the A.html as template, else use the B.html as template
Before using B.html, use messages
from django.contrib import messages
def viewAB(request):
if request.GET.get("load") == "OK":
messages.info(request, 'A loaded successfully')
return render(request, 'B.html')
else:
return render(request, 'A.html')
on the B.html
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}Important: {% endif %}
{{ message }}
</li>
{% endfor %}
</ul>
{% endif %}

Related

HTML if else condition for printing items in list

I'm making a website with flask, and I pass in a list. My .html file has this code:
{$ for file in list %}
<div>
<img ... > </img>
</div>
{% endfor %}
Now if list.length == 0 I want it to just do something like
<h2> Error </h2>
instead. How do I make an if statement to check if the list is empty, and if it is then I print error on the website, if it is not, I print the images in the list. I tried to put:
<script>
if(list.length==0){
<h2>Error</h2>
}
else{
"the for loop stuff"
}
</script>
but this does not work.
THanks
In Flask with Jinja2 as a template engine, the if-else syntax requires you to write the following statement
{% if mylist.length == 0 %}
<div>error</div>
{% else %}
<!-- loop -->
{% endif %}
Note: Since list is a Python keyword i suggest you to use another name for your list in order to avoid possible conflicts.
In this pythonprogramming page about flask 7, you will find some example code and a video. The example shows an if-else statement:
{% for post in posts %}
<h3> {{ post.title }}</h3>
<p>{{ post.body }}</p>
{% if author %}
<span style="font-size:0.5em;color:yellowgreen">{{ post.author }} </span>
{% endif %}
{% if date %}
<span style="font-size:0.5em;color:yellowgreen">{{ post.date }}</span>
{% endif %}
{% endfor %}
I decided to post my answer to share this learning resource because I have noted that the example does not use any <script> tag (not sure if it helps).
The comparison operator is almost the same everywhere as you can see in both the Python and Jinja references.
Therefore, the equivalent for your code would be:
{% if list.length == 0 %}
...
{% endif %}

How to access Django crispy tag array within JavaScript?

I am working on a Django project. Within one of my apps I want to pass an array of numerical data from my views file to a template. I then want to have access to said data so that I am able to manipulate it within JavaScript.
I can successfully send the array to the template as a crispy tag via the render function. Unfortunately, I can only access said tag within the HTML itself but not within JavaScript.
views.py:
from django.shortcuts import render
sample_data = [1,2,3]
def home(request):
data = {
'message': sample_data
}
return render(request, 'blog/home.html', data)
home.html:
{% extends "blog/base.html" %}
{% block content %}
<body>
{{ message|safe }} <!-- can access crispy tag within HTML-->
<script>
var x = {{ message|safe }}; // can not access crispytag within javascript
</script>
</body>
{% endblock content %}
I want to be able access the crispy tag array within the templates' JavaScript. What do I need to change to be able to do this ?
I think you need add quotes to access django template tags in javascript
{% extends "blog/base.html" %}
{% block content %}
<body>
{{ message|safe }} <!-- can access crispy tag within HTML-->
<script>
var x = "{{ message|safe }}" // can not access crispytag within javascript
</script>
</body>
{% endblock content %}
hope it helps

Django Alert box

I want to show a JavaScript alert box when there is an error during login (wrong password or username), and reload the page. How can I do this from the Django template?
This is along the lines of what I had in mind:
[% if messages %}
<div class="javascript:alert">
{{ somemessage }}
</div>
{% endif %}
Put your alert call inside a script tag like this:
[% if messages %}
<script>
alert({{ somemessage }})
</script>
{% endif %}

Django Endless Pagination twitter style pagination not working (changes not reflect on html)

I am trying to implement Twitter style pagination using Endless Pagination. The problem is when I click show more, "loading" shows up but updated entries do not show up in browser. I checked the ajax response, it is correct. When I put the js into another file and debug it, I find that DOM of is updated when debugging but my browser does not show the updated contents. Could someone help me? Thanks.
<div class="feeds endless_page_template">
{% include page_template %}
</div>
{% block js %}
{{ block.super }}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="{{ STATIC_URL }}endless_pagination/js/endless-pagination.js"></script>
<script>$.endlessPaginate();</script>
{% endblock %}
Below is my page_template
{% load endless %}
{% load custom_filters %}
{% lazy_paginate notifications %}
{% for notification in notifications %}
<code to display notification>
{% endfor %}
{% show_more "show more"%}
This is my view class:
class HomeView(generic.ListView):
page_template_name = 'archive/home.html'
page_template = 'archive/notification.html'
#method_decorator(login_required)
def dispatch(self, *args, **kwargs):
return super(HomeView, self).dispatch(*args, **kwargs)
def get(self, request, template="archive/home.html", *args, **kwargs):
try:
#notification_list = retrieve_feed(request= request)
notification_list = retrieve_checkups(request=request)
<code to get notifications>
context = {'notifications': notification_list, 'is_doctor': is_doctor, 'docpat': docpat,
'totalp': totalp, 'newp': newp, 'totalc': totalc, 'newc': newc,
'profile_picture': profile_picture, 'page_template': self.page_template}
return render(request, template, context, context_instance=Util.custom_context(request))
It seems you are missing the if request.is_ajax(): template = page_template clause.
This changes the template from archive/home.html to archive/notification.html when the ajax request is made. Hence it includes that new template into the larger template on every request.
Refer to http://django-endless-pagination.readthedocs.io/en/latest/twitter_pagination.html#split-the-template

Django: making {% block "div" %} conditional with a conditional {% extends %}

I would like to share a template between AJAX and regualr HTTP calls, the only difference is that one template needs to extend base.html html, while the other dose not.
I can use
{% extends request.is_ajax|yesno:"app/base_ajax.html,app/base.html" %}
To dynamically decide when to extend, but I also need to include {% block 'some_div' %}{% endbock %} tags to tell the renderer where to put my content. The ajax call needs those tags to be left out because jQuery tells it where to put the content with $('somediv').html(response).
Any idea on how to dynamically include those block tags when its not an ajax call?
I've been referencing this question to figure it out:
Any way to make {% extends '...' %} conditional? - Django
Attempt to make it work through an {% if %}:
{% extends request.is_ajax|yesno:",stamped/home.html" %}
{% if request.is_ajax == False%}
{% block results %}
{% endif %}
{% load stamped_custom_tags %}
...
Content
...
{% if request.is_ajax == False%}
{% endblock %}
{% endif %}
but this fails when parser runs into the {% endif %}
Wouldn't this, or some variant, do?
{% if request.is_ajax %}
{# ajax! #}
{% else %}
{% block 'some_div' %}{% endbock %}
{% endif %}
My Solution:
{% extends x|yesno:"stamped/blank.html,stamped/home.html" %}
Where blank.html contains:
{% block results %}{% endblock %}
<!-- to allow for corrected shared rendering
with ajax posts and normal django rendering -->
and home.html is my standard app page with a results block to extend.

Categories

Resources