In all browsers "Object doesn't support property or method 'ajaxSubmit'" [duplicate]

StackOverflow https://stackoverflow.com/questions/21099701

Question

I got the following piece of code, but it always gives me an error saying "Object doesn't support property or method 'ajaxSubmit'". I am not sure where is my error... Can anyone help me?

<script src="/Scripts/jquery.color.js"></script>
<script src="/Scripts/jquery.Jcrop.min.js"></script>
<script src="/Scripts/jquery.form.js"></script>
<script>
$(document).ready(function () {
    var wrapper = $('<div/>').css({ height: 0, width: 0, 'overflow': 'hidden' });
    var fileInput = $(':file').wrap(wrapper);
    $('#BTN_Upload').click(function () {
        fileInput.click();
    }).show();
    $("#INPUT_Upload").change(function () {
        var options = {
            target: '#DIV_UploadedImages',
            beforeSubmit: showRequest,
            success: showResponse,
            dataType: "json",
            clearForm: true,
            resetForm: true
        };
        $('#FORM_ImageUpload').ajaxSubmit(options);
    });
});
</script>

HTML:

 <form id="FORM_ImageUpload" method="post" action="~/Async/UploadImage">
    <input type="file" value="Post" id="INPUT_Upload">
    <img src="~/Images/button_add_pictures.jpg" id="BTN_Upload" class="ProfileButton" />
 </form>
Was it helpful?

Solution 2

Since I am new with MVC and I completely forgot that MVC automatically adds jquery to its designs I have included another link to it in the code which caused the issue.

To summarize: If you have linked twice jquery jquery-form will not work.

OTHER TIPS

When I face situations when something doesn't work and I can't understand why, I usually write a minimal required code that works. And then I add code more and more until it stops to work. This is how I find the problem place in my code.

Here is a minimum of code that should work:

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
<script>

alert($.fn.ajaxSubmit);

</script>
</head>
<body>

</body>
</html>

It alerts the source code of ajaxSubmit method. You may add parts of your code until it alerts undefined, then you'll find out why it doesn't work.

I always use this approach.

Hope it helps!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top