jQuery एक्स-संपादन योग्य: अद्यतन का चयन क्षेत्र अन्य चुनिंदा क्षेत्र

Question

मैं jQuery के लिए एक्स-संपादन योग्य प्लगइन का उपयोग कर रहा के मूल्य पर आधारित। मैं दो का चयन क्षेत्रों जो गतिशील 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(); 
});