jQuery X-Editable: Cập nhật trường chọn dựa trên giá trị của trường chọn khác

Question

Tôi đang sử dụng plugin X-Editable cho jquery. Tôi có hai trường chọn được cung cấp động với dữ liệu qua ajax. Đây là mã của tôi:

Các lĩnh vực:

<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> 

Và 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); 
      } 
     }); 

Những gì tôi muốn làm điều này là: Khi họ thay đổi giá trị của $('a.zone') Tôi muốn $('a.area') để tải lại dữ liệu ajax. Làm thế nào tôi có thể đi về việc này?

Answer 1

tôi vật lộn với điều này một chút. Về cơ bản, những gì đã kết thúc làm việc là

1. điều bản cập nhật của có thể chỉnh sửa hạ lưu của tôi trên sự thành công của một biên tập của có thể chỉnh sửa ngược dòng bằng cách kích hoạt nó trong editables chức năng thành công,
2. thay thế có thể chỉnh sửa hạ lưu cũ với một bản sao của chính nó để loại bỏ biểu mẫu đính kèm (mà tôi chưa tìm ra cách cập nhật trực tiếp) và
3. gọi chức năng có thể chỉnh sửa trên thiết bị thay thế.

Khám phá bên dưới.

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

Tôi đã không được sử dụng các plugin trước đó, nhưng liếc nhìn các tài liệu có vẻ như điều này sẽ làm việc:

$('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(); 
});