I've got a Django form that is displaying a ClearableFileInput for a CloudinaryImage (from Cloudinary). Things are working great, except when I display the form field, I get a mangled href in the anchor element:
Currently: <cloudinary.CloudinaryImage object at 0x10b3f4ad0> <input type="checkbox" name="logo-clear" id="logo-clear_id" /> <label for="logo-clear_id">Clear</label><br />Change: <input id="id_logo" type="file" name="logo" class="span4" />
Here is the template code I am using:
<div class="fieldWrapper">
<label for="id_logo"><h3>{{ form.logo.label }}:</h3></label>
{{ form.logo|add_class:"span4" }}
<p>{{ form.logo.help_text }}</p>
</div>
The add_class part come from django-widget-tweaks. I've taken the add_class part out with no change in the output.
Here is my form definition:
class OrganizationFormTheme(forms.ModelForm):
pass
class Meta:
fields = ('logo',)
model = Organization
It looks like Django is having problems with the CloudinaryImage's url function. I suspect it is looking for a simple property rather than a function.
Any suggestions on how to handle this? Should I subclass CloudinaryImage and rewrite the url function somehow?
Indeed there was a conflict between the url function and the url property.
We've changed the function to be build_url instead of url.
In addition, you can specify transformation parameters as the url_options parameter when calling the constructor of CloudinaryImage. Then you can use the url property for getting the full Cloudinary URL.
The fix is available in the latest release of the Python library: http://pypi.python.org/pypi/cloudinary
Related
I have a simple SplitDateTime field:
meeting_datetime_start = forms.SplitDateTimeField(input_date_formats=["%a %d/%m/%Y"], input_time_formats=["%I:%M %p"])
This renders the following HTML:
<input id="id_meeting_datetime_start_0" name="meeting_datetime_start_0" type="text">
<input id="id_meeting_datetime_start_1" name="meeting_datetime_start_1" type="text">
I am using bootstrap, and want to add a custom template to render this HTML differently, such as:
<div class="col-xs-2">
<input id="id_meeting_datetime_start_0" name="meeting_datetime_start_0" type="text">
</div>
<div class="col-xs-3">
<input id="id_meeting_datetime_start_1" name="meeting_datetime_start_1" type="text">
</div>
How can I modify the basic Django template for the SplitDateTimeField?
You have some possible solutions.
1. Subclass SplitDateTimeWidget and redefine it's render method
By subclassing that widget you can inject into result code anything you want. After that just simply use your own widget with default SplitDateTimeField
2. Create inputs in template by hand
Possibly simplest solution, but most ugly in my opinion. Create code in template by hand, using proper variables for name, id, value etc. You must add _0, _1 suffixes and format existing value by hand.
3. Create template tag that will inject additional divs
You can create some template tag or filter that will do some text operations on default template to add additional divs.
I have a decimal field in my form.
The input displays values like: 60.00
I want it to display: 60
I have tried:
{% load humanize %}
{{ form.amount|floatformat }}
I have also tried changing my form field to an integer:
class AmountInfoForm(forms.ModelForm):
amount = forms.IntegerField()
class Meta:
model = Customer
fields = ('amount',)
This causes the field to disappear.
What am I doing wrong?
I am afraid I see that you are applying floatformat to an input element and not to a valid numeric value. As a consequence, it fails to show and thus Django prefers not to show anything at all.
You could try this workaround then:
First of all, please try printing your form this way:
{{ form.as_table }}
If you look at the source code, you could see that, for example, the input for the field called name is displayed this way:
<input id="id_name" name="name" maxlength="25">
As a consequence, you can emulate this behaviour doing the following in your django template:
<input id="id_{{form.amount.label}}" name="{{form.amount.label}}" maxlength="25" value={{form.amount.value|floatformat:0}}>
Overall,the secret is to apply floatfomat to form.amount.value instead of form.amount.
Hope it works for you!
I am using Django and Bootrap 2.32. I want to include this wysiwyg-bootrap-themed text editor: http://mindmup.github.io/bootstrap-wysiwyg/. The usage of this editor is fairly simple, including
$('#editor').wysiwyg();
in the JS-declaration will render each
<div class=editor></div>
into a beatiful wysiwyg text-editor.
Now the problem: I want to include this editor into one of my django form field. I have the single form:
class Article_Form(ModelForm):
Article_text = CharField(widget=Textarea(attrs = {'id' : 'editor'}))
class Meta:
model= Article
, whereas the Article model includes one simple CharField . Is there any chance, to get the editor work inside the Article_text form-field? With the above-mentioned widget, the created textarea cannot be controlled by the wysiwyg-editor-control buttons. Wrapping the form-template-tag like this
<div id="editor">
{{ Article_Form.Article_text }}
</div>
doesn't work either. The problem thus is that Django creates a textarea, wheras the editor would need a <div> to render correctly. Do you guys have any idea how to get this to work (without refering to django-wysiwyg).
Thanks!
I don't know enough about Django but I wrote the editor you're referring to, so here's a suggestion. Assuming the other answer on this page is correct and you can't generate a div directly, you can generate a text area using whatever Django templates you would normally do, then assign two events:
1) page onload event that would copy the textarea contents into the div, something like
$('#editor').html($('#textarea').val())
2) form onsubmit event that would reverse copy the current div contents into the textarea before it gets submitted
$('#textarea').val($('#editor').html())
Take a look at this.
Summernote is a simple WYSIWYG editor based on Twitter's Bootstrap.
django-summernote plugin allows you to embed Summernote into your Django admin page very handy.
https://github.com/lqez/django-summernote
Are you sure that this "plugin" doesn't work with textarea?
{{ Article_Form.Article_text }}
will be rendered to something like:
<textarea cols="40" id="id_Article_text" name="Article_text" rows="10"></textarea>
So there is a chance that you can initialize the wysiwyg editor like:
$('#id_Article_text').wysiwyg();
However after checking the plugin, I doubt that would be possible since it is using contenteditable="true" attribute of HTML5 and probably the plugin works with div only.
So there is no way you can make it work natively with Django form. The solution should be display other fields of your form manually, hide the one with textarea and display the editor instead:
<form action="" method="POST">
{{ Article_Form.field1 }}
{{ Article_Form.field2 }}
<div class=editor></div>
{% csrf_token %}
<input type="submit" value="Submit" id="submit-btn" />
</form>
Then you can use JS to submit your form:
$('#submit-btn').click(function (e) {
e.preventDefault();
$.ajax({
// do your magic here.
// note that you can get the content of the editor with: $('#editor').cleanHtml();
})
});
This way is hackish I agree so I don't recommend you go for it, just find other plugin then. Also please read PEP 8 carefully.
Hope it helps.
Take a look at this repo: https://github.com/rochapps/django-secure-input
I think it solves most of your problems.
I'm trying to find a way to dynamically set default form values. So for example, if I add a facebook login feature on my webpage, and I can get his first name and last name from what the facebook javascript returns, I want to be able to set these values as the new "value" parameter in the given form. (basically so I'm able to put the user in my database)
I was hoping that there is some sort of
{{ form.firstname.default = Javascript.return.firstname }}
that I can insert into a template but there isn't...
Any ideas? Thank you.
Edit;; Maybe it would be better to first pass in the information into a views.py? But how would I do this? I am just considering hand writing the inputs out in the javascript field, which would be annoying...
You can set the default value of a template variable:
{{ form.firstname|default:Javascript.return.firstname }}
assuming that {{ Javascript.return.firstname }} is valid in that template context.
The code generated by Django is all server-side, its templates can't use anything which isn't available when the page is loaded. You need to use javascript to set the value.
For example, if your form looks like this:
<form id="login">
<input name="firstname" />
</form>
You could use this javascript (assuming you're using jQuery):
// Do the facebook login, set the var fname to the first name, then:
$('#login [name=firstname]').val(fname);
Is there any way to get the id of a field in a template?
In the HTML I get: <input name="field_name" id="id_field_name"...
I know I can get the name with {{ field.html_name }}, but is there anything similar for getting the id?
Or can I only get it like this: id_{{ field.html_name }}?
You can get the ID like this:
{{ field.auto_id }}
You can also use id_for_label:
{{ field.id_for_label }}
This doesn't work for every form field.
For instance {{ form.address.auto_id }} works while {{ form.address.auto_name }} will not.
However you can use {{ form.address.html_name }} to get the equivalent answer.
Here are the docs
From the documentation-
each form field has an ID attribute set to id_<field-name>
, which is referenced by the accompanying label tag. This is important in ensuring that forms are accessible to assistive technology such as screen reader software. You can also customize the way in which labels and ids are generated.
So I would like to say id_field-name , you collect the field name from the model.
Here is the link to the documentation
In Django 2 you can retrieve the ID for a specific field using {{ field.id_for_label }}
This is documented here.