jQuery X-Editable：他の選択フィールドの値に基づいて選択フィールドを更新

Question

jquery用のX-Editableプラグインを使用しています。私は動的にajaxを介してデータが供給される2つの選択フィールドを持っています。これは私のコードです：

フィールド：

<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.area')をリロードしたい$('a.zone')の値を変更した場合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(); 
});