ajax - jquery form not working as expected. ajaxForm is not a function -


i trying use jquery form sais in concole ajaxform not function. jquery.form.js included , code in document ready function...

this script:

$("#apply-form").ajaxform({                  beforesend: function()                 {                     $("#progress").show();                     //clear                     $("#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 upload files</font>");                  }             }); 

and here html form

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

i making site in codeigniter , have header template included o every page. , in head section including scripts in order:

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

i using jquery ui. problem?

you loading jquery twice. second loading of jquery overrides first , clobbers plugins.

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

it second jquery-1.9.1 not getting .ajaxform. use 1 or other.

add form jquery bottom of scripts


Comments

Popular posts from this blog

html - How to style widget with post count different than without post count -

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

javascript - storing input from prompt in array and displaying the array -