相同的JavaScript代码在两种不同的环境中的行为不同

Question

I had a working jQuery Progress Bar code ( http://jqueryui.com/progressbar/ ) in a huge web site until a new release crashed it with error "Uncaught TypeError: Object [object Object] has no method 'progressbar'".

I identified the root cause as jQuery being added more than once which somehow happened during the release process. Many other places on the website, for example, where jQuery Chosen ( http://plugins.jquery.com/chosen/ ) was used, crashed as well.

I managed to fix it using jQuery.noConflict(); before the problematics calls and everything went back to peace. New release to the production environment and everybody's happy.

Turns out though that everything else but the jQuery Progress Bar is fixed. To make it even more fun, I went back in my testing environment and absolutely everything is working there, including the Progress bar.

I compared all the files on the server with those in my test environment and the code is exactly the same. All other JavaScript works with no problems on the server but the jQuery Progress Bar would only continue to work in my test environment but not in Production where the "Uncaught TypeError: Object [object Object] has no method 'progressbar'" persists. Any ideas or hints what could be the issue?

Answer 1

This type of errors occur not because conflicts, but because by the time your html loads, jquery starts executing., and find null reference to which you are trying the ui . The best way to do is, put the <script> tags at the end of the document. Then, probably, your html would have been loaded, and the object to which you attached the progressbar will be ready to be attached to.

And, Since our test environments are local, script files will be local and load instantly which is not the case with production and you can not be sure of different people's bandwidths. And, these things sometimes work to fool us as they do with cached files, for the second time onward, but may not work for every client as well.