simplejson double escapes data causing invalid JSON string

Question

I have a simple form for managing manufacturers in my shop. After posting form, ajax call returns json with updated data to the form. Problem is, that the returned string is invalid. It looks like it was double-escaped. Strangely similar approach across the whole shop works without any problems. I'm also using jquery 1.6 as javascript framework.

Model contains of 3 fields : char for name, text for description and image field for manufacturer logo.

The function :

def update_data(request, manufacturer_id):
    """Updates data of manufacturer with given manufacturer id.
    """
    manufacturer = Manufacturer.objects.get(pk=manufacturer_id)
    form = ManufacturerDataForm(request.FILES, request.POST, instance=manufacturer)

    if form.is_valid():
        form.save()

    msg = _(u"Manufacturer data has been saved.")

    html = [
        ["#data", manufacturer_data_inline(request, manufacturer_id, form)],
        ["#selectable-factories-inline", selectable_manufacturers_inline(request, manufacturer_id)],
    ]

    result = simplejson.dumps({
        "html": html
    }, cls=LazyEncoder)
    return HttpResponse(result)

The error in console : error with invalid JSON :

uncaught exception: Invalid JSON: {"html": [["#data", "\n<h2>Dane</h2>\n<div class="\"manufacturer-image\"">\n \n</div>\n<form action="\"/manage/update-manufacturer-data/1\"" method="\"post\"">\n \n <div class="\"field\"">\n <div class="\"label\"">\n <label for="\"id_name\"">Nazwa</label>:\n </div>\n \n \n <div class="\"error\"">\n <input id="\"id_name\"" name="\"name\"" maxlength="\"50\"" type="\"text\"">\n <ul class="\"errorlist\""><li>Pole wymagane</li></ul>\n </div>\n \n </div>\n\n <div class="\"field\"">\n <div class="\"label\"">\n <label for="\"id_image\"">Zdjecie</label>:\n </div>\n \n \n <div>\n <input name="\"image\"" id="\"id_image\"" type="\"file\"">\n </div>\n \n </div>\n\n <div class="\"field\"">\n <div class="\"label\"">\n <label for="\"id_description\"">Opis</label>:\n </div>\n \n \n <div>\n <textarea id="\"id_description\"" rows="\"10\"" cols="\"40\"" name="\"description\""></textarea>\n </div>\n \n </div>\n \n <div class="\"buttons\"">\n <input class="\"ajax-save-button" button\"="" type="\"submit\"">\n </div>\n</form>"], ["#selectable-factories-inline", "\n <div>\n <a class="\"selectable" selected\"\n="" href="%5C%22/manage/manufacturer/1%5C%22">\n L1\n </a>\n </div>\n\n <div>\n <a class="\"selectable" \"\n="" href="%5C%22/manage/manufacturer/4%5C%22">\n KR3W\n </a>\n </div>\n\n <div>\n <a class="\"selectable" \"\n="" href="%5C%22/manage/manufacturer/3%5C%22">\n L1TA\n </a>\n </div>\n\n"]]}

Any ideas ?

I've logged the result variable, so basically just the thing that is returned to template and it is escaped properly. So it looks like the response is getting escaped somewhere before being processed by jquery's parseJSON function. Now I'm really puzzled. — mike_hornbeck, Nov 19 '11 at 16:07
Where is the error being caught? Is it on the server side, or in the browser? — Mark Gemmill, Nov 19 '11 at 18:37

Mark Gemmill · Answer 1 · 2011-11-19T02:55:58.693

There are both double quote and its html encoding inside your json text regions. For example all your class attributes are like this in the error output:

class="\&quote;classname\&quote;"

The above should read:

class=\"classname\"

A raw json.dumps will output this:

>>> json.dumps(["#data", '<div class="classname"></div>'])
'["#data", "<div class=\\"classname\\"></div>"]'

I suspect that either your manufacturer_data_inline or selectable_manufacturers_inline calls are doubling up your quotes "\&quote; or the LazyEncoder class is doing something wrong.

simplejson double escapes data causing invalid JSON string

1 Answers1