Hi I'm using django comments in one of my apps. I customized the comments framework to fit my needs. Everything works properly until I use dojo to make the textarea for the comments expandable http://dojotoolkit.org/reference-guide/1.7/dijit/form/Textarea.html#dijit-form-textarea. After adding the script the form throws an error after submitting: this field is required. So it seems django doesn't recognize the textarea as part of the form anymore.
in my template I use the standart comment tags:
{% render_comment_form for event %}
{% render_comment_list for event %}
When I'm adding the dojo script, the textarea gets expandable, but the form doesn't pass it's value anymore.
dojo.require("dijit.form.Textarea");
dojo.ready(function(){
var textarea = new dijit.form.Textarea({
name: "id_comment",
style: "width:200px;"
}, "id_comment");
});
dojo adds a bunch of classes to the textarea so that it looks like following. But it still got it's id and it's still a textarea isn't it?
<textarea autocomplete="off" data-dojo-attach-point="focusNode,containerNode,textbox" name="id_comment" class="dijitTextBox dijitTextArea dijitExpandingTextArea" style="overflow-y: hidden; overflow-x: auto; -moz-box-sizing: border-box; width: 200px; height: 36px;" tabindex="0" id="id_comment" widgetid="id_comment" value="" rows="1"></textarea>
After reading the answers for this question: Searching for the Ultimate Resizing Textarea. I thought this might the best way to go but unfortunatly it's not.
I'm wondering if it's just me. Is there a way to get this right or should I use a different method to make the field expandable.
Edit
with dojo the post looks like that:
content_type cylebrations.image
csrfmiddlewaretoken 24827190efbb5b7793aeadaf8276beed
honeypot
id_comment ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
object_pk 4
post Post
security_hash 8a091cfbf1e309627369069d4f71c21b33843a85
timestamp 1335209980
without dojo:
comment eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
content_type cylebrations.image
csrfmiddlewaretoken 24827190efbb5b7793aeadaf8276beed
honeypot
object_pk 4
post Post
security_hash e02d8261f528cfc0f22ee30ced820cfbb80715bc
timestamp 1335210114
Dojo overwrites the name of the textarea. I called it id_comment, instead of just comment. After changing that the post looks just fine and everything works like it should:
dojo.require("dijit.form.Textarea");
dojo.ready(function(){
var textarea = new dijit.form.Textarea({
name: "comment",
style: "width:200px;"
}, "id_comment");
});
Related
Im trying to figure out how to remove bullets from Django's MultipleChoiceField. So far I have tried this very popular solution by changing my css file that basically states to input this code in my css file
ul {
list-style-type: none;
}
This didnt work and I also tried:
li {
list-style-type: none;
}
This also didnt work. Is there something Django specific why the list keeps on showing up with bulletpoints? I also tried adding the style in my forms class but also without success
class SearchForm(forms.Form):
job_industry = forms.MultipleChoiceField(
widget=forms.CheckboxSelectMultiple(attrs={'class': 'form-check', 'style': 'list-style:none;'}),
choices=industry,
)
I noticed that whatever attrs I enter to the forms.CheckboxSelectMultiple it only gets passed to the <label> tag and not the <ul> or <li> tag of the list. Im using Bootstrap5 if that makes any difference.
How to delete bulletpoints from Django forms.MultipleChoiceField?
The problem turned out to be because of cache. Previously I set up memcache and had set the 'TIMEOUT': None Thats the reason why changing the css didnt have no effect
I'm working on a project with Django and a textarea. The textarea by default renders cols="40" and rows="10", which is not great for my page. I'm trying to use Django's widgets to change those attributes to 20 and 5 respectively. This is my code:
class NewContent(forms.Form):
content = forms.CharField(widget=forms.Textarea(attrs={"cols":20, "rows":5}))
Unfortunately, the code does not change the looks of the form at all when the page gets rendered. Meaning, it displays cols 40 and rows 10. But wait, things get really bizarre... when checking on the developer tools, on Google, I can see that the HTML code has changed to what I want! crazy!!
I also tried the following code that I found in a different chat:
attrs={"style": "height:60px; width:500px"}
Which "changes" the size of the box but... for different reasons I'm not in love with this solution.
Does anybody have an idea of what is happening here?
I have a windows 10 and use VEC.
Cheers!
you might have css style which defines width and height of your textarea
e.g.:
<html>
<head>
<style>
textarea {width: 100px; height:30px;}
</style>
</head>
<body>
<form>
<textarea cols="30" rows="5"></textarea><br/>
<textarea cols="40" rows="7"></textarea>
</form>
</body>
</html>
I also had the same issue with the Textarea. If I don't give any attrs value while creating the textarea.
pgContent = forms.CharField(widget=forms.Textarea)
It takes the default value of row=10 cols=40, defined in the django documentation for textarea. I cleared out the textarea row, col defined in css and I tried this
pgContent = forms.CharField(widget=forms.Textarea(attrs={'rows': 40, 'cols': 70})
No change in pg rendering. But the page source shows the new value of row, col.
I tried this and it worked.
attrs={"style": "height:60px; width:500px"}
css value supersedes the html value for row, col. I'm surprised why is it not taking the value defined in styles.css, which I have defined for textarea.
I want the user to select a number of elements belonging to a certain model. I don't want to use the default 'ctrl+click' input of django forms, but create a table of checkboxes myself.
For that reason I hide the ModelMultipleChoiceField by defining the widget:
field = forms.ModelMultipleChoiceField(..., widget=forms.MultipleHiddenInput())
Then I add the form element into the template as follows:
<form method="POST" class="locklist-form" id="locklist-form">{% csrf_token %}
{{ form.field }}
</form>
At this step, I expect the select-option elements to be added to HTML page (as hidden), so that I can reach to element options and modify them with javascript. However, it doesn't add anything to the HTML page.
I use this approach with other type of form fieds. For a TextField HTML page have a hidden element as shown:
Why doesn't it work with ModelMultipleChoiceField? How can I modify the choices of this field with Javascript?
Edit:
MultipleHiddenInput renders only if with initial data is a similar question. But applying it doesn't lead to the expected solution. In this question, it is expected to render the following as hidden:
But following the MultipleHiddenInput renders only if with initial data, when I modify the form constructor as:
form = MyForm(initial={'field':MyModel.objects.all()})
Rendered element is as follows:
It maybe useful, but not exactly the expected one. I need to mark a few options as selected, among a list of objects.
I have done it using Javascript, instead of depending on Django's capabilities. I add the form with ModelMultipleChoiceField directly to the template (not hidden). Then I run a Javascript script, when the page is loaded:
var field = document.getElementById('id_field');
selecter.setAttribute('class', 'hidden');
CSS definition of hidden class is as follows:
.hidden{
display: none;
}
This gets me to the desired situation. ModelMultipleChoiceField is rendered hidden as follows:
At this point, I can modify certain items through Javascript:
document.getElementById('id_field').options[index].selected = boolValue;
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 am trying to add an additional, hidden field to my simplecart items when using the simpleCart_shelfItem div. I've tried hidden inputs, additional spans, and can't get my attribute to show up in the JSON that's passed by Simplecarts form checkout.
Nothing fancy when I init simplecart:
// Init shopping cart
script(type='text/javascript')
simpleCart({
checkout: {
type: "SendForm",
url: "/cart/checkout"
},
currency: "USD",
cartStyle: "table"
});
Here's where I load a shelf item (note that this is using the Jade engine, but HTML is as expected):
div.simpleCart_shelfItem
p.item_name My Special Item
input.item_Quantity(type='text', value='1')
input.item_secretId(type='hidden', value='A hidden identifier')
br
span.item_price $0.99
br
a.item_add(href="javascript:;") Add to Cart
I've also tried using:
span.item_secretId A hidden identifier
And when I pass the cart to /cart/checkout secretId is nowhere to be found when I do a console log of req.body in my server-side code:
Checkout passed with: {"currency":"USD","shipping":"0","tax":"0","taxRate":"0","itemCount":"1","item_name_1":"4x6 Print","item_quantity_1":"4","item_price_1":"0.99","item_options_1":""}
I've seen the ability to add custom columns to the cart in the API docs, but I don't want this field to show up in the cart, it's strictly internal to facilitate server-side processing.
It's not particularly pretty, but I solved this by using div tags around my new data elements, and then hiding them in a stylesheet like this
HTML:
input(class="item_internalId", type='text', value='1234')
CSS:
input.item_internalId {
display: none;
}