노군의 일상사

Jquery를 이용한 플러그인중에서 edit in place가 지원되는 플러그인을 찾다가 jeditable이라는 것을 발견했습니다. 테이블, div등의 테그로 된 내용중 일부를 클릭으로 수정창을 나오게 한다음에 수정을 할 수 있게 해주는 플러그인 입니다.

홈페이지 : http://www.appelsiini.net/projects/jeditable

깔끔하고 실습용 예제가 잘 나와 있어서 적용하는데는 문제가 없었습니다. 하지만 적용을 하고 보니 페이지가 양이 적은 곳은 상관이 없는데 테이블의 행이 70라인이 넘어가는 페이지는 IE에서 로드가 느린감이 있었습니다. 그래서 다른 브라우저에서도 그런가 했더니 FF에서는 정상적으로 빠르게 표시가 되었습니다.
가져다 쓰는 입장이라 수정을 할 줄 몰라 헤매던중 구글신의 도움을 빌으니 답이 있었습니다.
http://tln.kr/n8j0 를 찾아가보면 맨 밑에 답이 있습니다. 이분도 IE에서 로딩이 느림을 물어봤는데 플러그인 제작자가 밑에 손수 답글을 달아 주었네요.

웹페이지가 로드시 바로 이벤트를 지정하지 않고 bind를 이용해서 이벤트가 발생할 때 trigger를 이용해서 사용할 수 있도록 하라고 되어 있더군요. 처음에는 적용을 했는데 안되서 이걸 왜 올렸지 했는데 아마도 제가 복사 & 붙여넣기 하면서 몇가지를 빼먹었는지 다 지우고 천천히 치니 정상적으로 실행이 되더군요.  아래는 간단하게 수정한 코드입니다. <td>부분을 더블클릭해야만 jeditable 이벤트가 발생해서 수정 할 수 있습니다.
자료를 넘기면서 기존 값도 같이 넘겨주기 위해 submitdata를 넣어주었는데 잘 전달 되네요.

1
2
3
4
5
6
7
8
9
10
11
12
13

    $(function(){
      $(".Editable").bind("dblclick",function(){
        $(this).editable("EditSave.php", { 
          indicator : "<img src='images/indicator.gif'/>",
          onedit : function(settings, self) { 
            $(this).html($(this).text()); },
          placeholder : '',
          event : 'edit',
          name : 'new_value',
          submitdata : {original_value: $(this).text()}
       }).trigger("edit"); 
      });
    });

onedit 부분은 수정하는 부분에 link가 있는데 순수 값만 나오게 하고 싶어서 한 코드입니다.
jeditable은 적용된 class에 내용이 없으면 자동으로 ‘Click to me!!’가 나와서 placeholder에 값을 ”로 주니 깔끔하게 공백으로 나옵니다.

카페에서 글을 읽다보니 이번달에는 데이터가 이월이 된다고 해서 확인해보니 총 887메가나 나왔습니다. i-lite요금제라서 500메가씩 나오는데 거의 무선환경에 밖에서는 간단한 것만 3g로 쓰다보니 많이 남아버렸네요.

다음주에 여행을 가는데 그때 열심히 써줘야겠습니다. 여행하면서 트위터에 사진 올리면서 여행기 쓰시는분 글을 봤는데 이번에 많은 데이터를 그걸 사용하면 되겠습니다.