Jeditable 및 "select"필드 문제 - 클라이언트 측에서 동적으로 JSON 데이터 액세스 및 업데이트

Question

Zend와 함께 Jeditable을 사용하고 있습니다.

업데이트의 대부분은 Jeditable과 관련이 있습니다. 따라서 페이지에는 정보가 표시되며 각 필드는 Jeditable을 사용하여 편집 할 수 있습니다. "텍스트"필드와 잘 작동합니다.

여기에 문제가 있습니다 --- 드롭 다운 목록이 있습니다 나는 US Sates 드롭 다운 목록이 있습니다. Jeditable 쇼가 올바르지 만 Ajax 요청이기 때문에 두 가지 특정 문제가 발생합니다.

1) 값은 이름이 아닌 ID로 표시됩니다. 나는 서버 응답에서 ID 대신 이름을 보내도록 처리 할 수 ​​있다고 생각하지만 클라이언트 측에서 수행하려고합니다.

2) 편집 후 "selected"요소가 손실됩니다. 이상적으로, 그것은 'selected'엘레멘트가 변경되었으므로 그것을 새로 고침해야한다. 페이지를 새로 고치면 새로운 요청이 될 것이므로 잘 될 것입니다.하지만 그렇게하고 싶지는 않습니다. 이상적으로, 서버의 응답을 가로 채고 드롭 다운 목록 (JSON 데이터)에 액세스하고 상태 ID의 레이블을 표시하고 Json 데이터를 동적으로 변경하여 선택한 항목을 변경하려고합니다. 드롭 다운 목록의 값입니다.

그래서 여기

Jeditable

에서 클라이언트 측에서 JSON 데이터를 액세스하고 조작하는 방법을 나는 지금까지 내가 소스 코드를 기반으로 볼 수있는 바와 같이, jEditable 소스를 확인

$('.edit_state').editable('/User/user/updprofile', 
{ id : 'element_id', 
     name : 'new_value', 
    data : '<?php echo json_encode(array_merge($this->aStateIdOptions, array("selected" => $this->user->state_id))); ?>', 
    type : 'select', 
    submit : 'OK', 
    indicator : '<img width=14px height=14px src="/images/ui/ajax-spinner.gif">', 
    style  : 'border: 0px', 
    onerror: function(settings, original, xhr) { 
    original.reset() 
    alert(xhr.responseText) 
    }, 
    intercept: function (jsondata) { 
    obj = jQuery.parseJSON(jsondata); 
    alert(obj); 
    //alert(data); 
    // do something 
    return(obj); 
    }, 
    callback : function(value, settings) { 
    console.log(this); 
    alert(this); 
    console.log(value); 
    alert(value); 
    console.log(settings); 
    alert(settings); 
    }  

}); 

Answer 1

내 코드입니다 옵션 값을 설정하는 코드가 있습니다.

var option = $('<option />').val(key).append(json[key]); 

[CA : California, ...]와 같은 정보를 보내야한다고 생각합니다. 그러나 option 요소의 selected 속성에 대한 코드가 있습니다.

/* Loop option again to set selected. IE needed this... */ 
$('select', this).children().each(function() { 
    if ($(this).val() == json['selected'] || 
     $(this).text() == $.trim(original.revert)) { 
      $(this).attr('selected', 'selected'); 
    } 
}); 

난 당신이 같은 정보를 보낼 필요가 있다고 생각 [{: 선택 캘리포니아 : CA 선택}, {TX : 텍사스 선택 : 널 (null)} 또는 {TX : 텍사스}, ...] 소스 CODE

select: { 
    element : function(settings, original) { 
     var select = $('<select />'); 
     $(this).append(select); 
     return(select); 
    }, 
    content : function(data, settings, original) { 
     /* If it is string assume it is json. */ 
     if (String == data.constructor) {  
      eval ('var json = ' + data); 
     } else { 
     /* Otherwise assume it is a hash already. */ 
      var json = data; 
     } 
     for (var key in json) { 
      if (!json.hasOwnProperty(key)) { 
       continue; 
      } 
      if ('selected' == key) { 
       continue; 
      } 
      var option = $('<option />').val(key).append(json[key]); 
      $('select', this).append(option);  
     }      
     /* Loop option again to set selected. IE needed this... */ 
     $('select', this).children().each(function() { 
      if ($(this).val() == json['selected'] || 
       $(this).text() == $.trim(original.revert)) { 
        $(this).attr('selected', 'selected'); 
      } 
     }); 
    } 
} 

},