For the past hour I am trying to get jQuery plugin to work.
What i can't resolve is this js error Uncaught TypeError: $(...).fileupload is not a function
,
I tried a lot of things.. i even downloaded the js files from the demo site and still this error appear,
How can i solve it? this is my js file(as you can see the pluging is getting called only when dom is loaded:
$(document).ready(function () {
$('#fileUpload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
this is my .cshtml (i am using asp.net mvc) code file:
<h2>Index</h2>
<!-- Bootstrap styles -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- blueimp Gallery styles -->
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link href="~/Assets/plugins/jqueryFileUpload/css/jquery.fileupload.css" rel="stylesheet" />
<link href="~/Assets/plugins/jqueryFileUpload/css/jquery.fileupload-ui.css" rel="stylesheet" />
<!-- CSS adjustments for browsers with JavaScript disabled -->
<link href="~/Assets/plugins/jqueryFileUpload/css/jquery.fileupload-noscript.css" rel="stylesheet" />
<link href="~/Assets/plugins/jqueryFileUpload/css/jquery.fileupload-ui-noscript.css" rel="stylesheet" />
<input type='file' multiple id='fileUpload' name="files[]" data-url="@Url.Action("Upload","Home")" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="~/Assets/plugins/jqueryFileUpload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- blueimp Gallery script -->
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-ui.js"></script>
<script src="~/Assets/scripts/js.js"></script>
After changing
$(document).ready(function ( ... ) {
to
$(document).load(function ( ... ) {
the error disappeared.