英文:
Update dropdown button without submit button in Django
问题
现在的视图函数是这样的：
@user_login_required
def view_usecase_details(request, ucid):
usecase_details = Usecase.objects.filter(usecase_id=ucid).all()
usecase_details = usecase_details.prefetch_related("usecaseids")
uckpi = Kpi.objects.all()
context = {'usecase_details': usecase_details, "uckpi": uckpi}
return render(request, 'UsecaseDetails.html', context)
模板部分是这样的：
{% if usecase_details is not none and usecase_details %}
<div class="card card-body shadow-sm mb-4 mb-lg-0">
{% for result in usecase_details %}
<div class="d-flex align-items-center">
<svg class="mr-svg stc-color" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark-fill" viewBox="0 0 16 16">
<path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"></path>
</svg>
<h2 class="header-card h5">{{result.usecase_id}} - {{result.usecase_name}}</h2>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
<div>
<h3 class="h6 mb-1 mt-15">Usecase description:</h3>
<p class="small pe-4">{{result.usecase_description}}</p>
</div>
</li>
</ul>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
<div class="btn-group">
<button type="button" class="btn btn-secondary">KPI: {{result.kpi.kpi_name}}</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="icon icon-xs" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<ul class="dropdown-menu">
{% for kpi in uckpi %}
<li><a class="dropdown-item">{{kpi.kpi_name}}</a></li>
{% endfor %}
</ul>
</div>
</li>
</ul>
{% endfor %}
</div>
{% endif %}
英文:
I'm using Django and I have dropdown button that shows the current selected value and the rest of items in dropdown list.
How can I make the user change the selection and reflect that change on the db without having to press update button.
My models are usecase, and kpi (fk of usecase)
my views.py:
@user_login_required
def view_usecase_details(request,ucid):
usecase_details = Usecase.objects.filter(usecase_id=ucid).all()
usecase_details = usecase_details.prefetch_related("usecaseids")
uckpi = Kpi.objects.all()
context = {'usecase_details': usecase_details, "uckpi": uckpi}
return render(request, 'UsecaseDetails.html', context)
my template:
{% if usecase_details is not none and usecase_details %}
<div class="card card-body shadow-sm mb-4 mb-lg-0">
{% for result in usecase_details %}
<div class="d-flex align-items-center">
<svg class="mr-svg stc-color" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark-fill" viewBox="0 0 16 16">
<path d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"></path>
</svg>
<h2 class="header-card h5">{{result.usecase_id}} - {{result.usecase_name}}</h2>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
<div>
<h3 class="h6 mb-1 mt-15">Usecase description:</h3>
<p class="small pe-4">{{result.usecase_description}}</p>
</div>
</li>
</ul>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
<div class="btn-group">
<button type="button" class="btn btn-secondary">KPI: {{result.kpi.kpi_name}}</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<svg class="icon icon-xs" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<ul class="dropdown-menu">
{% for kpi in uckpi %}
<li><a class="dropdown-item">{{kpi.kpi_name}}</a></li>
{% endfor %}
</ul>
</div>
</li>
</ul>
{% endfor %}
</div>
{% endif %}
答案1
得分: 1
你可以在选择项上点击时触发一个事件，该事件将向后端发送一个带有所需数据的请求，然后在那里更新数据库。
英文:
You can make an event on click the item in the select, this event will send a request to the backend with the data you want and there you will update the db.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论