jQuery X-Editable: zaktualizuj pole wyboru na podstawie wartości innego pola wyboru

Question

Używam X-Editable plugin dla jquery. Mam dwa wybrane pola, które są dynamicznie dostarczane z danymi za pośrednictwem ajax. To jest mój kod:

Pola:

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

I 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); 
      } 
     }); 

Co chcę zrobić to w ten sposób: Kiedy zmienić wartość $('a.zone') Chcę $('a.area') przeładować dane ajax. Jak mogę to zrobić?

Answer 1

Walczyłem z tym przez chwilę. Zasadniczo, co skończyło się roboczy

1. klimatyzacji aktualizacja mojego dalszego edytowalne w powodzenie takiej zmiany w upstream edytowane przez wyzwalanie go w funkcji sukcesu editables,
2. zastępując starą downstream edytowalny z klonu siebie, aby pozbyć się załączonego formularza (którego nie znalazłem, jak zaktualizować bezpośrednio), i
3. wywoływanie funkcji editables na zamienniku.

Sprawdź to poniżej.

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

nie użyłem wtyczki wcześniej, ale patrząc na docs wydaje się to będzie działać:

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