jQuery | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

jQuery

undefined주차

정*기

・

추천

・

조회수

답변 완료

로그인 버튼 누르면 포스팅 박스 나오게 하고 싶은데 안나옵니다..!!

보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 상황을 이해할 수 있어요.

작성한 코드 및 에러 메세지

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1주차 프로젝트</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <style>
        .title {
            height: 200px;
            background-color: cornflowerblue;
            background-image: url("");
            background-position: center;
            background-size: auto;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .postbox {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;

            display: none;
        }

        .btn {
            margin-top: 20px;
        }
        .btns {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            margin-top: 20px;
        }
    </style>

    <script>
        // function savebtn() {
        //     alert('저장되었습니다');
        // }
        // function cancelbtn() {
        //     alert('취소되었습니다')
        // }

        $(document).ready(function () {
            show_commentList();
        });

        function open_box(){
            $('#postbox').show()
        }

        function savebtn() {
            let comment = $('#comment').val()

            $.ajax({
                type: "POST",
                url: "/project01",
                data: {'comment_give' : comment},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

        function show_commentList() {
            $.ajax({
                type: 'GET',
                url: '/project01',
                data: {},
                success: function (response) {
                    let rows = response['comment']
                    for (let i = 0; i < rows.length; i++) {
                        let comment = rows[i]['comment']

                        console.log(response)

                        let temp_html = `<div class="input-group">
                                            <span class="input-group-text">닉네임</span>
                                            <textarea class="form-control" aria-label="With textarea">${comment}</textarea>
                                        </div>`
                        $('#list-box').append(temp_html)
                    }
                }
            });
        }
    </script>
</head>

<body>
<div class="title">
    <h1>title</h1>
</div>
<button onclick="open_box()" type="button" class="btn btn-warning">로그인</button>
<div class="postbox">
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea">후기를 입력해 주세요.</label>
    </div>

    <div class="btns">
        <button onclick="savebtn()" type="button" class="btn btn-light">저장</button>
        <button onclick="cancelbtn()" type="button" class="btn btn-dark">취소</button>
    </div>
</div>

<div id="list-box">
</div>

</body>
</html>

댓글 알림