I have a pretty complex Flask site using Babel for multilanguage support in templates using {{_('sometext')} It all works well except the buttons which truncate with any spaces in the string.
Example
<h2>{{ _("Hello World") }}</h2>
<input type="submit" name="h" value={{ _("Hello World") }}>
This displays with the button text truncated at the space. Looking at rendered page source, I see the HTML below is malformed.
<input type="submit" name="h" value="Hello" world="">
Any idea how to allow spaces in Babel computed button values?
Related
I'm likely the nth person to have asked this question but am having trouble parsing the relevant documentation; I want to add a modal dialogue to a button declared with a function in Jinja2.
The code for the form where I want the modal to be called is below - the modal should be called when the shutdown button (last line) is pressed, to confirm this action.
<form class="form form-horizontal" method="post" role="form"
style="text-align: center;">
{{ power_form.hidden_tag() }}
{% if power_status == "None" %}
{{ power_form.power_on(class_="btn btn-default") }}
{{ power_form.power_cycle(class_="btn btn-default") }}
{{ power_form.power_off(class_="btn btn-default") }}
The modal dialogue is called 'Shutdown Confirmation' and has been declared later. I am unsure how to call it as online examples show the button declaration is used instead of the {{. Here is the bootstrap documentation for this:
<button type="button" class="btn btn-primary" data-bs-
toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
With Bootstrap 5 you can activate the modal panel by data attributes or JS API. I assume you want to use the data-attribute method.
With WTForms you can pass any attribute to the rendered element, just replace any dash with underscore (because Python syntax), and WTForms will change them back to dashes:
{{ power_form.power_off(type="button", class_="btn btn-default", data_bs_toggle="modal" data_bs_target="#exampleModal") }}
Change the #exampleModal to the corresponding selector of your modal element. We also change the type of the button from the default submit to simple button, so it wont submit the form, just open the modal window.
Lets say I have a model with 2 fields. With one field being a choice field of radio button Choice1, Choice2 and Other, the next being Other which is a textfield I want the "other" textbox to appar / enabled only when "Other" is selected in the radio button.
This question is not from the django-forms category. This applies more to the front-end category. Everything that is sent from the django server is static. Sure, you can write a form class and override the template for it. Also, you can connect the js script directly to the form class. It is convenient, but not canonical. Just, write the JS script or using JQuery, which will activate the field when you select a particular option.
I wrote for you a small example of how this can be do it.
I hope this helps you.
$('input[type=radio][name=choices]').change(function() {
$('input[type=text][name=other]').prop(
'disabled',
function(i, v) {
return !v;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p><input name="choices" type="radio" value="choice1">Choice 1</p>
<p><input name="choices" type="radio" value="choice2">Choice 2</p>
<p><input name="other" type="text" disabled></p>
</form>
I've got a custom filter that takes a string and makes it into the appropriate attributes for the tooltip library I'm using. It worked with OpenTip, but I'm converting to using the tooltip library that's in Bootstrap.
Here's my filter:
from django import template
from django.utils.html import conditional_escape
from django.utils.safestring import mark_safe
register = template.Library()
#register.filter(needs_autoescape=False, is_safe=True)
def tooltip(value, autoescape=False):
"""
Filter to turn some text into the tag that the tooltip library uses -
Written as a filter so we can switch from one tooltip library to
another
"""
if autoescape:
esc = conditional_escape
else:
esc = lambda x: x
if value is not None and len(value) > 0:
retval = 'data-toggle="tooltip" data-html="true" ' +\
'rel="tooltip" title="%s"' % esc(value)
return mark_safe(retval)
else:
return ''
And here's where I'm using it in a template:
<form id="filter" name="filter" method="post"
class="form-inline">
{% csrf_token %}
<label for="filterText">Filter Query:</label>
<input type="text" id="current_filter" name="current_filter" value="{{current_filter}}" placeholder="Filter" class="span8"/>
<i class="icon-question-sign"
{{"Filters -<br>requester: [[first] [last]]|[windows_id]<br>client: [[first] [last]]|[windows_id]<br>approver: [[first] [last]]|[windows_id]<br>worker: [[first] [last]]|[windows_id]<br>ticket: [id]<br>status: [open]|[closed]|[hold]<br>type: [termination]|[extension]|[access]|[password]|baskets]<br>item: [name for category/item/attribute inventory]<br>since: [mm/dd/yyyy]|[yyyy-mm-dd]<br>before: [mm/dd/yyyy]|[yyyy-mm-dd]<br>All searchs are AND with comma delimiting"|tooltip}}></i>
<input type="submit" name="btnSubmit" class="btn" value="Filter"/>
<input id="filter_reset" type="button" name="filter_reset" class="btn" value="Clear existing filters"/>
</form>
{% endif %}
But the tooltip isn't processing the html, and when I go into Firebug and cut and paste the html, it looks like something is escaping it in spite of the fact that I marked it with mark_safe:
<form class="form-inline" method="post" name="filter" id="filter">
<input type="hidden" value="dpuAc9GNUQtvGG5wYzrWsG2Vpu5i7PWJ" name="csrfmiddlewaretoken">
<label for="filterText">Filter Query:</label>
<input type="text" class="span8" placeholder="Filter" value="" name="current_filter" id="current_filter">
<i title="Filters -<br>requester: [[first] [last]]|[windows_id]<br>client: [[first] [last]]|[windows_id]<br>approver: [[first] [last]]|[windows_id]<br>worker: [[first] [last]]|[windows_id]<br>ticket: [id]<br>status: [open]|[closed]|[hold]<br>type: [termination]|[extension]|[access]|[password]|baskets]<br>item: [name for category/item/attribute inventory]<br>since: [mm/dd/yyyy]|[yyyy-mm-dd]<br>before: [mm/dd/yyyy]|[yyyy-mm-dd]<br>All searchs are AND with comma delimiting" rel="tooltip" data-html="true" data-toggle="tooltip" class="icon-question-sign">
</i>
<input type="submit" value="Filter" class="btn" name="btnSubmit">
<input type="button" value="Clear existing filters" class="btn" name="filter_reset" id="filter_reset">
</form>
How do I get the html in that filter text into the page without the being escaped?
Try using safe:
{{"Filters -<br>requester: [[first] [last]]|[windows_id]<br>client: [[first] [last]]|[windows_id]<br>approver: [[first] [last]]|[windows_id]<br>worker: [[first] [last]]|[windows_id]<br>ticket: [id]<br>status: [open]|[closed]|[hold]<br>type: [termination]|[extension]|[access]|[password]|baskets]<br>item: [name for category/item/attribute inventory]<br>since: [mm/dd/yyyy]|[yyyy-mm-dd]<br>before: [mm/dd/yyyy]|[yyyy-mm-dd]<br>All searchs are AND with comma delimiting"|safe|tooltip}}
Or you can try removing esc from your tooltip tag.
Edit:
I just realized what you are trying to do. You cannot put html inside a tooltip in bootstrap, it's a plaintext feature only. data-html="true" allows it to contain html content. You can also use popover. Above safe filter should still be used in order to disable html escaping.
Turns out the problem was much stupider than what I thought it was - I had my <script> tags in the wrong order so I was getting the jQuery-UI tooltip instead of the Bootstrap tooltip, and the jQuery-UI tooltip doesn't support html.
I am trying to put some text in a textarea using a template variable like this:
{% if action == 'edit' %}
<form>
<textarea style='width: 420px; height: 65px'>
{{ post.text }}
</textarea>
</form>
{% endif %}
However, I notice that the text is displayed with some initial whitespace that I can't remove. I tried creating a filter to .strip() the text before showing to the user but to no avail. Although the text is stripped from whitespace it does display with some space characters before the first letter.
Is there a solution for this?
try not to put space in your code
<textarea style='width: 420px; height: 65px'>{{ post.text }}</textarea>
I try to post value of input buttons in Django but I couldn't
This is my template
<form id="ReviewRateForm" method="post" action="/review/post/rate/">
<input type="button" hint="V1" title="V" value="1" id="radio{{ forloop.counter }}-1" type="button" name="qid[{{forloop.counter}}]"></input>
<input type="button" hint="V1" title="V" value="2" id="radio{{ forloop.counter }}-1" type="button" name="qid[{{forloop.counter}}]"></input>
<input type="button" hint="V1" title="V" value="1" id="radio{{ forloop.counter }}-1" type="button" name="qid[{{forloop.counter}}]"></input>
</form>
However, when I debug it I couldn't reach the values of that input buttons in my view.
What is the problem or how can I overcome it?
The values can be accessed by the name of the input from request.POST. However, you're dynamically naming the inputs, which is going to make things more complicated when you go to retrieve those values.
Example without taking into consideration the dynamic naming:
quid1 = request.POST.get('quid1')
The problem might be with your browser rather than with django.
If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute.
Update: Oh, you are not using <button> elements, I read too fast. Sorry. Then this answer is not relevant.