[解決済み] jquery form が期待通りに動作しない。ajaxForm が関数でない。

質問

jquery formを使おうとしているのですが、consoleにajaxForm is not a functionと書かれています。 jquery.form.jsはちゃんとインクルードされているし、コードもdocument ready functionの中にあるのですが...。

これがそのスクリプトです。

$("#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でサイトを作っていて、各ページに含まれるヘッダーテンプレートを持っています。そしてheadセクションに、私のスクリプトをこの順番ですべて含んでいます。

<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を使用しています。それが問題なのでしょうか？

解決方法を教えてください。

jQueryを2回読み込んでいる。 2回目のjQueryの読み込みは1回目の読み込みを上書きし、あらゆるプラグインを台無しにします。

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

それは、この2番目の jquery-1.9.1 を取得できていない .ajaxForm . どちらか一方を使用してください。

スクリプトの一番下にフォームjqueryを追加します。