modulo jQuery non funziona come previsto. ajaxForm non è una funzione

Question

Sto provando ad usare il modulo jquery ma sais nel concole ajaxForm non è una funzione. I jquery.form.js sia correttamente incluse e il codice è in una funzione di pronto documento ...

Questo è lo script:

$("#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>"); 

       } 
      }); 

Ed ecco il modulo 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> 

sto creando il sito in codeigniter e ho un modello di header che è incluso in ogni pagina. e nella sezione di testa Sono compresi tutti i miei script in questo ordine:

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

Inoltre sto usando jQuery UI. Potrebbe essere il problema?

Answer 1

Si sta caricando jQuery due volte. Il secondo caricamento di jQuery sovrascrive il primo e clobbre qualsiasi plugin.

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

E 'questo secondo jquery-1.9.1 che non è sempre .ajaxForm. Utilizzare l'uno o l'altro.

Aggiungere il modulo jquery al fondo degli script

Answer 2

ho progettato un buon uploader proprio come questo:

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

e lavorato completa e utilizzato ajax proprio come questo:

$('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

Usa questo e il lavoro è fatto

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