jquery ajax form success callback not being called

Question

I'm trying to upload a file using "AJAX", process data in the file and then return some of that data to the UI so I can dynamically update the screen.

I'm using the JQuery Ajax Form Plugin, jquery.form.js found at http://jquery.malsup.com/form/ for the javascript and using Django on the back end. The form is being submitted and the processing on the back end is going through without a problem, but when a response is received from the server, my Firefox browser prompts me to download/open a file of type "application/json". The file has the json content that I've been trying to send to the browser.

I don't believe this is an issue with how I'm sending the json as I have a modularized json_wrapper() function that I'm using in multiple places in this same application.

Here is what my form looks after Django templates are applied:

<form method="POST" enctype="multipart/form-data" action="/test_suites/active/upload_results/805/">
  <p>
     <label for="id_resultfile">Upload File:</label> 
     <input type="file" id="id_resultfile" name="resultfile">
  </p>  
</form>

You won't see any submit buttons because I'm calling submit with a button else where and am using ajaxSubmit() from the jquery.form.js plugin.

Here is the controlling javascript code:

function upload_results($dialog_box){
    $form = $dialog_box.find("form");
    var options = {
            type: "POST",
            success: function(data){
                alert("Hello!!");
            },
            dataType: "json",
            error: function(){
                console.log("errors");

            },
            beforeSubmit: function(formData, jqForm, options){
                    console.log(formData, jqForm, options);
                },
        }
    $form.submit(function(){
        $(this).ajaxSubmit(options);
        return false;
    });
    $form.ajaxSubmit(options);
}

As you can see, I've gotten desperate to see the success callback function work and simply have an alert message created on success. However, we never reach that call. Also, the error function is not called and the beforeSubmit function is executed.

The file that I get back has the following contents:

{"count": 18, "failed": 0, "completed": 18, "success": true, "trasaction_id": "SQEID0.231"}

I use 'success' here to denote whether or not the server was able to run the post command adequately. If it failed the result would look something like:

{"success": false, "message":"<error_message>"}

Your time and help is greatly appreciated. I've spent a few days on this now and would love to move on.

Answer 1

Ok I just spent hours with this same problem going through the js file line by line. It was working one second and then the next it wasnt. My problem was - I had deleted the target div for the results. Once i put that back in, it worked fine.

Answer 2

In case anyone had a similar problem, here's the final javascript I ended up using:

function upload_results_dialog($data_elem){
    var $dialog_box = $("#ajax-dialog-box"),
    data = $data_elem.attr("data");
    $.ajax({
        url: "../upload/" + data+ "/",
        success: function(response){
            $dialog_box.html(response);
            $dialog_box.dialog("option",
                {
                    title: "Upload",
                    height: 260,
                    width: 450,
                    buttons: {
                        Cancel: function(){
                            $(this).dialog('close');
                        },
                        Upload: function(){
                            upload($(this));
                        }
                    }
                }
            );
            $dialog_box.dialog('open');
        }
    });
}
function upload($dialog_box){
    var $form = $dialog_box.find("form"),
      iframe = $dialog_box.find("iframe"),
      $html = $($iframe.contents()),
      $iframe_form = $html.find("form");
    $iframe_form.html($form.contents());

    //Set the onload function
    $iframe.attr("onload","check_file_uploaded_valid()");
    $iframe_form.submit();
}

Answer 3

Happened to me as well. Problem turned out to be the server wasn't converting the entire object to proper JSON. Changed the return value to only the properties I needed:

return Json(new {Id = group.Id, Name = group.Name});