मेरे पास एक इनपुट फ़ील्ड है जिसे टेम्पलेट के साथ प्रस्तुत किया गया है जैसे:
<div class="field">
{{ form.city }}
</div>
जिसका प्रतिपादन इस प्रकार है:
<div class="field">
<input id="id_city" type="text" name="city" maxlength="100" />
</div>
अब मान लीजिए कि मैं autocomplete="off"प्रस्तुत किए गए इनपुट तत्व में एक विशेषता जोड़ना चाहता हूं , तो मैं यह कैसे करूंगा? या onclick="xyz()"या class="my-special-css-class"?
जवाबों:
city = forms.CharField(widget=forms.TextInput(attrs={'autocomplete':'off'}))विज्ञापन के लिए क्षमा करें, लेकिन मैंने हाल ही में एक ऐप ( https://github.com/kmike/django-widget-tweaks ) जारी किया है, जो ऐसे कार्यों को और भी कम दर्दनाक बनाता है, ताकि डिजाइनर अजगर कोड को छुए बिना ऐसा कर सकें:
{% load widget_tweaks %}
...
<div class="field">
{{ form.city|attr:"autocomplete:off"|add_class:"my_css_class" }}
</div>
या, वैकल्पिक रूप से,
{% load widget_tweaks %}
...
<div class="field">
{% render_field form.city autocomplete="off" class+="my_css_class" %}
</div>
यदि आप "ModelForm" का उपयोग कर रहे हैं:
class YourModelForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(YourModelForm, self).__init__(*args, **kwargs)
self.fields['city'].widget.attrs.update({
'autocomplete': 'off'
})
यदि आप उपयोग कर रहे हैं ModelForm, तो __init__उसके जवाब में @Artificioo के रूप में उपयोग करने की संभावना के अलावा, इस widgetsमामले में मेटा में एक शब्दकोश है:
class AuthorForm(ModelForm):
class Meta:
model = Author
fields = ('name', 'title', 'birth_date')
widgets = {
'name': Textarea(attrs={'cols': 80, 'rows': 20}),
}
मैं इस चीज़ के लिए एक संपूर्ण ऐप का उपयोग नहीं करना चाहता था। इसके बजाय मुझे यहाँ निम्न कोड मिला https://blog.joeymasip.com/how-to-add-attributes-to-form-widgets-in-django-templates/
# utils.py
from django.template import Library
register = Library()
@register.filter(name='add_attr')
def add_attr(field, css):
attrs = {}
definition = css.split(',')
for d in definition:
if ':' not in d:
attrs['class'] = d
else:
key, val = d.split(':')
attrs[key] = val
return field.as_widget(attrs=attrs)HTML फ़ाइल में टैग का उपयोग करें
{% load utils %}
{{ form.field_1|add_attr:"class:my_class1 my_class2" }}
{{ form.field_2|add_attr:"class:my_class1 my_class2,autocomplete:off" }}
मैंने Django रूपों में मॉडल बनाने और अद्यतन करने के लिए पुन: प्रयोज्य प्रपत्र टेम्पलेट बनाने की कोशिश करते हुए काफी दिन बिताए हैं। ध्यान दें कि ऑब्जेक्ट को बदलने या बनाने के लिए ModelForm का उपयोग कर रहा है। मेरे रूपों को स्टाइल करने के लिए भी बूटस्ट्रैप का उपयोग कर रहा हूँ। मैंने अतीत में कुछ रूपों के लिए django_form_tweaks का उपयोग किया था, लेकिन मुझे बहुत अधिक टेम्पलेट निर्भरता के बिना कुछ अनुकूलन की आवश्यकता थी। चूंकि मेरे प्रोजेक्ट में पहले से ही jQuery है, इसलिए मैंने अपने रूपों को स्टाइल करने के लिए इसके गुणों का लाभ उठाने का फैसला किया। यहाँ कोड है, और किसी भी रूप के साथ काम कर सकते हैं।
#forms.py
from django import forms
from user.models import User, UserProfile
from .models import Task, Transaction
class AddTransactionForm(forms.ModelForm):
class Meta:
model = Transaction
exclude = ['ref_number',]
required_css_class = 'required'Views.py
@method_decorator(login_required, name='dispatch')
class TransactionView(View):
def get(self, *args, **kwargs):
transactions = Transaction.objects.all()
form = AddTransactionForm
template = 'pages/transaction.html'
context = {
'active': 'transaction',
'transactions': transactions,
'form': form
}
return render(self.request, template, context)
def post(self, *args, **kwargs):
form = AddTransactionForm(self.request.POST or None)
if form.is_valid():
form.save()
messages.success(self.request, 'New Transaction recorded succesfully')
return redirect('dashboard:transaction')
messages.error(self.request, 'Fill the form')
return redirect('dashboard:transaction')HTML कोड नोट: कई दृश्य बनाने की परेशानी को दूर करने के लिए bootstrap4 modal का उपयोग कर रहा हूँ। शायद यह सामान्य CreateView या UpdateView का उपयोग करने के लिए बेहतर है। लिंक बूटस्ट्रैप और jqQery
<div class="modal-body">
<form method="post" class="md-form" action="." enctype="multipart/form-data">
{% csrf_token %}
{% for field in form %}
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label for="" class="col-sm-4 col-form-label {% if field.field.required %}
required font-weight-bolder text-danger{%endif %}">{{field.label}}</label>
<div class="col-sm-8">
{{field}}
</div>
</div>
</div>
</div>
{% endfor %}
<input type="submit" value="Add Transaction" class="btn btn-primary">
</form>
</div>जावास्क्रिप्ट कोड को $(document).ready(function() { /* ... */});फ़ंक्शन में लोड करना याद रखें ।
var $list = $("#django_form :input[type='text']");
$list.each(function () {
$(this).addClass('form-control')
});
var $select = $("#django_form select");
$select.each(function () {
$(this).addClass('custom-select w-90')
});
var $list = $("#django_form :input[type='number']");
$list.each(function () {
$(this).addClass('form-control')
});
var $list = $("form :input[type='text']");
$list.each(function () {
$(this).addClass('form-control')
});
var $select = $("form select");
$select.each(function () {
$(this).addClass('custom-select w-90')
});
var $list = $("form :input[type='number']");
$list.each(function () {
$(this).addClass('form-control')
});