데이터 1개만을 수정하도록 하는 플러그인이다.
간단히 사용하는 코드를 보자.
<span id="phone" class="dblclick" style="display: inline"><%= @zeous.phone %></span>
$(function(){
$('.dblclick').editable("/zeous/update", {
indicator: "<img src='/images/ajax-loader.gif'>",
tooltip: "더블클릭 하시면 수정하실 수 있습니다.",
event: "dblclick",
type: "text",
name: "inline_value",
id: "key",
width: 150,
style: "inherit",
submitdata: {id: "<%= @zeous.pcb_id %>", authenticity_token : "<%= form_authenticity_token %>"}
});
});
보내는 주소는 /zeous/update 이고
span 영역을 마우스 왼쪽의 더블클릭 하면 text 로 화면이 바뀌게 되고 submitdata에 text에서 받는것 이외의 데이터를
넘겨줄수 있도록 한다.. (기본적으로 <%= javascript_include_tag "jquery.jeditable" %> 가 있어야 한다)
여기까지가 jEditable의 기본적인 사용방법이다. rails 코드이지만 보기에 큰 무리가 없을것이다.
그런데 jEditable의 기본기능을 사용하였을때
주민번호와 같은 데이터의 중복체크를 어떻게 해야 할것인가.. 사용자에게 alert창으로 보여주고
변경한 데이터를 원래의 데이터로 돌려놓는 정도만 구현하면 될듯한데..
처음에 고민한 방법은 ajax 호출 자체를 실패로 만드는 것이다.
500에러나 기타 에러를 발생시키는 방법인데.. 약간 마음에 안든다.. 에러는 아니자나.. 다만 중복일뿐이지..
설마 이런 고민을 나만 하였을까.. 하고 찾아보니..역시나 있다.
댓글의 맨 마지막에 보면 아래와 같은 코드가 있다.. 누가 구현해놓은 것이다. jQuery의 ajax 호출을 이용하여서
$('.edit').editable(function(value, settings){
$.ajax({
type: 'POST',
url: 'save.html',
async: false,
success: function(data){
if (/ErRoR:/.test(data))
{
data = data.replace(/ErRoR:/g, '');
alert(data + ' Could not save data.');
//Back to edit
}
}
});
return(value);
}, {
indicator : 'Saving...',
width : '170px',
cssclass : 'inlineEdit',
cancel : 'Cancel',
submit : '<br><input type="button" value="Save">',
});
서버쪽은 이렇게...
render :text => "ErRoR:"+old_data, :layout => false
서버쪽에서 return 해주는 text 중에 앞부분을 ErRoR로 주고 화면 단에서 그것을 처리 하는 방법이다.
그런데 위의 코드의 단점은.. 화면의 텍스트가 원래의 데이터로 돌아와야 하는데. 새롭게 입력된 데이터로 변경된다는 것이다.
그래서 위의 코드를 참고해서 새롭게 변경한 코드는
$(".masked_duplicate").editable(function(value, settings) {
var t_data = value;
$.ajax({
type: 'POST',
url: '/zeous/update',
async: false,
data: {inline_value: value, key: $(this).attr("id"), id: "<%= @zeous.pcb_id %>", authenticity_token : "<%= form_authenticity_token %>", is_duplicate: "true"},
success: function(data)
{
if (/ErRoR:/.test(data))
{
data = data.replace(/ErRoR:/g, '');
alert(value + ' 는 중복된 데이터 입니다.');
t_data = data;
}
}
});
return(t_data);
}
ajax 콜하기전에 데이터를 미리 저장해놨다가 실패시에는 과거 데이터로 return 한다. (서버쪽 코드는 동일하다)
so Cool~ 마음에 든다 ^^
