CI 묻고 답하기

제목 keypress로 아이디 중복체크 실시간으로 해줄려고합니다.
글쓴이 해행행 작성시각 2016/02/26 18:28:38
댓글 : 3 추천 : 0 스크랩 : 0 조회수 : 23732   RSS 
$(document).ready(function(){
		if($('#id').val().length>6){
			$('#id').keypress(function(){
				var id = $('#id').val();
				console.log(id);
				$.ajax({
					type : 'GET',
					url : '/main/id_check',
					data : id,
					success : function(data){
						console.log(data);
					}
				});
			});
		}else{
	});

이렇게 값을 controllers 로 keypress될떄마다 보내고 처리를 할려고합니다.

 

콘트롤러에서 저렇게 보내온 id 값을 어떻게 해야지 찍을 수 있을까요?

 

매번 질문만남기네요.. 죄송하고 감사합니다.
 다음글 코드이그나이터 처음 설치 시 설정해야 될게 있는가요? (2)
 이전글 ci 에서 캡슐화를 하고 싶은데 어떤식으로 처리하면 될... (2)
목록

댓글

마카오최 / 2016/02/27 01:25:42 / 추천 0

일단 문의하신 스크립트가 구조상 수정되어야 할 부분들이 보입니다. (괄호가 덜 닫혀 오류도 나고 있네요..)

keypress 이벤트는 keyup 이벤트로 변경해주시고요. ( 길이체크는 이렇게 해야 비교적 정확하게 동작합니다. )

alert()으로 매 이벤트마다 특정 인풋값을 찍어보시면 알겠지만 키프레스는 누르는 순간 바로 체크해버리기때문에

내가 입력한 글이 인풋에 찍히기도 전에 현재 인풋의 길이를 재버립니다.

그래서 하나의 글자를 입력하면 0이 찍히고 2번째 글을 입력하면 1이 찍히게 됩니다.

분명 지금 눈에 보이는 글자는 2글자인데 말이지요..

keyup 이벤트는 말그대로 키보드가 눌렸다가 떼어지는 순간에 이벤트를 발생시키므로 글자가 입력된후의 이벤트가 발생한다고 보시면됩니다. 테스트 해보시면 한글자를 입력하면 1이 찍히고 두글자를 입력하면 2가 찍힙니다. 정확하지요..

 

그리고 문의 주신 소스코드중 모든 소스코드는 keyup 이벤트 안쪽에 위치시켜야 합니다.

그래야 매번 키 입력이 일어난후 검사를 할수 있게 되겠지요.

아래는 대략 수정한 소스코드입니다.

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<input type="text" id="id" value="" />
<span id="result_id_msg"></span>

<script type="text/javascript">
$(document).ready(function(){
	$('#id').keyup(function(){
		if ( $('#id').val().length > 6) {
			var id = $(this).val();
			// ajax 실행
			$.ajax({
				type : 'POST',
				url : '/main/id_check',
				data:
				{
					id: id
				},
				success : function(result) {
					//console.log(result);
					if (result == "ok") {
						$("#result_id_msg").html("사용 가능한 아이디 입니다.");
					} else {
						$("#result_id_msg").html("사용 불가능한 아이디 입니다.");
					}
				}
			}); // end ajax
		}
	}); // end keyup
});
</script>

 

ajax 요청은 get 으로 하지 않고 post로 변경하였습니다.

data 부분은 저런식으로 네임: 값의 형태로 보냈습니다.

이렇게 하시면 만드셨던 main 컨트롤러에 id_check 메소드에서 

아래와 같이 받을수 있습니다.

$id = $this->input->post('id');

이렇게 하시고 저 아이디가 중복 아이디인지는 $id 로 쿼리 날리셔서 발견되는 로우가 있는지 찾으면 되겠지요 ~

없다면 echo "ok"; 해주시면 될듯 합니다.

쓰다보니 이상하게 길어졌네요.

이미 아시는 내용이 많이 있을수 있으니 걸러서 보시면 ㅠ 될듯 합니다..
닥 / 2016/02/27 11:22:09 / 추천 0

안녕하세요.

가입하고 처음 댓글을 작성하는데요..

저런식으로 아이디를 체크하게 되면 너무 많은 커넥션을 발생 시킬 수 있더라구요.

setTimeout을 이용해서 텀을 1초~2초 정도 주시면, 커넥션을 많이 줄일 수 있습니다.

$(document).ready(function(){
var checkAjaxSetTimeout;
    $('#id').keyup(function(){
        clearTimeout(checkAjaxSetTimeout);
        checkAjaxSetTimeout = setTimeout(function(){
        if ( $('#id').val().length > 6) {
            var id = $(this).val();
            // ajax 실행
            $.ajax({
                type : 'POST',
                url : '/main/id_check',
                data:
                {
                    id: id
                },
                success : function(result) {
                    //console.log(result);
                    if (result == "ok") {
                        $("#result_id_msg").html("사용 가능한 아이디 입니다.");
                    } else {
                        $("#result_id_msg").html("사용 불가능한 아이디 입니다.");
                    }
                }
            }); // end ajax
            },1000); //end setTimeout
        }
    }); // end keyup
});

 

이런식으로 코드를 작성하게 되시면, 불필요한 검색의 커넥션이 많이 줄어 들게 됩니다..
해행행 / 2016/02/28 13:55:50 / 추천 0

//마카오최, 닥

감사합니다!

data:
                {
                    id: id
                },

이부분을

data:id, 이렇게 해줫어서 값을 못넘겨줫었네요!

말씀들해주신대로 구조수정하고 또 타임아웃 유용하게 잘쓰겠습니다!