Async upload problem using jquery.form.js

Question

I'm using the jquery.form plugin to asynchronously upload documents in an MVC project.

Taking my lead from this previous answer, here's what I have on the page:

<% using(Html.BeginForm("Create", "JobFile", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" })) %>
<% { %>
<%: Html.ValidationSummary() %>

    <input type="file" id="fileToUpload" />
    <input type="submit" value="Upload file" />
    <input type="text" id="RelatedFileName" />

<% } %>

<script type="text/javascript" src="../../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.form.js"></script>
<script type="text/javascript">
    $(function () {
        $('#uploadForm').ajaxForm(function (result) {
            if (result.errorMessage != '') {
                alert(result.errorMessage);
            } else {
                $('#RelatedFileName').val(result.fileName);
            }
        });
    });
</script>

My problem is that when the page loads I get the following javascript error:

Uncaught TypeError: Object # has no method 'ajaxForm'

This error is found on the line containing

$('#uploadForm').ajaxForm(function (result) {

Can anyone tell me why I'm getting this error?

Just an FYI, `/Scripts/jquery.form.js` will work the same (if not more consistently) as `../../Scripts/jquery.form.js` - both start at the site root. — Tieson T., Jul 15 '12 at 08:33

jps · Answer 1 · 2012-07-26T11:08:59.873

4

Check that jquery isn't being included in the page twice.

edited Jul 26 '12 at 11:08

answered Jul 18 '12 at 17:10

jps

1,060
12
19

1

Thanks a million.! After breakin my head over it for hours and hours, this was the solution, – idok Mar 13 '13 at 00:18

Sushant Kulkarni · Answer 2 · 2012-07-15T08:27:12.147

Here is the method that I am using for MVC3, CodeIgniter and Yii. One important this is that your should specify method="post", enctype and encoding="multipart/form-data"

var submitForm = function(_formId){
var _genMsg = $('#genMsg');
_submitForm = $('form').index($('#'+_formId));
if(subCommonForm(_submitForm, 'main')){
    _genMsg.attr('class', 'information-box round');
    _genMsg.html('Saving...');
    $('#'+_formId).ajaxForm({
        dataType: 'json',
        success: function (data) {
            _genMsg.attr('class', 'information-box round');

            data.code == 0
                ? _genMsg.attr('class', 'confirmation-box round')
                : _genMsg.attr('class', 'error-box round');

            _genMsg.html(data.message);
            _genMsg.fadeIn();
        }
    });

    $('#'+_formId).submit();
}
};

score 0 · Answer 3 · answered Nov 21 '13 at 15:58

0

check if you have the $

$('#your-form')

and not

('#your-form')

answered Nov 21 '13 at 15:58

ad_on_is

1,500
15
27

score 0 · Answer 4 · answered Nov 18 '10 at 20:06

0

Is 'uploadForm' the id of your <form> object? If it is then you may wan to check in something like FireBug to make sure your plug-in is included on your page properly.

answered Nov 18 '10 at 20:06

wajiw

12,239
17
54
73

Yes, 'uploadForm' is the ID of my form. The downloaded source is "
". If I use the debug/source tool in Chrome I can see that jquery.form.js IS being downloaded (it's listed on the "Scripts" tab).
– awj Nov 18 '10 at 20:18
IE9 says pretty much the same: the script file IS downloading, and the error that it comes up with is "SCRIPT438: Object doesn't support this property or method". – awj Nov 18 '10 at 20:22
You may have to change your script then so it gets called on page load: $(document).ready(function () { ...code...}); That way the form will have the function prototyped correctly if the plug-in is installed. Otherwise I would look into your script, because that should work. – wajiw Nov 18 '10 at 20:26
I've copied the entire jquery.form plugin script and pasted it into a – awj Nov 20 '10 at 11:46
Is it stored locally? If so it may be a permissions issue. – wajiw Nov 20 '10 at 16:30
Yes, it's stored locally. When you say "permissions issue" do you mean this might be preventing it from downloading? If so then I can see that the script does download to the browser. Maybe there could be a permissions issue with the upload, but this issue relates to the client-side javascript engine apparently not being able to locate the function... or maybe I'm thinking along the wrong lines. – awj Nov 20 '10 at 21:29
It would prevent downloading so you wouldn't be able to see the code from the browser. If that's happening properly it has to be a problem with the javascript. – wajiw Nov 20 '10 at 21:32
@wajiw This already is using the `ready` function - `$(function(){...})` is identical to `$(document).ready(function(){...})`. – Tieson T. Jul 15 '12 at 08:31

score 0 · Answer 5 · answered Nov 18 '10 at 20:18

0

The shortcut:

$(function () {

Doesn't work in latest version of jQuery, have to use:

 $(document).ready(function () {

answered Nov 18 '10 at 20:18

Liam Bailey

5,879
3
34
46

That's helpful to know, but I wouldn't be getting the error on page load if "$(function(){" wasn't working in the version I'm using. Nonetheless, thanks for the tip, and I have now changed it. – awj Nov 18 '10 at 20:32
This is just plain wrong. I have 1.7.2 and this works without any errors. – Tieson T. Jul 15 '12 at 08:35
At the time of writing it was true of the latest version – Liam Bailey Jul 15 '12 at 21:40
Hmm. I didn't notice the date-stamp. If you edit your question I can remove my downvote. – Tieson T. Jul 18 '12 at 07:35

Async upload problem using jquery.form.js

5 Answers5