एक्स-संपादन योग्य AJAX प्रतिक्रिया मान को ओवरराइड कैसे करें?

Question

मैं इनलाइन संपादन करने के लिए एक्स-संपादन योग्य का उपयोग कर रहा हूं। जब मैं प्रतिक्रिया प्राप्त करने के लिए AJAX और x-संपादन योग्य के माध्यम से मान अद्यतन करता हूं, तो मुझे नए एक्स-संपादन योग्य मान वाले div को ओवरराइड करना बहुत मुश्किल लगता है।

उदाहरण के लिए, मेरे एक्स-संपादन योग्य लिंक इस तरह दिखता है:

<a href="#" id="freight">$100</a> 

मैं पॉप-अप कि एक्स-संपादन योग्य तो मूल्य 300.00

जब मैं करता हूँ में प्रवेश प्रदान करता है में मेरे संपादन में प्रवेश मेरी

$('#freight').editable({ 
      validate: function(value) { 
       if($.trim(value) == '') return 'This value is required.'; 
      }, 
      type: 'text', 
      url: '{{ path('update_purchase_order_ajax') }}', 
      pk: {{ purchaseOrder.id }}, 
      title: 'Enter Freight Value', 
      ajaxOptions: { 
       dataType: 'json' 
      }, 
      success: function(response, newValue) { 
       // Update the purchase order amounts... 
       $('#freight').html('$' + newValue); 
      } 
     }); 

जब एक्स-संपादन योग्य समाप्त हो गया है, मूल्य है कि पृष्ठ पर दिखाई देगा अब 300.00 ($ डॉलर चिह्न के बिना) है: संपादन, मैं इस प्रकार आगे बढ़ें। जैसा कि आप मेरे jquery कोड में देख सकते हैं, मैं मूल्य को ओवरराइड करने का प्रयास कर रहा हूं x-editable $ ('# freight') के साथ पेज पर डाल रहा है। Html ('$' + newValue);

किसी कारण से यह काम नहीं कर रहा है। मुझे $ 300.00 दिखाना है, 300.00 नहीं। ": समारोह (मूल्य, प्रतिक्रिया) {} प्रदर्शन" है कि डेटा कि पृष्ठ पर दिखाई देता संशोधित करने के लिए इस्तेमाल किया जा सकता:

Answer 1

एक्स-संपादन योग्य एक विकल्प है

, 
display: function(value, response) { 
     $(this).text(response.new_value); 
     // new_value being the value that is returned via the json response... 
     // this value can either be modified here in the javascript or in the controller which set the value... 
}, 

Answer 2

रोक रहा है क्या करने की जरूरत आपके success विधि को ओवरराइट करने से display विधि।

display: function(value, response) { 
    return false; //disable this method 
}, 
success: function(response, newValue) { 
    $(this).html('$' + newValue); 
} 

सर्वर साइड पर अपने JSON इस तरह होना चाहिए, {newValue : <value>}

Answer 3

के बाद दो मामलों

केस 1 हैं: बस मान प्रदर्शित करने के दूसरे तरीके से

आप कर सकते हैं आप चाहते हैं रेंडर इवेंट

$('#action').on('render', function(e, editable) { 
    var colors = {0: "gray", 1: "green", 2: "blue", 3: "red"}; 
    $(this).css("color", colors[editable.value]); 
}); 

का उपयोग करें

केस 2: आप उस तत्व को मान सेट करना चाहते हैं जो क्लाइंट साइड पर सेट के बजाय AJAX प्रतिक्रिया में वापस आ गया है। uesr डाला गया मान "हैलो" लेकिन पृथक इसे "हैलो" (छोटे मामले) में परिवर्तित करता है, फिर

AJAX प्रतिक्रिया में नया मान उदा। {"success":true,"pk":13,"value":"hello"}

उपयोग निम्न कोड

success:function(data, config) { 
    if(typeof(data) == 'object'){ 
     var api_id = data.pk; 
     var success = data.success; 
     if(success == true){ 
      return {newValue:data.value} 
     } 
    } 
} 

आप सही नाम के साथ वस्तु वापसी सुनिश्चित newValue

Answer 4

जब तक आपकी प्रतिक्रिया स्वरूप की है के रूप में:

{"success":true,"pk":2311,"newValue":"somenewvalue"} 

और आप सफलता कॉलबा से प्रतिक्रिया वापस करने के लिए सुनिश्चित करें सीके:

success: function(response) { 
    var newValue = '$'+response.newValue; 
    response.newValue = newValue; 
    return response; 
} 

तो एक्स-संपादन योग्य आपके लिए फ़ील्ड अपडेट करना चाहिए।प्रतिक्रिया में success, pk, और newValue कुंजी शामिल करना याद रखें।

Answer 5

success: function(response, newValue) { 
    // Update the purchase order amounts... 
    $('#freight').editable('option', 'value', newValue); 
}