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.
– Tieson T., Commented Jul 15, 2012 at 8:33

jps · Accepted Answer · 2012-07-26 11:08:59Z

4

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

edited Jul 26, 2012 at 11:08

answered Jul 18, 2012 at 17:10

jps

1,08012 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

idok Over a year ago

Thanks a million.! After breakin my head over it for hours and hours, this was the solution,

Sushant Kulkarni · Accepted Answer · 2012-07-15 08:27:12Z

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();
}
};

wajiw · Accepted Answer · 2010-11-18 20:06:36Z

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, 2010 at 20:06

wajiw

12.3k17 gold badges56 silver badges73 bronze badges

8 Comments

awj Over a year ago

Yes, 'uploadForm' is the ID of my form. The downloaded source is "<form action="/JobFile/Create" enctype="multipart/form-data" id="uploadForm" method="post">". 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 Over a year ago

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".

wajiw Over a year ago

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.

awj Over a year ago

I've copied the entire jquery.form plugin script and pasted it into a <script> element on the page. Same situation - error message still appears. So downloading the file isn't the root of the issue, but somehow the script isn't being loaded. I've re-downloaded the file to ensure that I haven't missed a closing brace or anything like that, but I still have the problem.

wajiw Over a year ago

Is it stored locally? If so it may be a permissions issue.

|

Liam Bailey · Accepted Answer · 2010-11-18 20:18:27Z

0

The shortcut:

$(function () {

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

 $(document).ready(function () {

answered Nov 18, 2010 at 20:18

Liam Bailey

5,9053 gold badges37 silver badges46 bronze badges

4 Comments

awj Over a year ago

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.

Tieson T. Over a year ago

This is just plain wrong. I have 1.7.2 and this works without any errors.

Liam Bailey Over a year ago

At the time of writing it was true of the latest version

Tieson T. Over a year ago

Hmm. I didn't notice the date-stamp. If you edit your question I can remove my downvote.

ad_on_is · Accepted Answer · 2013-11-21 15:58:15Z

0

check if you have the $

$('#your-form')

and not

('#your-form')

answered Nov 21, 2013 at 15:58

ad_on_is

1,55815 silver badges28 bronze badges

Collectives™ on Stack Overflow

Async upload problem using jquery.form.js

5 Answers 5

1 Comment

Comments

8 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

8 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related