Error loading jQuery form

Question

I am using this version of the jQuery form plugin https://raw.github.com/malsup/form/master/jquery.form.js getting the error message:

an error in the form.submit();

 SCRIPT87: Invalid argument. jquery.form.js, line 347 character 5 

My code is:

 <form id="ajaxUploadForm" action="@Url.Action("Upload", "Home")%>" method="post" enctype="multipart/form-data" > <fieldset> <legend>Upload a file</legend> <label>File to Upload: <input type="file" name="file" /></label> <input id="ajaxUploadButton" type="submit" value="Upload" /> </fieldset> </form> $(function () { $("#ajaxUploadForm").ajaxForm({ iframe: true, dataType: "json", beforeSubmit: function () { // $("#ajaxUploadForm").block({ message: '<img src="/Content/themes/start/images/progress.gif" />' }); }, success: function (result) { // $("#ajaxUploadForm").unblock(); //$("#ajaxUploadForm").resetForm(); $.growlUI(null, result.message); }, error: function (xhr, textStatus, errorThrown) { //$("#ajaxUploadForm").unblock(); //$("#ajaxUploadForm").resetForm(); $.growlUI(null, 'Error uploading file'); } }); }); 

I am doing this loading in the side simple model dialog box.

Maybe someone has ideas on how to fix this?

Answer 1

If the controller action that you send POSTING returns JSON, you may need to wrap it with <textarea> tags, as described in the documentation:

Since it is not possible to upload files using the browser XMLHttpRequest Object, the form plugin uses a hidden iframe element to help with the task. This is a common technique, but it has inherent limitations. The iframe element is used as the goal of the form to submit the operation, which means that the server response is written to the IFrame. This is normal if the response is an HTML or XML type, but does not work either if the response type is script or JSON, both of which often contain characters that must be represented using entity references if found in HTML markup.

To account for script problems and JSON responses, the Plugin form allows these answers to be embedded in the textarea element, and it is recommended that you do this for these types of answers when used in conjunction with file uploads. please note, however, that if not, enter the file on the form, then the request uses normal XHR to submit the form (not iframe). This puts a burden on the server code to know when to use the text field, and when not to. If you want, you can use the iframe option of the plugin to force it to always use iframe mode and then your server can always insert the response in the text field.