Wie überschreibt x-editierbare Ajax-Antwort Wert?

Question

Ich benutze x-editierbare, um Inline-Bearbeitung zu tun. Wenn ich den Wert über ajax und x-editable aktualisiere, um die Antwort zu erhalten, finde ich es sehr schwierig, das div zu überschreiben, das den neuen x-editierbaren Wert enthält.

Zum Beispiel meine x-editierbare Link sieht wie folgt aus:

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

ich meine bearbeiten in dem Pop-up eingeben, die x-editierbare liefert dann den Wert eingeben 300.00

Als ich tun Änderungen, ich gehen Sie wie folgt vor:

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

Wenn x editierbare beendet ist, wird der Wert, der auf der Seite erscheint nun 300.00 (ohne $ Dollar-Zeichen). Wie Sie in meinem jquery-Code sehen können, versuche ich den Wert zu überschreiben, den x-editable mit $ ('# failure') auf die Seite setzt. Html ('$' + newValue);

Aus irgendeinem Grund funktioniert das nicht. Ich möchte, dass 300,00 $ erscheinen, nicht 300,00.

Answer 1

x editierbare hat eine Option „display: Funktion (Wert, Antwort) {}“, die verwendet werden können, um die Daten zu ändern, die auf der Seite angezeigt wird:

, 
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

Was Sie tun müssen, ist zu verhindern Die display Methode überschreiben Ihre success Methode.

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

Auf der Serverseite, sollten Sie Ihre JSON so sein, {newValue : <value>}

Answer 3

Im Folgenden sind zwei Fälle

Fall 1: Sie wollen anders nur Wert auf

können Sie in Verwenden Sie Renderereignis

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

Fall 2: Sie möchten den Wert für das Element festlegen, das in der AJAX-Antwort zurückgegeben wird, anstatt auf der Clientseite, z. uesr eingefügt Wert "Hallo", aber Server wandelt es in "Hallo" (kleiner Fall), dann folgendes tun

in Ajax Antwort setzen neuen Wert, z. {"success":true,"pk":13,"value":"hello"}

Verwendung folgender Code

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

sicherzustellen, dass Sie Objekt mit genauen Namen newValue Rückkehr

Answer 4

Solange Ihre Antwort des Formats ist:

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

und Sie Stellen Sie sicher, dass Sie die Antwort vom callba-Erfolg zurückgeben ck:

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

dann x-editable sollte das Feld für Sie aktualisieren.Denken Sie daran, die Schlüssel success, pk und newValue in die Antwort aufzunehmen.

Answer 5

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