I'm trying to use blueimp's jQuery file upload. I should have all of the requirements linked in this page. I don't see any file loading errors. What's happening is that the file upload button intermittently doesn't work and Firebug throws the following errors:
TypeError: $.widget is not a function
$.widget('blueimp.fileupload', {
jquery....load.js (line 87)
TypeError: $(...).fileupload is not a function
$('#pdf-upload')
I'm not sure what causes this error intermittently.
Header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Admin</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/css/admin.css" rel="stylesheet" type="text/css" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/jscripts/gen_functions.js"></script>
<script type="text/javascript" src="/jscripts/validation.js"></script>
<script type="text/javascript" src="/jscripts/selectbox.js"></script>
<script type="text/javascript" src="/jscripts/admin_products.js"></script>
<script type="text/javascript" src="/mainhold/6DKkzyUpi/ckeditor.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/jscripts/qfax-events-admin.js"></script>
<!--Google Analytics Code Here -->
<!--- eg the below link would only show on the index page
<link rel="canonical" href="" />
--->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
Footer:
<script type="text/javascript">
jQuery( document ).ready( function( $ ) {
var $currentPaymentDiv = $('#check-payment');
$('#pdf-upload')
.fileupload( {
'url' : $('#fileupload').data( "url" ),
'dataType' : "json",
'done' : function( e, data ) {
data = data.result;
if( data.success ) {
if( data.rows instanceof Array ) {
for( var i=0, length=data.rows.length; i<length; i++ ) {
var row = data.rows[ i ];
if( row.success ) {
$('#no-pdfs').hide();
$('#case-pdf-header').after(
'<tr><td class="tabledata" valign="top">'+
'<a class="delete-pdf" href="'+row.delete_url+'"><i class="fa fa-times"></i> | '+
'<a class="edit-pdf" href="'+row.edit_url+'"><i class="fa fa-edit"></i>'+
'</td>'+
'<td class="tabledata" valign="top"><a href="'+row.view_url+'">'+row.filename+'</a></td>'+
'<td class="tabledata" valign="top">'+row.sent+'</td>'+
'<td class="tabledata" valign="top">'+row.modified+'</td>'+
'<td class="tabledata" valign="top">'+row.created+'</td>'+
'<td class="tabledata" valign="top">'+row.login_staffname+'</td></tr>'
);
}
else {
alert( "Error uploading. "+row.message );
}
}
}
}
else {
alert( "Error uploading. "+data.message );
}
//console.log( data );
}
} );
} );
</script>
<script src="/jscripts/jQuery-File-Upload-9.11.2/js/jquery.iframe-transport.js"></script>
<script src="/jscripts/jQuery-File-Upload-9.11.2/js/jquery.fileupload.js"></script>
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="/jscripts/jQuery-File-Upload-9.11.2/js/cors/jquery.xdr-transport.js"></script>
<![endif]--></td>
</tr>
</table>
</td>
</tr>
</table>
<br /><br /><br /><br />
<br /><br /><br /><br />
</body>
What fixed it was putting the CKEDITOR after the jQuery includes.
Resulting header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Admin</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/css/admin.css" rel="stylesheet" type="text/css" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/jscripts/gen_functions.js"></script>
<script type="text/javascript" src="/jscripts/validation.js"></script>
<script type="text/javascript" src="/jscripts/selectbox.js"></script>
<script type="text/javascript" src="/jscripts/admin_products.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/mainhold/6DKkzyUpi/ckeditor.js"></script>
<script type="text/javascript" src="/jscripts/qfax-events-admin.js"></script>
<!--Google Analytics Code Here -->
<!--- eg the below link would only show on the index page
<link rel="canonical" href="" />
--->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>