Question

have a problem with JSON not working with Internet Explorer (IE9).
I’ve searched the web alot, and tried the different solutions, but nothing seems to work for me. So thought it was time to create a SO account and ask my first question.

I’m using JSON and jQuery/AJAX to create a simple upload progress indicator
The indicator works fine in Firefox and Chrome

This is my view function:

@never_cache
@admin_required
@render_to("editor/edit_file.html")
def edit_file(request, file_id=None):
    if file_id:
        try:
            file = Document.objects.get(pk=file_id)
            form = DocumentForm(request.POST or None, files=request.FILES or None, instance=file)
        except Document.DoesNotExist:
        form = DocumentForm(request.POST or None, files=request.FILES or None)
    else:
        dir_id = request.GET.get("dir")
        if dir_id:
            try:
                dir = Directory.objects.get(pk=dir_id)
                form = DocumentForm(request.POST or None, files=request.FILES or None, initial ={"directory":dir_id, "available_to":dir.available_to})
            except:
                form = DocumentForm(request.POST or None, files=request.FILES or None)
        else:
            form = DocumentForm(request.POST or None, files=request.FILES or None)

    result = {}
    response = locals()

    if request.method == "POST":
        if form.is_valid():
            file = form.save()
            result["status"] = "ok"
            result["href"] = reverse("portal.editor.views.files_list", args=[file.directory.pk])
            if not request.is_ajax():
                response = HttpResponseRedirect(reverse("portal.editor.views.files_list", args=[file.directory.pk]))
        else:
            result[status] = "error"
        if request.is_ajax():
            response = HttpResponse(json.dumps(result), mimetype="text/plain")
            add_never_cache_headers(response)
    return response

and here is my jQuery code:

if ($("#id_edit_form").length > 0) {
    $("#id_edit_form").ajaxForm({
        type: "POST",
        cache: false,
        dataType: "json",
        beforeSubmit:  function (formData, jqForm, options) {
            $("#id_overlay").height($(document).height()).show();
        },
        success: function (response, status, xhr, $form) {
            $("#id_overlay").hide();
            if (status === "success") {
                if (response.status === "ok") {
                    location.href = response.href;
                } else if (response.status === "error") {
                    for (var item in response.form) {
                        $("#id_" + item).parent("p").next("p.js_form-error").html(response.form[item][0]);
                    }
                } else { alert(response.result); }
            } else { alert("Error status:", status); }
        }
    });
}

I feel like I’ve tried everything. Also tried changing mimetype to “text/plain” and it still didn’t work.
I’m using Django 1.3, Python 2.6 and jQuery 1.6.1 with nginx server.

What about mimetype in nginx/mime.types? Should I add json in this file?
I really need help with this, since I’ve been tearing my head of due to this problem!

Thanks in advance

Answer 1

the syntax error was probably that comma after last }

success:       function(response, status, xhr, $form){
            $("#id_overlay").hide();
                if( status == "success" ){
                    if( response.status == "ok"){
                        location.href = response.href;
                    }else
                    if(response.status == "error" ){
                        for(var item in response.form){
                            $("#id_"+item).parent("p").next("p.js_form-error").html(response.form[item][0]);
                        }
                    }else
                        alert(response.result);
                }else
                    alert("Error status:", status);
        },

THAT last comma. IE is very picky about such stuff.

I did some reading about ajaxForm that you are using. Is this that : http://malsup.com/jquery/form/ ? Seems to me that you could use it much easyer or forget about it completely and use jquery ajax like this:

$('a.submit').live('click', function(event){
    event.preventDefault();
    var f = $(this).parents('form');
    data = f.serialize();
    if (contactIsWorking == false){
        $.ajax({
            'type':'POST',
            'url': '/contactform/',
            'data': data,
            'datatype':'json',
            'beforeSend':function(){
                contactIsWorking = true;
            },
            'success':function(data, textStatus){
                postHandler(f, data);
            },
            'error':function(jqXHR, textStatus, errorThrown){

            },
            'timeout':function(data){
            },
            'complete':function(data){
                contactIsWorking = false;
                spinner.fadeOut(500);
            }
        });
    }
});

Took this code quickly from one of my projects – it probably has too much info but i guess you can filter out whats needed