jqueryフォームが正常に動作しません。 ajaxFormは関数ではありません

Question

jqueryフォームを使用しようとしていますが、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も使用しています。それが問題だろうか？

Answer 1

jQueryを2回ロードしています。 jQueryの2回目の読み込みは、最初のプラグインを無効にし、プラグインを取り除きます。

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

それは.ajaxFormを取得されていません。この二jquery-1.9.1です。どちらか一方を使用してください。

私はちょうどこのような良いアップローダーを設計し、スクリプトの下部

Answer 2

にフォームのjQueryを追加します。

<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.'); 
    } 

    }); 

Answer 3

これを使用して作業を完了しました

<script src="http://malsup.github.com/jquery.form.js"></script>