삭제버튼과 추천기능 실행오류
상황 : 댓글,질문 삭제버튼은 만들어 졌으나 눌러도 아무런 반응이 없음 / 추천기능이 생겼으나 눌러도 아무 반응이 없음
(question_detail.html 소스 코드입니다.)
{% extends 'base.html' %}
{% load Ibot_filter %}
{% block content %}
<div class="container my-3">
<!-- 사용자오류 표시 -->
{% if messages %}
<div class="alert alert-danger my-3" role="alert">
{% for message in messages %}
<strong>{{ message.tags }}</strong>
<ul><li>{{ message.message }}</li></ul>
{% endfor %}
</div>
{% endif %}
<h2 class="border-bottom py-2">{{ question.subject }}</h2>
<div class="row my-3">
<div class="col-1"> <!-- 추천영역 -->
<div class="bg-light text-center p-3 border font-weight-bolder mb-1">{{question.voter.count}}</div>
<a href="#" data-uri="{% url 'Ibot:vote_question' question.id %}"
class="recommend btn btn-sm btn-secondary btn-block my-1">추천</a>
</div>
<div class="col-11"> <!-- 질문영역 -->
<div class="card">
<div class="card-body">
<div class="card-text">{{ question.content|mark }}</div>
<div class="d-flex justify-content-end">
{% if question.modify_date %}
<div class="badge badge-light p-2 text-left mx-3">
<div class="mb-2">modified at</div>
<div>{{ question.modify_date }}</div>
</div>
{% endif %}
<div class="badge badge-light p-2 text-left">
<div class="mb-2">{{ question.author.username }}</div>
<div>{{ question.create_date }}</div>
</div>
</div>
{% if request.user == question.author %}
<div class="my-3">
<a href="{% url 'Ibot:question_modify' question.id %}"
class="btn btn-sm btn-outline-secondary">수정</a>
<a href="#" class="delete btn btn-sm btn-outline-secondary"
data-uri="{% url 'Ibot:question_delete' question.id %}">삭제</a>
</div>
{% endif %}
<!-- 질문 댓글 Start -->
{% if question.comment_set.count > 0 %}
<div class="mt-3">
{% for comment in question.comment_set.all %}
<a name="comment_{{ comment.id }}"></a>
<div class="comment py-2 text-muted">
<span style="white-space: pre-line;">{{ comment.content }}</span>
<span>
- {{ comment.author }}, {{ comment.create_date }}
{% if comment.modify_date %}
(수정:{{ comment.modify_date }})
{% endif %}
</span>
{% if request.user == comment.author %}
<a href="{% url 'Ibot:comment_modify_question' comment.id %}" class="small">수정</a>,
<a href="#" class="small delete"
data-uri="{% url 'Ibot:comment_delete_question' comment.id %}">삭제</a>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
<div>
<a href="{% url 'Ibot:comment_create_question' question.id %}"
class="small"><small>댓글 추가 ..</small></a>
</div>
<!-- 질문 댓글 End -->
</div>
</div>
</div>
</div>
<h5 class="border-bottom my-3 py-2">{{question.answer_set.count}}개의 답변이 있습니다.</h5>
{% for answer in question.answer_set.all %}
<a name="answer_{{ answer.id }}"></a>
<div class="row my-3">
<div class="col-1"> <!-- 추천영역 -->
<div class="bg-light text-center p-3 border font-weight-bolder mb-1">{{answer.voter.count}}</div>
<a href="#" data-uri="{% url 'Ibot:vote_answer' answer.id %}"
class="recommend btn btn-sm btn-secondary btn-block my-1">추천</a>
</div>
<div class="col-11"> <!-- 답변영역 -->
<div class="card">
<div class="card-body">
<div class="card-text">{{ answer.content|mark }}</div>
<div class="d-flex justify-content-end">
{% if answer.modify_date %}
<div class="badge badge-light p-2 text-left mx-3">
<div class="mb-2">modified at</div>
<div>{{ answer.modify_date }}</div>
</div>
{% endif %}
<div class="badge badge-light p-2 text-left">
<div class="mb-2">{{ answer.author.username }}</div>
<div>{{ answer.create_date }}</div>
</div>
</div>
{% if request.user == answer.author %}
<div class="my-3">
<a href="{% url 'Ibot:answer_modify' answer.id %}"
class="btn btn-sm btn-outline-secondary">수정</a>
<a href="#" class="delete btn btn-sm btn-outline-secondary "
data-uri="{% url 'Ibot:answer_delete' answer.id %}">삭제</a>
</div>
{% endif %}
{% if answer.comment_set.count > 0 %}
<div class="mt-3">
{% for comment in answer.comment_set.all %}
<a name="comment_{{ comment.id }}"></a>
<div class="comment py-2 text-muted">
<span style="white-space: pre-line;">{{ comment.content }}</span>
<span>
- {{ comment.author }}, {{ comment.create_date }}
{% if comment.modify_date %}
(수정:{{ comment.modify_date }})
{% endif %}
</span>
{% if request.user == comment.author %}
<a href="{% url 'Ibot:comment_modify_answer' comment.id %}" class="small">수정</a>,
<a href="#" class="small delete"
data-uri="{% url 'Ibot:comment_delete_answer' comment.id %}">삭제</a>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
<div>
<a href="{% url 'Ibot:comment_create_answer' answer.id %}"
class="small"><small>댓글 추가 ..</small></a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<form action="{% url 'Ibot:answer_create' question.id %}" method="post" class="my-3">
{% csrf_token %}
{% if form.errors %}
<div class="alert alert-danger" role="alert">
{% for field in form %}
{% if field.errors %}
<strong>{{ field.label }}</strong>
{{ field.errors }}
{% endif %}
{% endfor %}
</div>
{% endif %}
<div class="form-group">
<textarea {% if not user.is_authenticated %}disabled{% endif %}
name="content" id="content" class="form-control" rows="10"></textarea>
</div>
<input type="submit" value="답변등록" class="btn btn-primary">
</form>
</div>
{% endblock %}
{% block script %}
<script type='text/javascript'>
$(document).ready(function(){
$(".delete").on('click', function() {
if(confirm("정말로 삭제하시겠습니까?")) {
location.href = $(this).data('uri');
}
});
$(".recommend").on('click', function() {
if(confirm("정말로 추천하시겠습니까?")) {
location.href = $(this).data('uri');
}
});
});
</script>
{% endblock %}
Chan 님 432
M 2021년 5월 5일 7:46 오후
템플릿에는 이상이 없어 보이는데요.. base.html 에서 jquery와 script 블럭등이 제대로 지정되었는지 모르겠네요.. base.html 도 보여주시면 좋을거 같습니다. 소스코드는 ''' 이 아니라 ``` (백쿼트 3개)로 감싸주셔야 합니다.
-
박응용님,
2021년 5월 5일 7:50 오후
추천
,
대댓글
(base.html 소스코드입니다.)
{% load static %}
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<!-- Ibot CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<title>Ibot</title>
</head>
<body>
{% include "navbar.html" %}
<!-- 기본 템플릿 안에 삽입될 내용 Start -->
{% block content %}
{% endblock %}
<!-- 기본 템플릿 안에 삽입될 내용 End -->
<!-- jQuery JS -->
<script src="{% static 'jquery-3.4.1.min.js' %}"></script>
<!-- Bootstrap JS -->
<script src="{% static 'bootstrap.min.js' %}"></script>
<!-- 자바스크립트 Start -->
{% block script %}
{% endblock %}
<!-- 자바스크립트 End -->
</body>
</html>
-
Chan님,
2021년 5월 6일 12:27 오후
추천
,
대댓글
@Chan님 문제가 없어 보이네요. 삭제 버튼에 'delete' 클래스가 적용되어 있기때문에 이벤트가 발생해야 하는데.. 자바 스크립트 이벤트가 왜 발생하지 않았는지부터 살펴 보셔야 할 것 같습니다. 브라우저 개발자 도구로 혹시 스크립트 오류가 있는지도 확인해 보세요.
-
박응용님,
2021년 5월 6일 12:51 오후
추천
,
대댓글
책에서 사용하는 jquerysms 3.4.1 버전인데 제가 다운받은 버전은 3.6.0 입니다 혹시 이것때문일까요?
-
Chan님,
2021년 5월 7일 6:50 오후
추천
,
대댓글
@Chan님 다운로드 받은 파일명과 base.html 에 있는 이름이 일치해야 합니다
-
박응용님,
2021년 5월 7일 7:21 오후
추천
,
대댓글