আমার উপর নির্ভরশীল ড্রপ-ডাউন সহ একটি ফর্ম রয়েছে। এই মাধ্যমিক ড্রপ-ডাউনটি লুকানো থাকে যখনই নির্বাচিত প্রাথমিক বিকল্পটিতে কোনও গৌণ বিকল্প থাকে না এবং যখন পৃষ্ঠাটি প্রথম লোড হয়। যখনই ফর্মটি জমা দেওয়া হবে, কেবলমাত্র প্রথম ক্ষেত্রটি সাফ হয়ে যায়, যেহেতু বেশিরভাগ সময় ড্রপ-ডাউনগুলি একই থাকে, তবে স্ক্রিপ্টটি যখনই প্রাথমিক ড্রপ-ডাউন-এ পরিবর্তন হয় তখনই কাজ করে, যেহেতু লোডটি চাপায় না কোনও পরিবর্তন গঠন করে না, এটি কেবল নির্বাচিত / জমা দেওয়া বিকল্পটিকে প্রাথমিক ড্রপ-ডাউনে রাখে এবং নির্বাচিত প্রাথমিক বিকল্পের মাধ্যমিক বিকল্প না থাকলেও কেবল একটি খালি গৌণ ড্রপ-ডাউন প্রদর্শিত হবে display আমি একটি টিউটোরিয়াল থেকে ড্রপ ডাউন থেকে বেশিরভাগ জেএস পেয়েছি, কারণ আমি এর সাথে খুব বেশি পরিচিত নই। আরও চাক্ষুষ বোঝার জন্য:
পৃষ্ঠাটি প্রথম লোড হওয়ার পরে এটি ফর্ম
যখন আপনি একটি বিকল্প নির্বাচন করেন যার মধ্যে মাধ্যমিক বিকল্প রয়েছে, অন্য ড্রপডাউন প্রদর্শিত হবে
আপনি কোনও স্টেশন নির্বাচন এবং জমা দেওয়ার পরে, কর্মচারী # সাফ হয়ে যায়, তবে অন্য দুটি থাকার কথা মনে করা হয়, যাইহোক, জমা দেওয়ার পরে পৃষ্ঠাটি পুনরায় লোড হয়ে গেলে এটি দেখতে এটির মতো মনে হয় এবং কোনও কিছুই না থাকায় স্টেশনটি ডিবাগার অনুযায়ী সাফ করা হয়েছে been টেকনিক্যালি। আমি স্টেশনটি সাফ করার বিষয়ে এতটা যত্ন নিই না, তবে খালি ড্রপ-ডাউন না করা সম্পর্কে আরও বেশি।
এবং যখন আমি ফর্মটিতে থাকা ডেটাটি দেখি তখন কেবল কাজের ক্ষেত্রটিই স্থিত থাকে কারণ আপনি ড্রপ ডাউন থেকে অন্য বিকল্পটি নির্বাচন না করা পর্যন্ত নির্ভরশীল ড্রপডাউন লোড হয় না এবং আপনি যদি আবার বক্স অ্যাসেম্বলি বিকল্পগুলি দেখতে সক্ষম হতে চান তবে , আপনাকে অন্য বিকল্পটি ক্লিক করতে হবে এবং তারপরে বক্স অ্যাসেমব্লিতে ফিরে যেতে হবে (উদাহরণস্বরূপ)
আমি কীভাবে এই সমস্যাটি সমাধান করতে পারব? জাভাস্ক্রিপ্টকে প্রথমে লোড করার চেষ্টা করার জন্য জোর করার কোনও উপায় আছে কি না তা পরীক্ষা করে দেখা যায় যে বিকল্পটি রয়ে গিয়েছে তাতে দ্বিতীয় বিকল্প রয়েছে কি না, এটি ট্রিগার হয়েছে কিনা?
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'),
]এই এইচটিএমএল শেষে স্ক্রিপ্ট যা নির্ভরশীল ড্রপ ডাউন পরিচালনা করে
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 %}