JQuery Form ajaxSubmit is not working

Question

I have a file upload form that I want to submit over Ajax/iframe using JQuery Form. I had it working when it was simple, but now I've added more to it, it doesn't work.

My form is set up so that when you click the field label, the file upload dialog pops up. When you pick a file, the form is submitted. I get alerts saying 'changed!' and 'preparing!', and then nothing.

I've tried debugging it with Safari's developer tools but I can't see what's wrong. I've tried using ajaxForm instead of ajaxSubmit, but it didn't make any difference. There aren't any reported issues, and I don't see any errors.

Here's my form (it's part of a Django template, but I've put the actual label & input in so you can see what it looks like):

<form action="{% url "edit_profile_section" user_id=end_user.pk section=section %}" method="POST" enctype="multipart/form-data" id="picture_form" encoding="multipart/form-data">
    {% csrf_token %}
    <label class="edit-profile-picture" for="id_profile_picture"><span>Edit Profile Picture</span></label>
    <input id="id_profile_picture" name="profile_picture" />
    <button type="submit" name="picture_form" id="picture_form_submit">Save</button>
</form>

And here's the JavaScript:

<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/jquery.form.js"></script>
<script>
    $(document).ready(function() {
        var options = {
            iframe: true,
            dataType: 'json',
            beforeSubmit: showPopup,
            success: editImage
        }
        $('#id_profile_picture').change(function() {
            alert('changed!');
            $('#picture_form').ajaxSubmit(options);
        });
    function showPopup(formData, jqForm, options) {
            alert('preparing!');
            return true;
        }
        function editImage(responseText, statusText, xhr, $form) {
            alert('status:' + statusText + ', response:' + responseText);
        }
    });
</script>

Answer 1

I hope you are including the javascript file for ajaxSubmit, since it is not a core jQuery method. ajaxSubmit.js