[extensions-web] Fix inline editing on detail pages

[Jasper St. Pierre <jstpierre src gnome org>]

commit 84e52d05e28bfc7952f1433362276c70dd166285
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Mon Oct 31 14:03:09 2011 -0400

    Fix inline editing on detail pages
    
    Now that we're returning JSON from the view, we need to use text(), not
    html().
    
    We need to make sure we apply it to each element individually, otherwise
    something in something like:
    
      $("h3, p.description").csrfEditable();
    
    will break, because "self" refers to all elements.

 sweettooth/static/js/main.js |   27 ++++++++++++++++-----------
 1 files changed, 16 insertions(+), 11 deletions(-)
---
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index 7c59f55..af3fc00 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -7,20 +7,25 @@ require(['jquery', 'messages', 'jquery.cookie', 'jquery.jeditable', 'jquery.time
     $.ajaxSettings.headers['X-CSRFToken'] = $.cookie('csrftoken');
 
     $.fn.csrfEditable = function(url) {
-        var self = this;
+        return this.each(function() {
+            var elem = $(this);
 
-        function error(xhr, status, error) {
-            if (status == 403) {
-                self.css("background-color", "#fcc");
+            function error(xhr, status, error) {
+                if (status == 403) {
+                    elem.css("background-color", "#fcc");
+                }
             }
-        }
 
-        self.editable(url, { select: true,
-                             ajaxoptions: { error: error },
-                             data: function(string, settings) {
-                                 return $.trim(string, settings);
-                             }});
-        self.addClass("editable");
+            elem.editable(url, { select: true,
+                                 ajaxoptions: { error: error, dataType: 'json' },
+                                 callback: function(result, settings) {
+                                     elem.text(result);
+                                 },
+                                 data: function(string, settings) {
+                                     return $.trim(string);
+                                 }});
+            elem.addClass("editable");
+        });
     };
 
     $(document).ready(function() {