Beniamin Szabo Beniamin Szabo - 8 days ago 5
Ajax Question

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

I am trying to use jquery form but it sais in the concole ajaxForm is not a function.
The jquery.form.js is properly included and the code is in a document ready function...

This is the 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>");

}
});


And here is the 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 am making the site in codeigniter and i have a header template that is included o every page. and in the head section i am including all my scripts in this 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 am also using jQuery UI. Could that be the problem?

Answer

You are loading jQuery twice. The second loading of jQuery overrides the first and clobbers any 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 is this second jquery-1.9.1 that is not getting .ajaxForm. Use one or the other.

Add the form jquery to the bottom of the scripts