항해99/출항 준비

사전 스터디 프로젝트 (4)

숲별 2022. 9. 5. 14:10
728x90

수정, 삭제하기에서 취소눌렀을 때

window.location.reload()

없애고 싶어서 만져보다가 수정, 삭제 버튼을 취소하기 안 누르고 계속 누르면 밑에 계속 붙는 현상을 발견했었다.

 

취소하기에서 .empty()를 쓰면 reload 안하고 hide로만 끝낼 수 있다길래 넣어보다가

 

그럼 show 전에도 .empty 먼저 쓰고 show 불러오면 밑에 계속 안 붙게 할 수 있을 거 같아서 넣어보았다.

일타이피라니 좋구만!!

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta property="og:title" content="여행지 추천 | 봄🌼" />
<meta property="og:description" content="봄 여행지 기록" />
<meta property="og:image" content="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxUGnK%2FbtrJSmYYVQ0%2FwuctjLmh7hevnE4zOyHbl1%2Fimg.jpg"/>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

<title>여행지 추천 | 봄🌼</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
            }
        .mytitle {

            width: 100%;
            height: 250px;

            color: white;

            text-align: center;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxUGnK%2FbtrJSmYYVQ0%2FwuctjLmh7hevnE4zOyHbl1%2Fimg.jpg");
            background-size: cover;
            background-position: center;
        }
        .head {
            position: sticky;
            top:0px;
            width: 100%;
            z-index:1;
        }
        .winter {
            height: 195px;
             display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
        }

        .winter > button {
            width: 150px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 20px;

            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .winter > button:hover {
            border: 2px solid white;
        }
        .page {
            height: 30px;
            float: right;
            margin: 15px 20px 0px 0px;
        }


        .mypost {
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0 auto;

            box-shadow: 0px 0px 3px 0px gray;

            padding: 20px;

            display: none;
            background-color: white;
        }
        .mybtn {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

             margin-top: 10px;

        }
        .mybtn > button {
            margin-right: 10px;
        }
        .wrap {
            max-width : 1200px;
            margin: 20px auto 0px auto;
        }
        .change {

            display: flex;
            flex-direction: row;
        }
        .change > button {

            margin-left: auto;

            height: 30px;

            border: 1px solid white;

        }

        .myedit {
           background-color: gray;
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0 auto;

            box-shadow: 0px 0px 3px 0px gray;

            padding: 20px;

            display: none;

        }
        .btns {
            margin-left: auto;
        }
        .btns > button {
             border: 1px solid white;
            font-size: small;
        }
        .delete {

            background-color: white;
            max-width: 500px;
            width: 95%;

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

            margin: 20px auto 0 auto;

            box-shadow: 0px 0px 3px 0px gray;

            border-radius: 5px;

            padding: 30px;

            display: none;

        }
        .delete_btns {
            margin-top: 20px;
        }
        .delete_btns > button {
            margin-right: 10px;
        }



    </style>
    <script>

        function open_box() {
            $('#post-box').show()
        }

        function close_box() {
            $('#post-box').hide()
        }

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

        function show_order() {
            $.ajax({
                type: 'GET',
                url: '/spring',
                data: {},
                success: function (response) {
                    let rows = response['springs']
                    for (let i = 0; i < rows.length; i++) {
                        let num = rows[i]['num']
                        let img = rows[i]['img']
                        let title = rows[i]['title']
                        let food = rows[i]['food']

                        let temp_html = ` <div class="col">
                                                <div class="card">
                                                    <img src="${img}" class="card-img-top" alt="..." style="height:230px;">
                                                    <div class="card-body">
                                                        <div class="change">
                                                            <h5 class="card-title">${title}</h5>
                                                            <div class="btns">
                                                                     <button onclick="open_edit(${num})" type="button" class="btn btn-outline-secondary btn-sm">
                                                                            수정
                                                                     </button>
                                                                     <button onclick="delete_edit(${num})" type="button" class="btn btn-outline-secondary btn-sm">
                                                                            삭제
                                                                    </button>
                                                            </div>
                                                         </div>

                                                            <p class="card-text">
                                                            ${title}')">
                                                                정보
                                                            </button>
                                                            </p>
                                                                   <class="card-text", small class="text-muted">근처 맛집</small>
                                                        <p class="card-text"><small class="text-muted">${food}</small></p>
                                                    </div>
                                                </div>
                                            </div>`
                        $('#cards-box').append(temp_html)
                    }
                }
            });
        }

        function save_order() {
            let img = $('#img').val()
            let title = $('#title').val()

            let food = $('#food').val()

            if(img === '' || title === '' || food === '') {
                alert('빈칸을 입력해 주세요🌼')
            } else {
                $.ajax({
                    type: 'POST',
                    url: '/spring',
                    data: {img_give: img, title_give: title, food_give: food},
                    success: function (response) {
                        alert(response['msg'])
                        window.location.reload()
                    }
                });
            }
        }


        function delete_edit(num) {
            $('#delete-box').empty()
            $('#delete-box').show()


            temp_html = `<h3>삭제하시겠습니까?</h3>
                <div class="delete_btns">
                    <button onclick="delete_btn(${num})" type="button" class="btn btn-outline-dark ">삭제</button>
                    <button onclick="cancel_btn()" type="button" class="btn btn-dark ">취소</button>
                </div>`

            $('#delete-box').append(temp_html)

        }


         function delete_btn(num) {

                 $.ajax({
                type: "POST",
                url: "/delete",
                data: {num_give: num},
                success: function (response) {
                    alert(response["msg"])

                    window.location.reload()
                }
                 });
         }


            function cancel_btn() {
                $('#delete-box').empty()
                $('#delete-box').hide()

            }


        function open_edit(num) {
            $('#edit-box').empty()
            $('#edit-box').show()


            $.ajax({
                type: 'GET',
                url: '/spring',
                data: {},
                success: function (response) {
                    let rows = response['springs']
                    for(let i = 0; i < rows.length; i++) {
                        let num1 = rows[i]['num']
                        let img = rows[i]['img']
                        let title = rows[i]['title']
                        let food = rows[i]['food']

                        let temp_html = ``

                        if(num === num1) {
                            temp_html = ` <div class="form-floating mb-3">
                                            <input type="text" class="form-control" id="img_e" value="${img}" placeholder="name@example.com">
                                            <label for="img">사진 URL</label>
                                        </div>
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control" id="title_e" value="${title}" placeholder="name@example.com">
                                            <label for="title">이름</label>
                                        </div>
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control" id="food_e" value="${food}" placeholder="name@example.com">
                                            <label for="food">맛집이름(추천메뉴)로 적어주세요</label>
                                        </div>

                                         <div class="mybtn">
                                                        <button onclick="edit_order(${num})" type="button" class="btn btn-dark">수정하기</button>
                                                        <button onclick="close_edit()" type="button" class="btn btn-outline-dark">닫기</button>
                                                    </div>`
                        } else {
                            temp_html = ``
                        }
                         $('#edit-box').append(temp_html)

                    }



                }
            })

        }

        function close_edit() {
            $('#edit-box').empty()
            $('#edit-box').hide()

        }


        function edit_order(num) {

            let img = $('#img_e').val()
            let title = $('#title_e').val()
            let food = $('#food_e').val()

                 $.ajax({
                type: "POST",
                url: "/save/edit",
                data: {num_give: num, img_give: img, title_give: title, food_give: food},
                success: function (response) {
                    alert(response["msg"])

                    window.location.reload()
                }
                 });
        }

    </script>

</head>

<body>
    <div class="head">
        <div class="mytitle">
            <div class="winter">
                <h1>봄(Spring)</h1>
                <button onclick="open_box()">기록하기</button>

            </div>

            <div class="page">
                <button onclick="location.href='http://forestar.shop/springtrip'" type="button"
                        class="btn btn-outline-light btn-sm">
                    봄
                </button>
                <button onclick="location.href='http://sels-es.shop/'" type="button" class="btn btn-outline-light btn-sm">
                    여름
                </button>
                <button onclick="location.href='http://alstjq-prac.shop/'" type="button"
                        class="btn btn-outline-light btn-sm">
                    가을
                </button>
                <button onclick="location.href='http://sparta4.shop/'" type="button" class="btn btn-outline-light btn-sm">
                    겨울
                </button>
            </div>
        </div>

        <div class="mypost" id="post-box">
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="img" placeholder="name@example.com">
                <label for="img">사진 URL</label>
            </div>
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="title" placeholder="name@example.com">
                <label for="title">이름</label>
            </div>

            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="food" placeholder="name@example.com">
                <label for="food">맛집이름(추천메뉴)로 적어주세요</label>
            </div>

            <div class="mybtn">
                <button onclick="save_order()" type="button" class="btn btn-dark">기록하기</button>
                <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
            </div>
        </div>


         <div class="myedit" id="edit-box">

        </div>

        <div class="delete" id="delete-box">

        </div>

    </div>




    <div class="wrap">
        <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">

        </div>
    </div>



</body>
</html>

empty() 이 별 거 아닌 기능을 몰라서... 역시.. 응용은 다양한 경험에서 나오는 법인가..

블록이 있어야 형태도 만들어볼 수 있고 단어를 알아야 영어도 쓸 수 있는 거지.

'항해99 > 출항 준비' 카테고리의 다른 글

항해99 입학 시험과 언어 선택  (0) 2022.09.15
사전 스터디 프로젝트 (3)-참고  (0) 2022.08.24
사전 스터디 프로젝트(3)  (0) 2022.08.24
사전스터디 프로젝트(2)  (0) 2022.08.19
사전스터디 프로젝트 내 파트 페이지  (0) 2022.08.17

'항해99/출항 준비'의 다른글

  • 현재글사전 스터디 프로젝트 (4)

관련글

티스토리툴바