인프런 커뮤니티 질문&답변

독자님. 아래처럼 해 보세요. element.setAttribute(속성명, 속성값)

modalFooter.setAttribute('href', '/todo/' + id + '/delete2/')

답변 감사합니다 !
제가 질문을 자세히 하지 않은 것 같아 다시 질문 드립니다.

모달창에 text를 띄우는 것까지는 완료하였지만,
삭제에 대한 작업이 정상적으로 이루어지지 않고 있습니다.

아래 코드 중 modalFooter.setAttribute = ('href', '/todo/' + id + '/delete2/')
에 해당하는 부분을 어떤 식으로 바꿔야 할지 알려주시면 감사하겠습니다 !

안녕하세요. 독자님.

bootstrap v5.2 에서는 data-bs-whatever 라는 키워드로 바뀌어서, data-xxx 가 아니라 data-bs-xxx 로 해줘야 합니다. 그래서 HTML 부분과 Javascript 부분을 아래와 같이 변경해 보세요.

data-bs-id="{{todo.id}}" data-bs-name="{{todo.name}}" data-bs-todo="{{todo.todo}}"

    const id = button.getAttribute('data-bs-id')
    const name = button.getAttribute('data-bs-name')
    const todo = button.getAttribute('data-bs-todo')

같은 질문입니다.

bootstrap 버전업 및 코드 수정하여
name에 따른 todo를 모달 창에 띄우는 것까진 해결하였으나, 삭제에 대한 방법을 모르겠어서 글 올립니다.

아래 html 파일 올려드립니다

{% extends 'base.html' %}

{% block title %}todo_from.html{% endblock %}
{% block extra-style %}
<title>Vue-Django ToDo App</title>

<style>
    body {
        text-align: center;
        background-color: #ddd;
    }
    .inputBox {
        margin: auto;
        width: 70%;
        background: white;
        height: 50px;
        border-radius: 50px;
        line-height: 50px;
    }
    .inputBox .name {
        border-style: none;
        border-bottom: 1px solid #ddd;
        width: 90px;
        padding-left: 20px;
        line-height: 20px;
    }
    .inputBox .item {
        border-style: none;
        border-bottom: 1px solid #ddd;
        width: 400px;
        margin-left: 50px;
        padding-left: 20px;
        line-height: 20px;
    }
    .todoList {
        list-style: none;
        padding: 10px 0;
        text-align: left;
    }
    .todoList li {
        display: flex;
        height: 50px;
        line-height: 50px;
        margin: 0.5rem 0;
        padding: 0 0.9rem;
        background: white;
        border-radius: 5px;
    }
    .removeBtn {
        margin-left: auto;
        font-size: 20px;
    }
    .removeBtn:hover{
        color: red;
    }
    .modal-footer a {
        color: white;
    }
</style>
{% endblock %}

{% block content %}
<div id='app'>

    <h1>My Todo App !</h1>
    <strong>서로 할 일이나 의견을 공유해 봅시다.</strong>
    <br>

    <form class="inputBox" action="." method="post"> {% csrf_token %}
        <input class="name" type="text" placeholder="name ..." name="name">
        <input class="item" type="text" placeholder="type anything welcomed ..."
            name="todo">
        <button type="submit" class="btn btn-info btn-sm">ADD</button>
    </form>

    <ul class="todoList">
        {% for todo in object_list %}
        <li>
            <span>{{ todo.name }}:: {{ todo.todo }}</span>
            <span class="removeBtn" data-bs-toggle="modal" data-bs-target="#myModal"
                  data-id="{{todo.id}}" data-name="{{todo.name}}" data-todo="{{todo.todo}}">&#x00D7</span>
        </li>
        {% endfor %}
    </ul>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fs-5" id="exampleModalLabel">Are you sure to delete ?</h5>
                </div>
                <div class="modal-body">
                    body-text
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger btn-sm"><a href="">Delete</a></button>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block extra-script %}
<script>

myModal.addEventListener('show.bs.modal', event => {
    const button = event.relatedTarget
    const id = button.getAttribute('data-id')
    const name = button.getAttribute('data-name')
    const todo = button.getAttribute('data-todo')

    const modalBody = myModal.querySelector('.modal-body')
    const modalFooter = myModal.querySelector('.modal-footer a')

    modalBody.textContent = name + '::' + todo
    modalFooter.setAttribute = ('href', '/todo/' + id + '/delete2/')
})
</script>
{% endblock %}

안녕하세요. 독자님.

부트스트랩 버전이 현재는 5.2 이군요. 독자님도 5.2 버전을 사용하고 계신가요 ?

예전 부트스트랩에서는 jQuery 를 사용했으나 현재는 jQuery 를 사용하지 않아서 발생하는 에러로 보입니다.

아래 사이트가 강의에서 사용한 모달의 v5.2 버전 소스 입니다. 소스가 비슷하니 (javascript 부분은 많이 바뀜), 강의를 참고해서 시도해 보기 바랍니다.

https://getbootstrap.com/docs/5.2/components/modal/#varying-modal-content

그래도 안되면 html 파일을 올려 주세요. 제가 실행해 보겠습니다.

감사합니다.