230810 javascript this, modal, thymeleaf

html 선택한 요소 내용물

html 파일 내 script

<li class="list-group-item" id="${boardId}">${boardName}</li>

$(document).on("click", ".list-group-item", function () {
        var clickedBoardId = $(this).attr('id');
        var clickedBoardName = $(this).text();

        console.log('Clicked Board ID:', clickedBoardId);
        console.log('Clicked Board Name:', clickedBoardName);
})

java와 유사하게 this를 사용하면 선택한 요소의 id와 속의 text를 가져올 수 있다.

thymeleaf

view controller

	@GetMapping("/mypage")
    public String getMyPage(Model model, @AuthenticationPrincipal UserDetailsImpl userDetails) {
        LoginUserProfileDto profileDto = new LoginUserProfileDto(userDetails.getUser());
        model.addAttribute("profile", profileDto);
        return "mypage";
    }

mypage.html

<h2><span id="nickname" th:text="${profile.nickname}">${profile.nickname}</span>의 페이지</h2>
    <p><span id="username" th:text="${profile.username}">${profile.username}</span></p>

전에는 text만 model로 전달했었는데
이렇게 dto를 만들어 통째로 보내는 것도 가능하다.

현재 로그인 된 유저의 정보가 마이페이지에 반영될 수 있도록 했다.

modal

script

const changeNicknameButton = document.getElementById('changeNickname');
    const closeNicknameModalButton = document.getElementById('closeNicknameModal');
    const registerNicknameModal = document.getElementById('registerNicknameModal');
    const nicknameModalOverlay = document.getElementById('nicknameModalOverlay');

    changeNicknameButton.addEventListener('click', function () {
        registerNicknameModal.style.display = 'block';
        nicknameModalOverlay.style.display = 'block';
    });
    closeNicknameModalButton.addEventListener('click', function () {
        registerNicknameModal.style.display = 'none';
        nicknameModalOverlay.style.display = 'none';
    });

modal은 'display=none'과 'display=block'으로 사용할 수 있다.
(none으로 시작)

2중 ajax

$.ajax({
            url: 'http://localhost:8080/api/boards/' + clickedBoardId + '/columns',
            type: 'GET',
            contentType: 'application/json',
            headers: {
                'Authorization': document.cookie // 클라이언트 쿠키의 값을 전달
            },
            success: function (response) {
                console.log(response);
                let temp_htmls = '';
                $('#listContainer').empty();

                response.forEach((a) => {
                    let columnId = a['id'];
                    let columnTitle = a['title'];


                    let temp_html = `
                        <div class="list" id="${columnId}" draggable="true">
                            <div class="list-header">${columnTitle}
                                   <button onclick="DeleteColumnBtn(${columnId})" style="float: right; margin-right: 5px;" class="bi bi-trash3 fs-20"></button>
                                   <button onclick="modifyColumnBtn(${columnId})" style="float: right; margin-right: 5px;" class="bi bi-pencil fs-20"></button>
                            </div>

                            <div class="card" draggable="true">Card 1</div>
                            <div class="card" draggable="true">Card 2</div>
                        </div>
                    `;

                    temp_htmls += temp_html;
                });
                console.log('forEach문 끝');
                $('#listContainer').append(temp_htmls);
            },
            error: function () {
                console.log('AJAX 요청 실패');
            }
        });

column 속 card들도 붙여오려면 2중으로 ajax 요청을 보내야 할 것 같다.
아직 해결하지 못함.