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?
You are loading jQuery twice. The second loading of jQuery overrides the first and clobbers any plugins.
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