How to add/modify HTML attributes through Flask? - python

I have a button in html, let's say:
<button type="button">Button</button>
I wish to be able to disable this button through flask (for example after it has been pushed). What I would like to know is how I would add the disabled attribute onto the button. In other words, turning it into:
<button type="button" disabled>Button</button>

When you call return render_template('template.html', variables=values) at the end of your route, pass a boolean:
return render_template('template.html', var1=val1, var2=val2,..., button=button)
You can set the value of button in your route. Then in your jinja2 template, just put in a branch:
{% if button %}
<button type="button">Button</button>
{% else %}
<button type="button" disabled>Button</button>
{% endif %}
If you need the button to be disabled dynamically after the page is rendered, #ltd9938 is correct, you need javascript.
I read now you mean after it has been pushed, in which case, yes, you need javascript.

Related

Django - Conditional Rendering In Templates

I need some help conditionally rendering data in a modal pop up window on my site.
What I want to do:
When the user clicks on the "make reservation" button, I want to display this in the modal window
<h3 style="margin-top:20px;">Choose dates</h3>
<div style="margin-top:20px;" class="pick-dates-div">
<form method="GET" class="post-form">{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="form-btn save btn btn-default">Make A Reservation</button>
</form>
<button style="margin-top: 25px;" class="btn-primary btn-block btn-lg" data-toggle="modal"
data-target="#inquiryModal">More
Questions ?</button>
</div>
Then the user can pick the dates from the date picker and press the "make a reservation" button ( which is a GET request ), the page refreshes and I want to display only this in the same modal window :
<h1>Start Date: {{ date_start }}</h1>
<h1>End Date: {{ date_end }}</h1>
<h1>Price Per Day: ${{ price_per_day }}$</h1>
<h1>Total: ${{ total_price }}$</h1>
<form method="POST" class="post-form">{% csrf_token %}
{{ form.as_p }}
<button href="www.facebook.com" type="submit" class="form-btn save btn btn-default">Confirm Reservation</button>
</form>
After that the user submits the form ( POST request ) and I want to display a text :
<h3> Thank you for your reservation </3>
What would be the ideal way to achieve this ?
Thank you stack
The ideal way to achieve this is by using JavaScript.
One of the many methods this could be achieved is by rendering all the three views inside separate containers in a modal and then hiding the next two using javascript.
You can use element.style.display = 'none' to hide and
element.style.display = 'block' to show the content inside the element container.
Once the user clicks on "make reservation" button, hide/show the required containers to achieve the desired result.
Do not forget to secure your website by using proper validation on the server end. Hope that helps!

Pass the id of button from django template to a view

Below is my views.py file
def view_approval(request):
utype = request.POST.get('butn')
print utype
if utype == 'APP':
#certain set of funtions
if utype == 'SRC':
#certain set of funtions
else:
#certain set of funtions
And the HTML file:
<form name="feedback22" action="{% url 'view_approval' %}" method="post">
{% csrf_token %}
<input id="bdyBtn" type="button" name="butn" value="APP" data-toggle="modal" data-target="#appModal" >
<input id="bdyBtn" type="button" name="butn" value="SRC" data-toggle="modal" data-target="#srcModal" >
</form>
I have two modals in my HTML page, used for uploading two Excel sheets. So I created a Django view named view_approval and placed the code inside it. The code gets executed depending upon the input button clicked. But the issue is, the value of the input button is not reaching the views.
When I printed the value using a print inside the view, it showed a value "None"
Thanks in advance!!

django template conditional html

I'm not sure if the title is technically correct (sorry, I'm new to python+django)
I have a template page that displays whether an application is running or stopped depends on its status. For example:
If app is running I want to display:
<div class="lt">
<a class="play" title="App running">
<span class="text_play">Running</span>
</a>
</div>
<div class="rt">
<input type="submit" onclick="stop_app()" value="stop" class="stop">
</div>
If the application is not running then show this instead:
<div class="lt">
<input type="submit" onclick="star_app()" value="start" class="play">
</div>
<div class="rt">
<a class="stop" title="Application is not running">
<span class="test_stop">Not Running</span>
</a>
</div>
This is kind of stripped down simplified html but my point is how can I avoid repeating myself?
The template is passed a dictionary of applications that it iterates over to display all the applications and their status (running/stopped). So currently I'm iterating over the dict twice, one for "stopped" apps and one for the "running" apps.
Hope it's clear
Thanks in advance
EDIT: This is what I have tried so far:
{% if application.service.status|lower == "enabled" %}
<div>...display running HTML...</div>
{% else %}
<div>...display the non-runing HTML..</div>
{% endif %}
I just want to know if I'm doing the right thing (DRY?)
What you proposed is pretty DRY.
{% if application.service.status|lower == "enabled" %}
<div>...display running HTML...</div>
{% else %}
<div>...display the non-runing HTML..</div>
{% endif %
Keep in mind you'll rely on the return render(request... for determining the html Django needs construct.
Your proposed solution will choose one or the other. I.e. if your non-running HTML needs to switch to running HTML you won't have access to it without another render.
To be more clear and concise, django templates will construct the appropriate HTML leaving out the alternative options or "conditions".
If you learn a bit of jQuery for example you can have elements of the page switch the currently displayed html. Expanding this to ajax will allow you to get status updates from the server and vice versa.

beginner django: next button acts as Submit

Disclaimer: I am new to python and django but have programmed in Drupal
I am developing a web-based Wizard (like on Microsoft Windows installation screens) with explanatory text followed by Previous and Next buttons (which are big green left and right arrows). So far, so good.
However, my current Wizard page (in project.html, loaded by my django apps views.py) now uses a form (instance of ModelForm) which asks the user to type in a "project" name, such as My Project. Normally, such an HTML form would use a Submit button, but because this is a Wizard, I need the Next button to act as the Submit button, hiding the Submit button entirely. Also, the arrow icons appear after the form ends.
How would you do this? Sure, I could use jquery, but is there a better pythonic or django way?
Some code:
#project.html
{% extends "base.html" %}
{% load i18n %}
<h3><span>{% trans 'Project details' %}</span></h3>
<p>{% trans 'What is the name of this project?' %}
<form method="post" action="">
{{ form.as_table }}
<input type="submit" value="Submit"/>
</form>
</p>
{% endblock %}
{% block buttonbar %}
<img src="/static/img/Button-Previous-icon-50.png" width="50" height="50" alt="Previous"><span>{% trans 'Previous' %}</span>
<img src="/static/img/Button-Next-icon-50.png" width="50" height="50" alt="Next button"><span>{% trans 'Next' %}</span>
{% endblock %}
Thanks!
<input type="submit" value="Next"/>
This gives you a button with the value 'Next' which acts as a submit button. If this is not what you've wanted, rephrase your question and/or give an example of what action should take place after pressing next.
You might want to use the Django Form wizard, in this case:
https://docs.djangoproject.com/en/dev/ref/contrib/formtools/form-wizard/

How to realize a dynamic sidebar with Django?

I plan on creating a sidebar with changing elements (depending on the current url and authentication-status).
For example: The default sidebar shows a login and a tag cloud.
If a user is already logged in, I want to display a user menu.
If the current url is /tagcloud, I want to hide it from the sidebar.
Actually, I need a way which enables me to do something like this in a view:
def some_view(request):
if request.user.is_authenticated():
sidebar.remove('login')
sidebar.add('user_menu')
def tag_cloud(request):
sidebar.remove('tag_cloud')
Afterwards, I want to pass the sidebar (implicitly, without passing it to render_to_response) to the template where I have in mind to do something like this:
<div id="sidebar">
{{ sidebar }}
</div>
Is this possible?
You'd better do this in a context_processors.py file
That also mean you have to use a RequestContext when returning your views
def include_tagcloud(request):
if request.path == '/tagcould/':
tagcloud = Tags.objects.filter(active=True) #whatever
return {'tagcloud': tagcloud}
def include_login(request):
if request.user.is_authenticated():
loginform = MyLoginForm(request.POST)
#passing a Django form + POST data in the case of re-submit
return {'loginform' : loginform}
And then in your template :
{% if loginform %}
<form action="accounts/login/">
{{form.as_p}}
<input type="submit" name="Login">
</form>
{% endif %}
{% if tagcloud %}
{%for tag in tagcloud %}.....{%for}
{% endif %}
In this example the login form points to a fixed view,
if you want to catch the login form post on everyview, I don't know how to do
EDIT : if you don't use the CSRF features of Django, you could simply insert the login form in the base template without using any django form and pointing to a login view :
{% if user.is_authenticated %}
<form action="accounts/login/">
<input type="text" name="username"><input type="password" name="password">
<input type="submit" name="Login">
</form>
{% endif %}
Yeah, but you can use inheritance of templates as well as composition. Then include your sidebar in a parent template that is used/inherited from in all of your templates. Then it is easy to find the template for the sidebar: it's in a separate file.
Answer of #Dominique is correct but When you write something in context_processors that's load at any page of the website. That maybe makes a performance issue.
I think the right way to handle dynamic sidebar is simpletag and use where you need.
def get_sidebar():
tags = Tags.objects.filter(active=True)
latest_posts = Post.objects.all().order_by('-create_at')[:10]
html = render_to_string("sidebar.html", {
"tags": tags,
"latest_posts": latest_posts
})
return html
And now just use in template files:
<div class="col-md-4 sidebar">
{% get_sidebar %}
</div>
Also, you can pass request to simpletag to use user.is_authenticated for authenticated user access.

Categories

Resources