CODEWITHSUNDEEP
jquery
etoisarobot
etoisarobot

Reputation: 7794

How to handle data returned from .ajaxSubmit() call?

I am using the Jquery Form Plugin to submit a forms data like this.

    $('#AddLocalImageForm').ajaxSubmit({
                    beforeSubmit: function() { alert('b4'); },
                    success: function(data) { alert('afa');},
                    dataType: 'json'
                });


<form id="AddLocalImageForm" action="Service/UploadCustImage.ashx" method="post" enctype="multipart/form-data">
        <input type="file" name="CustImage" id="CustImage" />
    <br />
    <label for="ImageName">Name</label> 
        <input type="text" name="ImageName" id="ImageName"/>
    <br />
    <input type="submit" />
</form>

The page I am posting data to is an ashx page that has 

context.Response.ContentType = "application/json";

and returns data with a 

context.Response.Write(JsonData);

I can see everything is posted properly and I am getting the corect Json Data back but I am always prompted to download the Json data from my browser. What I want to do is be able to take the returned data in the background and update some Dom elements. The beforeSubmit Function executes but the success function never does. If I copy the code from the plugin sample page I get the same thing.

How can I make it so the returned data is handled by the function rather than prompting me to download?

Update: So if I change the content type on the ashx page that handles the posted data to 

context.Response.ContentType = "text/html";

I am no longer prompted to download the file but I am still unable to handle the returned data because the success function never executes. Do I need to tell it that it succeeded or if data is returned does it just assume success?

Upvotes: 4

Views: 14238

Answers (2)

etoisarobot
etoisarobot

Reputation: 7794

To answer my own question in hopes that it may help someone else someday.

So it looks like the reason success never runs is because it doesn't believe the request succeeded. If I change to 

            $('#AddLocalImageForm').ajaxSubmit({
                    beforeSubmit: function() { alert('b4'); },
                    success: function() { alert('Run on Success'); },
                    error: function(request, errordata, errorObject) { alert(errorObject.toString()); },
                    dataType: 'json'
                });

With the ContentType of the ASHX set to 

   context.Response.ContentType = "text/html";

I get an error that the ASHX is returning invalid json. So if I comment out the dataType option like 

                $('#AddLocalImageForm').ajaxSubmit({
                    beforeSubmit: function() { alert('b4'); },
                    success: function() { alert('Run on Success'); },
                    error: function(request, errordata, errorObject) { alert(errorObject.toString()); }
                    //dataType: 'json'
                });

I am not prompted to download the file and am able to process the returned Json;

Wheeewwwww!!!

Upvotes: 4

Orbling
Orbling

Reputation: 20602

The file input does cause massive problems with AJAX submission, as it is not supported via XMLHttpRequest, the Form plugin has a work around, but it means the form works in a slightly different way than usual as far as return data is concerned.

Have a read of the documentation for the plugin with regard to the file upload issue.

Upvotes: 2

Related Questions