jQuery X-Editable：根据其他选择字段的值更新选择字段

Question

我正在为jquery使用X-Editable插件。我有两个选择域通过ajax动态提供数据。这是我的代码：

字段：

<td class="center"> 
<a href="#" data-name="'.$res['mid'].'" class="zone">'.$zonename.'</a> 
</td> 
<td class="center"> 
<a href="#" data-name="'.$res['mid'].'" class="area" data-zona="'.$zoneuid.'">'.$areaname.'</a> 
</td> 

而jQuery的：

$('a.zone').editable({ 
      type: 'select', 
      url: '../admin/callbacks/quickEdit.php?t=zone', 
      pk: 1, 
      showbuttons: true, 
      source: function() { 
       var result; 
       $.ajax({ 
        url: '../admin/callbacks/jsonDataList.php', 
        data: {t: 'zone'}, 
        type: 'GET', 
        global: false, 
        async: false, 
        dataType: 'json', 
        success: function(data) { 
         result = data; 
        } 
       }); 
       return result; 
      }, 
      success: function(response, newValue) { 
       $(this).parent().siblings('td').children('a.area').data('zona', newValue); 
       console.log(response, newValue); 
      } 
     }); 
     $('a.area').editable({ 
      type: 'select', 
      pk: 1, 
      url: '../admin/callbacks/quickEdit.php?t=area', 
      showbuttons: true, 
      source: function() { 
       var result; 
       var zona = $(this).data('zona'); 
       $.ajax({ 
        url: '../admin/callbacks/jsonDataList.php', 
        data: {t: 'area', zone: zona}, 
        type: 'GET', 
        global: false, 
        async: false, 
        dataType: 'json', 
        success: function(data) { 
         result = data; 
        } 
       }); 
       return result; 
      }, 
      success: function(response, newValue) { 
       console.log(response); 
      } 
     }); 

我想要做的是这样的：当他们改变$('a.zone')的价值我想$('a.area')重装ajax数据。我怎么能这样做呢？

Answer 1

我这个挣扎了一下。基本上，结束了工作是

1. 调理我的上游编辑的编辑的成功下游编辑的由editables成功触发功能它的更新，
2. 用克隆新老交替下游编辑（我没有想出如何直接更新）和
3. 调用替换函数上的editables函数。

请在下面查看。

var editable_triggered_updates = function (changed_element, newValue) { 

     var update_second_editable = function (el_id, newUpstreamValue) { 
      var data = { 
       id_upstream_editable: "oldUpstreamValue" 
      }; 
      if (data[el_id]===undefined) { 
       return; 
      } 

      // IE cache workaround 
      var n = new Date().getTime(); 

      $.getJSON(my_lookup_url, {t:n, my_get_parameter: newUpstreamValue}, function(return_object){ 

       // Step 2: get rid of old editable form by replacing editable with clone 
       $('#id_downstream_editable').replaceWith($('#id_downstream_editable').clone()); 
       $('#id_downstream_editable').attr('data-source', return_object['data-source']); 

       // Step 3: call editable on new objects 
       $('#id_downstream_editable').editable({ 
        mode: 'inline', 
        ajaxOptions: { 
         dataType: 'json', 
         sourceCache: 'false' 
        } 
       }); 
      }); 
     }; 

     update_second_editable(changed_element.id, newValue); 
    }; 

    !function (triggered_updates) { // editables setup 
     $(".editable").editable({ 
      mode: 'inline', 
      ajaxOptions: { 
       dataType: 'json', 
       sourceCache: 'false' 
      } 
      success: function(response, newValue) { 
       triggered_updates(this, newValue); // Step 1 
      }, 
     }); 
    }(editable_triggered_updates || console.log); // Step 1 also 

Answer 2

我以前没有使用过的插件，但在文档一眼，似乎这会工作：

$('a.zone').editable({ 
     type: 'select', 
     url: '../admin/callbacks/quickEdit.php?t=zone', 
     pk: 1, 
     showbuttons: true, 
     source: function() { 
      var result; 
      $.ajax({ 
       url: '../admin/callbacks/jsonDataList.php', 
       data: {t: 'zone'}, 
       type: 'GET', 
       global: false, 
       async: false, 
       dataType: 'json', 
       success: function(data) { 
        result = data; 
       } 
      }); 
      return result; 
     }, 
     success: function(response, newValue) { 
      $(this).parent().siblings('td').children('a.area').data('zona', newValue); 
      console.log(response, newValue); 
     } 
    }); 

function loadArea(){ 
    $('a.area').editable({ 
     type: 'select', 
     pk: 1, 
     url: '../admin/callbacks/quickEdit.php?t=area', 
     showbuttons: true, 
     source: function() { 
      var result; 
      var zona = $(this).data('zona'); 
      $.ajax({ 
       url: '../admin/callbacks/jsonDataList.php', 
       data: {t: 'area', zone: zona}, 
       type: 'GET', 
       global: false, 
       async: false, 
       dataType: 'json', 
       success: function(data) { 
        result = data; 
       } 
      }); 
      return result; 
     }, 
     success: function(response, newValue) { 
      console.log(response); 
     } 
    }); 

} 

loadArea(); 

$('a.zone').on('save', function(e, params) { 
    loadArea(); 
});