[Django & JS] 투두리스트 (4)

Update 함수는 위 사진과 같이 작동한다.

​

​

​

function change_input_onclick(id, event) {

    // 1. 해당 노드의 정보 받기.
    // 2. 그 노드를 인풋 텍스트로 바꾸기
    // 3. 버튼도 이제 수정완료로 바꾸기. !! 온클릭 이벤트 제대로 연결줘야함
    let Edit_button = document.createElement('button');
    let new_input = document.createElement('input');
    let current_input = document.querySelector('.new_input');
    let event_parent = event.target.parentElement;
    let thirdNode = event_parent.children[2];
    let current_value = event.target.innerHTML;


    Edit_button.innerText = '수정!';
    Edit_button.classList.add('btn_modify');
    Edit_button.setAttribute("onclick", `edit_success_onclick(${id}, event)`);

    new_input.classList.add('new_input');
    new_input.classList.add('todo_list_li');
    new_input.placeholder=`${current_value}`;

    if (current_input) {
        alert('한번에 하나만 수정해주세욥');
    } else{
        event_parent.removeChild(thirdNode);
        event_parent.appendChild(new_input);
        event_parent.appendChild(Edit_button);
    }
}

Update에 필요한 함수는 두가지다.

 

작성되어있는 리스트의 글을 눌렀을 때

change_input_onclick 함수로 연결이 된다.

​

​

중요한 점은

이 때는 비동기 통신이 이루어지지 않고

input창과 수정버튼만 띄운다.

​

앞선 delete와 create함수의 axios 통신 방법이 전혀 없지 않은가?

​

event.target.parentElement 를 이용하여

클릭한 글씨의 부모요소인 li 태그를 가져왔고

li 태그의 세번째 요소인 span태그를 지운 후

​

새롭게 createElement로 생성한

Edit_button과 new_input

을 차례로 넣어주었다.

​

​

Edit_button에

setAttribute로 onclick속성을 추가해준다.

​

이 때 Edit_success_onclick함수로 연결이 되는데

​

여기서 서버와 통신을 시킨다.

​

 

function edit_success_onclick(id, event) {


    let event_target = event.target;
    let new_input = document.querySelector('.new_input');
    let event_parent = event.target.parentElement;
    let thirdNode = event_parent.children[2];
    let span = document.createElement('span');

    span.innerText = new_input.value;
    span.style.cursor = "pointer"
    span.setAttribute("onclick", `change_input_onclick(${id}, event)`);

    // 1. 해당 노드의 정보 받기
    // 2. 비동기 통신 보내기.
    // 3. 성공하면 크리에이트 함수 동작 할 때의 노드 상태와 똑같이 바꾸기.
    // 4. 실패하면 안되게 하기

    axios({
            url: `/todos/edit/`,
            method: 'post',
            headers: {
                "content-type": "application/json",
                'X-CSRFToken': getCsrfToken(),
            },
            data: {
                'todo': new_input.value,
                'id': id,
            },
        })
        .then(function(response) {
            let result = response.data['is_success']
            if (result === true) {
                if (new_input.value !== '') {
                    event_parent.removeChild(thirdNode);
                    event_parent.removeChild(event_target);
                    event_parent.appendChild(span);

                } else {
                    alert('수정해주세요');


                }
            } else {
                alert('fail');
                console.log('d')
            }
        })
        .catch((error) => {
            console.log(error);
        })

}

​

수정! 버튼인 Edit_button을 눌렀을 때

실행되는

edit_success_onclick 함수이다.

​

여기서의 event.target은 당연히 수정! 버튼이고

역시 마찬가지로

부모요소를 불러와 지우고 싶은 요소가 몇번째인지 파악한 후

수정!버튼과 New_input 요소를 지우고

New_input 요소에 입력된 value값을 새로운 span태그에 넣어준 후

span태그를 삽입해준다.

​

​

이제 거의 다 왔다 조금만 힘내자~

​