$(...).loading is not a function

[phambinh217]

$('*[ajax-form-container]').fajax({
	beforeSend: function() {
		$('body').loading();
	},
    success: function(){
        toastr.info('The form was successfully sent');
        $('body').loading('stop');
    },
});

it error $(...).loading is not a function when i submit form!

[CarlosBonetti]

Hi @phambinh217.

Please make sure you're including the dist/jquery.loading.js file in your page.

[Xeobass]

Hi !
I've tryed to use your lib too and i have the same error.

<div id="test" style="width:200px; height:200px;">
testing...
</div>

$("#test").loading();

i use jquery v 1.12.4

i've loaded the jquery.loading.js and jquery.loading.min.js from the dist folder.

=)

[CarlosBonetti]

Hi @Xeobass !

Please load just one of the dist/jquery.loading.js OR dist/jquery.loading.min.js, but not both. The min file is identical to the other one, but minified for production.

Also, load the css file if you're not already doing so.

Another thing to consider is the order you're importing and calling the plugin: you need to first import the plugin and just then call the $().loading function. If you're calling the plugin before import you'll get a Uncaught TypeError: $(...).loading is not a function error.

[qiulin]

I had same problem. A overlay was attached to ajax request. It works well when request start, but could not stop when ajax request stopped, and caught the error message.

codes likes

$.Loading.setDefaults({
    zIndex: 9999
})

// ajax加载动画
$(document).ajaxSend(function () {
    $('body').loading({overlay: $('#loading-overlay')})
})

$(document).ajaxStop(function () {

    $('body').loading('stop');
})

[CarlosBonetti]

Hi @qiulin ! Could not reproduce here... please share the full code with your html script imports. You could use something like codepen.io for that

[ziedmahdi]

when plugin is imported using npm (Meteorjs application), I get the same error.

[CarlosBonetti]

It was a bad definition of the UMD exporter. Should be fixed at v1.3.0.