x-editable using image to trigger select

Question

Я хотел бы использовать значки в интерфейсе для запуска всплывающего окна с возможностью редактирования X, но я не могу понять, как заменить текстовый контент на изображение.

Есть ли способ сделать это с помощью x-editable (для начальной загрузки) или мне нужно создать собственный способ его обработки?

Answer 1

получил его на работу, оставив это на случай, если кто-либо ищет эту функциональность или имеет лучший способ сделать это.

http://jsfiddle.net/UGWWA/11/

HTML:

<p>X-editable: single reqular checkbox</p> 
<div style="margin: 150px"> 
    <img id="check" src="http://png-4.findicons.com/files/icons/2152/snowish/128/dialog_warning.png"/> 
</div> 

JS:

$('#check').editable({ 
    type: 'checklist', 
    url: '/post',  
    pk: 1, 
    placement: 'right', 
    title: 'Option 1', 
    source: {'1': 'enabled'}, 
    emptytext: 'disabled', 
    success: function(data, config) { 
     if(data == '1'){ 
      $("#check").attr("src", "http://png-2.findicons.com/files/icons/808/on_stage/128/symbol_check.png"); 
     }else{ 
      $("#check").attr("src", "http://png-4.findicons.com/files/icons/2152/snowish/128/dialog_warning.png"); 
     } 
    } 
}); 

var a=0; 
//ajax emulation. Type "err" to see error message 
$.mockjax({ 
    url: '/post', 
    responseTime: 400, 
    response: function(settings) { 
     if(settings.data.value == 'err') { 
      this.status = 500; 
      this.responseText = 'Validation error!'; 
     } else if(settings.data.value[0] == '1') { 
      this.responseText = '1'; 
     }else{ 
      this.responseText = '0'; 
     } 
    } 
});