문제

기록하여 코멘트를 등록하고, 그 코멘트 옆 완료 버튼을 누르게 되면
줄이 그어진다. 그런데 이것을 취소하고 싶다면?

시도

1. python과 js를 나눠서 작업을 한다.

• python : 코멘트를 등록하면 done:요소가 0에서 1로 바뀌게 설정해놓았다.
  이것을 다시 취소하면 1에서 다시 0으로 바뀌도록 함수를 설정한다.
• js : 코멘트 등록과 똑같이 POST 방식으로 cancel 함수를 만들어주고, temp_html에서 button에 onclick 함수로 넣어준다.

해결

python 코드
@app.route("/bucket/cancel", methods=["POST"])
def bucket_cancel():
    num_receive = request.form['num_give']
    db.bucket.update_one({'num':int(num_receive)}, {'$set': {'done': 0}})
    return jsonify({'msg': '버킷 취소!'})

js코드
function cancel_bucket(num){
            $.ajax({
                type: "POST",
                url: "/bucket/cancel",
                data: {num_give:num},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }
  function show_bucket(){
            $.ajax({
                type: "GET",
                url: "/bucket",
                data: {},
                success: function (response) {
                    let rows = response['buckets']
                    for(let i=0; i<rows.length;i++){
                        let bucket = rows[i]['bucket']
                        let num = rows[i]['num']
                        let done = rows[i]['done']
                        let temp_html = ``
                        if(done == 0){
                            temp_html = `<li>
                                            <h2>✅ ${bucket}</h2>
                                            <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
                                        </li>`
                        } else{
                            temp_html = `<li>
                                            <h2 class="done">✅ ${bucket}</h2>
                                            <button onclick="cancel_bucket(${num})" type="button" class="btn btn-outline-danger">취소</button>
                                        </li>`
                        }
                        $('#bucket-list').append(temp_html)
                    }
                }
            });
        }       
        

학습

코드를 차근차근 js와 python이 어떻게 연결되어 있는지 보는 것이 중요하다는 것을 알았다. 코드를 차근차근 이해하는 것!