Форма jquery не работает должным образом. ajaxForm не является функцией

Я пытаюсь использовать форму jquery, но в concole ajaxForm это не функция. jquery.form.js правильно включен, и код находится в функции готовности документа...

Это сценарий:

$("#apply-form").ajaxForm({

                beforeSend: function()
                {
                    $("#progress").show();
                    //clear everything
                    $("#bar").width('0%');
                    $("#message").html("");
                    $("#percent").html("0%");
                },
                uploadProgress: function(event, position, total, percentComplete)
                {
                    $("#bar").width(percentComplete+'%');
                    $("#percent").html(percentComplete+'%');

                },
                success: function()
                {
                    $("#bar").width('100%');
                    $("#percent").html('100%');

                },
                complete: function(response)
                {
                    $("#message").html("<font color='green'>"+response.responseText+"</font>");
                },
                error: function()
                {
                    $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

                }
            });

А вот HTML-форма

<form id="apply-form" enctype="multipart/form-data" method="post" action="">


    <table>
                <tr><td>CV:</td>
                    <td>
                        <input type="file" name="cover">
                    </td>
                </tr>
                <tr><td>Cover Letter:</td>
                    <td>
                        <input type="file" name="curriculum">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="progress">
                            <div id="bar"></div>
                            <div id="percent">0%</div >
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="message"></div>
                    </td>
                </tr>
            </table>
        </form>

Я делаю сайт в codeigniter, и у меня есть шаблон заголовка, который включен на каждую страницу. и в разделе заголовка я включаю все свои скрипты в следующем порядке:

<script src="/jobs/public/js/jquery.js"></script>
<script src="/jobs/public/js/jquery.form.js"></script>
<script src="/jobs/public/js/javascript.js"></script>
<link href="/jobs/public/js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

Я также использую jQuery UI. Может ли это быть проблема?


person Beniamin Szabo    schedule 04.09.2013    source источник
comment
Сам jQuery также загружается правильно? Можете ли вы также сделать jsfiddle с вашим HTML?   -  person Ofir Israel    schedule 04.09.2013
comment
Ага. и он загружается перед формой jquery   -  person Beniamin Szabo    schedule 04.09.2013
comment
любая другая ошибка в вашей консоли   -  person Arun P Johny    schedule 04.09.2013
comment
Возвращает ли $().ajaxForm в инспекторе вашего браузера функцию `ajaxForm?   -  person doctororange    schedule 04.09.2013
comment
никаких других ошибок. только этот   -  person Beniamin Szabo    schedule 04.09.2013
comment
$().ajaxForm возвращает значение undefined...   -  person Beniamin Szabo    schedule 04.09.2013
comment
ajaxForm библиотека может быть не загружена, когда документ будет готов, вы можете найти это на вкладке сети Chrome или в консоли инспектора.   -  person Jai    schedule 04.09.2013
comment
Не могли бы вы показать нам, где и как вы загружаете скрипты?   -  person    schedule 04.09.2013
comment
в firebug в разделе сценария jquery.form.js отображается как включенный   -  person Beniamin Szabo    schedule 04.09.2013


Ответы (4)


Вы загружаете jQuery дважды. Вторая загрузка jQuery переопределяет первую и стирает все плагины.

<script src="/jobs/public/js/jquery.js"></script>
<script src="/jobs/public/js/jquery.form.js"></script>
...
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>

Именно этот второй jquery-1.9.1 не получает .ajaxForm. Используйте тот или иной.

Добавьте форму jquery в конец скриптов

person Explosion Pills    schedule 04.09.2013
comment
Спасибо чувак. Я не осознавал, что включил его дважды... второй был из пользовательского интерфейса jQuery :) - person Beniamin Szabo; 04.09.2013
comment
Ваше сообщение только что спасло меня от потраченного впустую целого дня, обнаружена двойная загрузка jquery. Благодарность - person Smith; 17.11.2014

Используйте это, и работа сделана

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script>
person Gautam    schedule 06.04.2015
comment
Больше не работает. Вместо этого используйте это: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script> - person kpaul; 01.05.2021

я разработал хороший загрузчик вот так:

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.form.js"></script>

и работал полностью и использовал ajax вот так:

$('form').ajaxForm
    ({

    beforeSend: function() 
    {
    var percentVal = '20%';
    prog.css("width",percentVal);

    },
    uploadProgress: function(event, position, total, percentComplete) 
    {
    var percentVal = percentComplete + '%';

    prog.css("width",percentVal);
    darsad.html(percentVal + ' uploading .');
    //console.log(percentVal, position, total);
    },
    success: function() 
    {
    var percentVal = '100%';

    darsad.html(percentVal + ' uploaded success.');
    prog.css("width",percentVal);

    },
    complete: function(xhr) 
    {
    //status.html(xhr.responseText);
    darsad.html(percentVal + ' uploaded complete.');
    }

    }); 
person barnameha    schedule 15.10.2013

ajaxForm is not a function в основном означает, что либо функция не существует, либо где-то у функции есть проблемы.

Я исправил это, отсортировав загрузку/путь плагина и файл js. В моем случае функцию нельзя вызвать из-за неправильного порядка.

person Asyraf Roszaki    schedule 16.02.2021