html, Django -更新部分页面

Question

我已经开始使用html，我想用它来刷新部分页面后按下弹出页面上的按钮。按钮将添加单击用户作为事件参与者。我正在看真正的教程和例子，这些教程和例子主要是关于表单的，我不知道如何处理这个更新。

我很确定我应该使用hx-ws，但我完全不清楚如何使用。

challenge -interface.html(这里是我想更新的一部分)

{% load static %}
{% load tagz %}
<div id='chall-interface' class="card-bottom mb-2">
<button onclick="call('challFollows',{'id':'{{chall.id}}'}, this)" class='icon icon-s rounded-sm float-end background-transparent mb-2 me-1 color-white'><i  class="font-12 fa fa-heart {% followedChall user chall %}"></i></button>
<button href="#" data-menu="comment-section"  class="icon icon-s rounded-sm float-end background-transparent mx-1 mb-2">
<i class="font-12 fa fa-comments color-white"></i>
</button>
{% if chall.dealine_is_over %}
<button href="#" data-menu="rules" class="icon icon-s rounded-sm float-end background-transparent mx-1 mb-2">
<i class="font-12 fa color-white {% changeJoinButton user chall %}""></i>
</button>
<!-- Here is a code I'm asking about -->
{% if user == userParticipationStatus.user %}
<a href="/addResponse/{{chall.id}}" class="icon icon-s rounded-sm float-end background-transparent mx-1 mb-2">
<i class="font-12 fa fa-plus-square color-white"></i>
</a>
{% else %}
{% endif %}
<!-- Here is a code I'm asking about -->
{% if chall.user == user %}
<button class="icon icon-s rounded-sm float-end background-transparent mx-1 mb-2">
<i class="font-12 fa fa-pen color-white"></i>
</button>
{% else %}
{% endif %}
{% else %}
{% endif %}
<div class="card-bottom mb-1 w-25">
{% if chall.profile.id == None %}
<a href='#'><img src="{% static 'images/avatars/5s.png' %}" class="float-start border border-white bg-yellow-light rounded-circle ms-3" width="35"></a>
{% elif chall.user == user %}
<a href='/profile/'><img src="{% static 'images/avatars/5s.png' %}" class="float-start border border-white bg-yellow-light rounded-circle ms-3" width="35"></a>
{% else %}
<a href='/userProfile/{{chall.profile.id}}'><img src="{% static 'images/avatars/5s.png' %}" class="float-start border border-white bg-yellow-light rounded-circle ms-3" width="35"></a>
{% endif %}
<span class="float-start mx-3"><i>{{chall.profile.nickname}}</i></span>
</div>
</div>

添加为{% include "include/challenge -interface.html"%}在主HTML文件中，从其中激活弹出窗口

这是一个弹出式

{% load tagz %}
<div id="rules" class="menu menu-box-modal rounded-m" data-menu-width="350">
<div class="card card-style" style="margin: 0px !important">
<div class="content">
<strong class="font-12 mx-1">Rules</strong>
<span class="color-theme font-14 d-block mx-1">{{chall.rules}}</span>
<!-- This is the button -->
<button  onclick="call('challParticipates',{'id':'{{chall.id}}'}, this)" class="close-menu btn btn-m float-end rounded-xl shadow-xl text-uppercase font-800 bg-highlight mx-1 my-2"><i>{% changeJoinButton2 user chall %}</i></button>
<!-- This is the button -->
<button data-bs-dismiss="modal" class="close-menu btn btn-m float-end rounded-xl shadow-xl text-uppercase font-800 bg-highlight mx-1 my-2"><i>Exit</i></button>
</div>
</div>
</div>

这是一个由按钮激活的呼叫功能:

function call(url, info, element) {
eventStatus = false
fetch("/"+url+"/", {
method: 'POST',
headers: {'X-CSRFToken': getCookie('csrftoken')},
body: JSON.stringify(info)
}).then(response => response.text())
.then(responseData => {
dataParsed = JSON.parse(responseData);
console.log(dataParsed)
if (dataParsed.eventStatus) {
element.firstElementChild.classList.add("color-gold");
element.firstElementChild.classList.remove("color-white");
}
else {
element.firstElementChild.classList.remove("color-gold");
element.firstElementChild.classList.add("color-white");
}
})
.catch(err => {
// if any error occured, then catch it here
console.error(err);
});
}

View.py

class ChallView(LoginRequiredMixin, TemplateView):
login_url = '/chalth/login'
redirect_field_name = ''
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
chall = Chall.objects.get(id=kwargs.get("id"))
context['chall'] = chall
currentUser = self.request.user
context['userParticipationStatus'] = Participates.objects.filter(user = currentUser, chall = chall).first()
return context
@login_required(login_url = '/chalth/login')
def ChallParticipatesView(request):
data = json.loads(request.body)
id = data.get("id", False)
if id:
challParticipate = Participates.objects.filter(chall_id=id, user=request.user).first()
eventStatus = False
if challParticipate:
challParticipate.delete()
eventStatus = False
else:
challParticipate=Participates()
chall = Chall.objects.get(id=id)
eventStatus = True
if chall:
challParticipate.chall = chall
challParticipate.user = request.user
challParticipate.save()
else:
return HttpResponse(status = 400)
else:
return HttpResponse(status = 400)
return HttpResponse(json.dumps({"eventStatus": eventStatus, "id": id}), status = 200)

Answer 1

就我对你的代码的理解而言，我看不到htmx的作用。

我建议你先尝试使用内联方式，例如:

<button hx-post="/clicked"
hx-trigger="click"
hx-target="#parent-div"
hx-swap="outerHTML"
>
Click Me!
</button>

查看您的问题是否关于:

• 不返回有效HTML的服务器
• 返回错误(将停止交换)的服务器
• htmxapi的错误使用

还要确保知道属性:

• hx-trigger
• hx-target
• hx-swap

。

希望对您有所帮助😊