Formularz jquery nie działa zgodnie z oczekiwaniami. ajaxForm nie jest funkcją

Question

Próbuję użyć formularza jquery, ale to jest w ajaxole ajax nie jest funkcją. W jquery.form.js jest prawidłowo włączone, a kod jest w dokumencie gotowej funkcji ...

Jest to scenariusz:

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

       } 
      }); 

I tu jest formularz 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> 

Przygotowuję witrynę w codeigniter i mam szablon nagłówka, który jest zawarty na każdej stronie. oraz w sekcji head jestem tym wszystkie moje skrypty w tej kolejności:

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

Jestem również za pomocą jQuery UI. Czy to może być problem?

Answer 1

Ładowanie jQuery dwa razy. Drugie ładowanie jQuery zastępuje pierwsze i zamyka wszystkie wtyczki.

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

Jest to drugi jquery-1.9.1 że nie jest coraz .ajaxForm. Użyj jednego lub drugiego.

Dodaj jQuery formularz na dole skryptów

Answer 2

Zaprojektowałem dobrą uploader właśnie tak:

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

i pracował pełną i używane ajax właśnie tak:

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

Użyj tego i praca jest wykonywana

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