채팅리스트 깜빡임 없이 append하기.....2번째

일단...안된다......전에 다른 리스트로는 깜빡임이 없었다고 생각했는데....그아이는 해놓고 보니 데이터가 바뀌어야 하는 아이라서 갈아 엎어버렸기에 증거가 없다.ㅠㅠ 된것이 맞는가 의문이 들고 있다...왜냐면...당연히 다른게 아니되니깐..ㅠㅠ

function collList() {
    console.log("출력준비");
    $('#after').html('');

    $.ajax({
        url : "/client/listprint.kh",
        type : 'post',
        data : {
            titleNo : $("#titleNo").val()
        },
        success : function(result) {
            for ( var i in result) {
                var $chat = $('#after > div[data-consultNo="' + result[i].consultNo + '"]');
                if ($chat.length < 1) {						
                    addChat(result[i].cousultNo, result[i].cMemberId,
                            result[i].cContexts, result[i].cDate);	
                };
            };
        },
        error : function(e) {
            alert('error : ' + e);
        }
    });
}

function addChat(consultNo,cMemberId, cContext, cDate) {
    console.log("데이터 올림 확인 : " + cMemberId);
    if (cMemberId != 'admin') {
        $('#after').append(
                        '<div class="right" data-consultNo="' + consultNo + '">'
                                + '<h5 >' + cMemberId + '</h5>'
                                + '<div class="middleBox"><span class="contextBox">'
                                + cContext + '</span>'
                                + '<span class="dateBox">' + cDate
                                + '</span></div></div>');

    } else {
        $('#after').append(
                '<div class="left" data-consultNo="' + consultNo + '">'
                        + '<h5 >' + cMemberId + '</h5>'
                        + '<div class="middleBox"><span class="contextBox">'
                        + cContext + '</span>'
                        + '<span class="dateBox">' + cDate
                        + '</span></div></div>');
    }
}

 

일단 이런코드다....

채팅 내용을 입력하고 창에 띄우는 것인데 앞선것처럼 div에 append가 전체적으로 되니깐 정신사납게깜빡거린다.

보기가 너무너무 시르다....

1. 위의 상태에서 data-consultNo 에 계속 새로운 consultNo값이 덮어지는 것이다. 의미가 없다. 진실 숫자 표시를 해야한다.

2. data()함수는 키와 값이 모두 String이다...... 숫자를 넣어도 어쨌든 " " 화 되어 표기된다.

표기도 잘못되고 보는 법도 잘못되었다. //표기 방법을 정확하게 이해가 안되서 여기저기 검색으로 난리가 난결과로 알아낸 것이다.ㅠㅠ

 

 

$('#after').append(
'<div class="chat right" data-'+consultNo+'="' + consultNo +'" >'
        + '<div class="icon"><img src="../resources/img/live-chat.png"></div>'
        + '<div class="middleBox"><span class="dateBox">'
        + cDate + '</span>' + '<span class="contextBox">'
        + cContext + '</span></div></div>');

정말이지 "++" 와의 전쟁이다....... 지겨울정도로 넣어다 빼었다..........받아온 데이터를 메소드 () 안에 넣을때 너무 해깔린다. 문자임을 뜻하는 ' ' 를 넣을때는 다시 큰따옴표로 감싸서 넣어야 한다..." ' " + (넣을 내용) + " ' " ///난 이런게 안 외워진다..ㅠㅠ 슬프다. 결과나오고 나서는 너무 허탈하다..... ㅠㅠ

 

이렇게 어렵게 구문을 넣고 난리를 쳤는데 data 값이 확인이 안되는것이다.

//var $chat = $('.chat').data("'"+result[i].consultNo+"'"); 값이 undefined가되어 포기

 addChat()에 출력구문에 들어가기전에 값이 있냐없냐를 확인후 진행하고 싶었는데 계속 undefined였다..

일단 아무것도 없는것에 값을 확인하려고 해그런다로 결론... 필요가 없어진 data() ㅠㅠ.

그래서 방법은 .............지식인 샘 찬스로

count로 해결했다.....다른 학생이 알아낸 거였다고 한다..ㅋㅋㅋ

 

var countData=-1;
function collList() {
    console.log("출력준비");
    var titleNo = ${param.titleNo};
    //$('#after').html('');

    $.ajax({
        url : "/client/listprint.kh",
        type : 'post',
        data : {titleNo : titleNo},
        success : function(result) {
            for ( var i in result) {
            //var $chat = $('.chat').data("'"+result[i].consultNo+"'"); 값이 undefined가되어 포기						
            if (i>countData) {						
                    addChat(result[i].consultNo, result[i].cMemberId,
                            result[i].cContexts, result[i].cDate);	 					
                }
            }
        },
        error : function(e) {
            alert('error : ' + e);
        }
    });
}

function addChat(consultNo, cMemberId, cContext, cDate) {			
    countData++;
    if (cMemberId === 'admin') {
        $('#after').append(
                '<div class="chat right" data-'+consultNo+'="' + consultNo +'" >'
                        + '<div class="icon"><img src="../resources/img/live-chat.png"></div>'
                        + '<div class="middleBox"><span class="dateBox">'
                        + cDate + '</span>' + '<span class="contextBox">'
                        + cContext + '</span></div></div>');
        //var a=$('#after>.chat').data(consultNo);
        //console.log("데이터 값 확인: "+ a);

    } else {
        $('#after').append(
                '<div class="chat left" data-'+consultNo+'="' + consultNo + '">'
                        + '<div class="icon"><img src="../resources/img/programmer.png"></div>'
                        + '<div class="middleBox"><span class="contextBox">'
                        + cContext + '</span><span class="dateBox">'
                        + cDate + '</span>' + '</div></div>');
    }
}

일단 완성된 구문이다......append할 countData에 카운트를 하고 

for문에서 countData보다 클때만 값을 addChat()에다가 주는 것이다......

이러니깐 간단하게 끝났따.... 깜빡이지 않는다....진짜찐짜...........data() 아쉽다......

이부분은 다음 기회에 공부해서 다시올것이다.^^