У мене форма із залежним спадом. Це вторинне випадаюче меню приховується всякий раз, коли вибраний основний параметр не має жодних вторинних параметрів та коли сторінка спочатку завантажується. Щоразу, коли форма подається, видаляється лише перше поле, оскільки більшість часу спадні залишки залишаються однаковими, однак, оскільки сценарій працює, коли відбувається зміна первинного спадного меню, оскільки завантаження виконується не є зміною, він просто зберігає вибраний / поданий варіант у первинному спадному меню і просто відображатиме порожнє вторинне спадне меню, навіть якщо вибраний основний параметр має вторинні параметри. Я отримав більшу частину JS з випадаючого з підручника, оскільки я не дуже знайомий з цим. Для більш наочного розуміння:
Це форма при першому завантаженні сторінки
Коли ви вибираєте опцію, яка має вторинні параметри, з'являється інше спадне меню
Після вибору станції та подання заявки працівник № очищається, але інші два повинні залишатися, однак, коли сторінка перезавантажується після подання, це виглядає приблизно так, і станція буде очищена відповідно до налагоджувача, оскільки таких немає технічно. Мене так не хвилює очищення станції, а більше про те, щоб не було порожнього спаду, який не повинен бути порожнім.
І коли я дивлюся на дані, які залишилися у формі, залишилася лише робоча область, тому що залежне спадне меню не завантажується, поки ви не виберете інший варіант зі спадного меню, і якщо ви хочете мати можливість знову побачити параметри збірки коробки , вам потрібно буде натиснути інший варіант, а потім повернутися до Box Assembly (наприклад)
Як я можу виправити це питання? Чи є спосіб змусити javascript спробувати завантажити спочатку, щоб він перевірив, чи є у опції, що залишилася, є вторинні параметри, була вона запущена чи ні?
form.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 %}