Modal 창 데이터 중복 오류 해결

저는 Django를 개발하면서 발생한 오류지만, template파일을 가져다가 사용하시는 분들이 접하기 쉬운 오류들인것 같아서 정리해놓습니다.

 

우선 모달 예제 코드를 한번 가져와 보겠습니다. 

아래 보시다시피, 저는 부트스트랩으로 Modal을 구현했는데요.

모달을 눌렀을 때 항상 같은 값이 나와서 뭐가 문제일까 하고 봤더니, 

 

Modal Button에 data-target = "#modal_default " 로 되어 있고

Modal Content의 id="modal_default" 로 되어 있죠?

 

이게 for문을 돌아서 자동 생성되도 항상 같은 값으로 가르키고 있기 때문에 가장 먼저 생성된 Modal 팝업을 보고 있는 문제더라구여

 

<!-- Button Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_default"><span class="mr-1">
        <span class="fas fa-file-invoice"></span>
    </span>
    자세히보기
</button>

<!-- Modal Content -->
<div class="modal fade" id="modal_defalut" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="h6 modal-title">{{item.title}}</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Modal 내용 삽입 구간</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link text-danger ml-auto" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
{% endfor %}

 

그래서 아래와 같이, 각각이 id에 고유 값들을 넣어 줘서 문제를 해결했습니다.

저는 장고를 사용하기 때문에 가져온 context data의 각 Id값으로 구분을 했는데, 여러분은 각자 편하신 고유값을 넣어주시면 될것 같아요!!

 

<!-- Button Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#{{item.id}}"><span class="mr-1">
        <span class="fas fa-file-invoice"></span>
    </span>
    자세히보기
</button>

<!-- Modal Content -->
<div class="modal fade" id="{{item.id}}" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="h6 modal-title">{{item.title}}</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Modal 내용 삽입 구간</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link text-danger ml-auto" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
{% endfor %}