project 2. 2 Bite A Bit 수정 기능 추가완료 2차 완성

 

 

이 감격스러운 순간을 잊을 수가 업따 흑흑

우선 결과부터 얘기하자면 이전 포스팅에서 썼던 내용대로 완성을 했다

 

1. 서버에서 디비 오리지널 칼럼을 찾는건 "영어표현"

2. 헷갈리지 않도록 플레이스 홀더로 기존표현을 알려주기.

3. 2번에 추가로 둘 다 수정이 필요하지 않고 한국어표현만 수정하거나 메모를 추가하거나 등 '한 개의 영역'만 고칠 수 있도록 따로 사용자가 적지않으면 플레이스홀더의 내용(기존에 등록되있던 내용)으로 서버로 보내주기

3. 서버에서 디비 업데이트 해주기

4. 업데이트 된 내용 받아와서 다시 클라이언트에 뿌려주기

 

 

 

 

수정버튼을 클릭하면 이렇게 모달창이 뜨고 모달창 내용을 적은 후 

(여기선 한국어 표현은 기존표현 그대로, 메모만 추가한 상황)

서브밋을 누르면 tada!

 

 

 

 

 

이렇게 수정이 된다.

ㄹㅇ 찐감동의 순간..

 

자 이제 어떻게 내가 처리를했냐면

 

모달창 함수에서는 이렇게

 

modal.find('.modal-title').text('수정할 내용을 입력해주세요. 영어표현은 수정이 불가능합니다.')

$('#new_post_kor').attr('placeholder', post_kor);
$('#new_post_memo').attr('placeholder', post_memo);


fn_edit(post_eng)

 

 

모달창에서 서브밋 버튼을 누르면 실행되는 함수에서는

1. 다시 플레이스 홀더"값"만 추출

2. 새로운 값 추출

 

그래서 if 문을 만들었는데 처음엔 자꾸 

새로 받은 값 == 기존 값 / 새로 받은 값 != 기존 값

이래가지고 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

if 함수는 돌지를 않고~~~~

내정신만 돌았지

 

그러다가 뇌리에 문득! 아 잠깐 

새로운 값이 비어있는지 아닌지를 보면 되는거아니야?

 

그렇게 해서 콘솔 찍었더니 성공함

그래서 에이작스 이용해서 보내줬음

 

var post_kor0 = $('#new_post_kor').attr('placeholder', post_kor);
var post_memo0 = $('#new_post_memo').attr('placeholder', post_memo);

var new_post_kor = post_kor0[0]['placeholder'];
var new_post_memo = post_memo0[0]['placeholder'];

var new_post_kor_1= $('#new_post_kor').val();
var new_post_memo_1= $('#new_post_memo').val();

 

// new_post_kor_1 : 새로 받은 값
// new_post_memo : 기존 값


if (new_post_kor_1 =="" && new_post_memo_1 ==""){
var post_kor = new_post_kor;
var post_memo = new_post_memo;
} else if ( new_post_kor_1 == "" && new_post_memo_1 != "") {
var post_kor = new_post_kor;
var post_memo = new_post_memo_1;
} else if ( new_post_kor_1 != "" && new_post_memo_1 == "") {
var post_kor = new_post_kor_1;
var post_memo = new_post_memo;
} else {
var post_kor = new_post_kor_1;
var post_memo = new_post_memo_1;
}
var new_post_eng = $('#new_post_eng').attr('placeholder', post_eng);
var post_eng = new_post_eng[0]['placeholder'];

 

 

$('#submit').click(function() {
$.ajax({
type: "POST",
url: "/post/edit",
data: {post_eng_give : post_eng, post_kor_give : post_kor, post_memo_give : post_memo },
success: function (response) {
if (response["result"] == "success") {
alert(response["msg"]);

window.location.reload()
showPosts()
}
}
})

});

 

 

서버코드

@app.route('/post/edit', methods=["POST"])
def edit_post():
post_eng_receive = request.form['post_eng_give']
post_kor_receive = request.form['post_kor_give']
post_memo_receive = request.form['post_memo_give']

 

db.posts.update_one({'post_eng': post_eng_receive}, { // 영어 표현을 찾아서
'$set': {'post_kor': post_kor_receive, 'post_memo': post_memo_receive}}) // 받은걸로 업데이트 시켜줭

return jsonify({'result': 'success', 'msg': '성공적으로 수정되었습니다.'}) //성공하면 이 메시지 반환해줘

 

 

 

다만 이렇게 하면

1. 왠지모르게 알럿창이 두번뜨고..

2. 이상해서 서버쪽에 print를 찍었는데 여기서도 수정이 필요한 부분 (post_kor, post_memo)이 두번 프린트가 된다. 

 

 

요 부분만 수정하면 완성!