मेरे पास एक आश्रित ड्रॉप-डाउन के साथ एक फॉर्म है। जब भी चयनित प्राथमिक विकल्प में कोई भी द्वितीयक विकल्प नहीं होता है, और जब पृष्ठ पहले लोड होता है, तो यह माध्यमिक ड्रॉप-डाउन छिपा होता है। जब भी फ़ॉर्म जमा किया जाता है, केवल पहला फ़ील्ड साफ़ हो जाता है, क्योंकि अधिकांश समय ड्रॉप-डाउन एक ही रहता है, हालाँकि, चूंकि स्क्रिप्ट तब भी काम करती है जब भी प्राथमिक ड्रॉप-डाउन में कोई बदलाव होता है, जब से लोड होता है एक परिवर्तन का गठन नहीं है, यह सिर्फ प्राथमिक ड्रॉप-डाउन पर चयनित / सबमिट किए गए विकल्प को रखता है, और केवल एक खाली माध्यमिक ड्रॉप-डाउन प्रदर्शित करेगा, तब भी जब चयनित प्राथमिक विकल्प में माध्यमिक विकल्प होते हैं। मुझे अधिकतर जेएस को एक ट्यूटोरियल से ड्रॉप-डाउन से मिला, क्योंकि मैं इससे बहुत परिचित नहीं हूं। अधिक दृश्य समझ के लिए:
यह वह रूप है जब पृष्ठ पहले लोड होता है
जब आप एक विकल्प चुनते हैं जिसमें माध्यमिक विकल्प होते हैं, तो दूसरी ड्रॉपडाउन दिखाई देती है
जब आप किसी स्टेशन का चयन करते हैं और सबमिट करते हैं, तो कर्मचारी # साफ़ कर देता है, लेकिन अन्य दो बने रहने वाले हैं, हालाँकि, जब पृष्ठ सबमिट करने पर पुनः लोड होता है, तो यह ऐसा दिखता है, और स्टेशन डिबगर के अनुसार साफ हो गया है क्योंकि कोई भी नहीं है तकनीकी रूप से। मैं स्टेशन के समाशोधन के बारे में इतना ध्यान नहीं देता, लेकिन खाली ड्रॉप-डाउन नहीं होने के बारे में अधिक जानकारी जो खाली नहीं होनी चाहिए।
और जब मैं उस डेटा को देखता हूं जो फॉर्म में बना हुआ है, केवल कार्य क्षेत्र बना हुआ है, क्योंकि आश्रित ड्रॉपडाउन तब तक लोड नहीं होता है जब तक आप ड्रॉप डाउन से एक अन्य विकल्प का चयन नहीं करते हैं, और यदि आप बॉक्स असेंबली विकल्पों को फिर से देखने में सक्षम होना चाहते हैं। , आपको एक अन्य विकल्प पर क्लिक करना होगा और फिर बॉक्स असेंबली में जाना होगा (उदाहरण के लिए)
मैं इस मुद्दे को कैसे ठीक कर सकता हूं? क्या जावास्क्रिप्ट को पहले लोड करने का प्रयास करने के लिए मजबूर करने का एक तरीका है ताकि यह जांच सके कि क्या जो विकल्प शेष है, उसके पास द्वितीयक विकल्प हैं, चाहे वह ट्रिगर किया गया हो या नहीं?
forms.py
class WarehouseForm(AppsModelForm):
class Meta:
model = EmployeeWorkAreaLog
widgets = {
'employee_number': ForeignKeyRawIdWidget(EmployeeWorkAreaLog._meta.get_field('employee_number').remote_field, site, attrs={'id':'employee_number_field'}),
}
fields = ('employee_number', 'work_area', 'station_number')
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['station_number'].queryset = Station.objects.none()
if 'work_area' in self.data:
try:
work_area_id = int(self.data.get('work_area'))
self.fields['station_number'].queryset = Station.objects.filter(work_area_id=work_area_id).order_by('name')
except (ValueError, TypeError):
pass
elif self.instance.pk:
self.fields['station_number'].queryset = self.instance.work_area.stations.order_by('name')views.py
def enter_exit_area(request):
enter_without_exit = None
exit_without_enter = None
if request.method == 'POST':
form = WarehouseForm(request.POST)
if form.is_valid():
emp_num = form.cleaned_data['employee_number']
area = form.cleaned_data['work_area']
station = form.cleaned_data['station_number']
# Submission logic
form = WarehouseForm(initial={'employee_number': '', 'work_area': area, 'station_number': station})
else:
form = WarehouseForm()
return render(request, "operations/enter_exit_area.html", {
'form': form,
'enter_without_exit': enter_without_exit,
'exit_without_enter': exit_without_enter,
})urls.py
urlpatterns = [
url(r'enter-exit-area/$', views.enter_exit_area, name='enter_exit_area'),
path('ajax/load-stations/', views.load_stations, name='ajax_load_stations'),
]इस HTML के अंत में वह स्क्रिप्ट है जो आश्रित ड्रॉप-डाउन को संभालती है
enter_exit_area.html
{% extends "operations/base.html" %}
{% block main %}
<form id="warehouseForm" action="" method="POST" data-stations-url="{% url 'operations:ajax_load_stations' %}" novalidate >
{% csrf_token %}
<div>
<div>
<label>Employee #</label>
{{ form.employee_number }}
</div>
<div>
<label>Work Area</label>
{{ form.work_area }}
</div>
<div class="col-xs-8" id="my-hidden-div">
<label>Station</label>
{{ form.station_number }}
</div>
</div>
</form>
<script>
function loadStations() {
var url = $("#warehouseForm").attr("data-stations-url");
var workAreaId = $(this).val();
var $stationNumberField = $("#{{ form.station_number.id_for_label }}");
$.ajax({
url: url,
data: {
'work_area': workAreaId
},
success: function (data) {
$("#my-hidden-div").show(); // show it
$stationNumberField.html(data);
// Check the length of the options child elements of the select
if ($stationNumberField.find("option").length === 1) {
$stationNumberField.parent().hide(); // Hide parent of the select node
} else {
// If any option, ensure the select is shown
$stationNumberField.parent().show();
}
}
});
}
$("#id_work_area").change(loadStations);
$(document).ready(loadStations);
</script>
{% endblock main %}station_number_dropdown_options.html
<option value="">---------</option>
{% for station in stations %}
<option value="{{ station.pk }}">{{ station.name }}</option>
{% endfor %}