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?
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.
Related
I'm using jQuery 2.2.4. Everything was ok until I done a major renaming. I renamed the main object, from actual application name to "app". I also renamed other things, as I was changing my app name.
Unfortunately jQuery (minified) doesn't work properly now . I noticed it 2 days after. I spotted 2 weird errors. For example:
$('body').on('change','input:not(.error)', function() { });
When input is changed I get an error "cannot read property test of undefined". jQuery was concatenated with my application file. When I moved jQuery to a separate file I got "uncaught reference error: app is not defined" for that event.
I renamed my main object back from app to something specific, but it didn't have any effect. And development version of jQuery works fine. I can't run a diff, because I changed so many things. Either I will find what causes the issue, or I will have to revert and do everything again.
Does anyone know what might cause jQuery to break? I remind that it only doesn't work on the minified, development version of jQuery.
I run a MediaWiki site which uses the Topbar extension. I recently upgraded the installation to the bleeding edge version from MediaWiki's master branch: version 1.28.0-alpha (91e56cc).
Afterwards, the Topbar extension no longer works:
Usually, the topbar div is not inserted at all.
Occasionally, the topbar div appears but the links are nonfunctional.
The latter issue may be a problem with my CSS (I do not know), but the intermittent behavior concerns me. So the first order of business is to make sure the topbar div at least appears every time.
This extension is just a small javascript that is supposed to run when the page loads, to add a chunk of HTML near the top (<div id="mw-writh-topbar" ...>). It does so using a jQuery function.
Unfortunately, I am not really a web developer, so even this simple routine is a bit over my head.
Here's what I do know:
There are no 500 server errors, no overt problem with the PHP.
At some point early in my investigation, the developer console sometimes complained about Uncaught ReferenceError: jQuery is not defined, but I cannot reproduce it anymore now. Research vaguely suggested it could be because the extension does not use the new ResourceLoader mechanism, so I tried to migrate Topbar to use the ResourceLoader mechanism (via maintenance/convertExtensionToRegistration.php, and then wfLoadExtension('Topbar') in LocalSettings.php) but it did not seem to make any difference.
The Topbar hooks seem to be called, because css/Topbar.css gets added to the page. But I have no clue whether js/Topbar.js ever runs, and if so, what happens.
So: how can I debug this?
You need to convert the code to use ResourceLoader - currently the extension adds the code using OutputPage's addScriptFile(), and just assumes jQuery will be available by the time it runs. Starting with MediaWiki 1.26, everything loads asynchronously, so this doesn't work, and thus the need to convert it to the new system.
Instructions for doing so are here:
https://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers
https://www.mediawiki.org/wiki/ResourceLoader/Developing_with_ResourceLoader#Registering
Two notes:
Since MediaWiki 1.25, extensions are supposed to use the so-called "extension registration" instead of following the above manuals, but this might require more work and expertise.
Ugly hack warning: you can ignore all of this, and simply wrap the code in the JS file using RLQ.push( function(){ /* All of the code here */ } );. This shoves it all into the ResourceLoader's queue, so it will load after jQuery is available. I do not recommend this, but show it here for completeness' sake.
I am developing a videogame using EaselJS, a Javascript library.
My project works pretty fine offine, or on a local server. However, when I try to upload it on a website (ex: http://streetfighterjs.lixter.com/ ), it doesn't work anymore : my sprites aren't loading, and nothing is shown in my canvas.
The strange thing is that I tried to use PreloadJS to preload my images, but it doesn't seems to work. I was wondering if anyone already had this kind of problem, and how did he made to fix it.
You only included easel.js and sound.js.
preload.js is missing. Therefore createjs.LoadQueue is undefined.
Just include preload.js and your code should work.
You need to include preloadjs in your head (or prefferably just after your footer element).
In my project right now, I have the following order and it works fine:
<script src="../js/vendor/easeljs-0.7.1.min.js"></script>
<script src="../js/vendor/soundjs-0.5.2.min.js"></script>
<script src="../js/vendor/preloadjs-0.4.1.min.js"></script>
You should check your console from time to time:
Which is occuring from this line:
Sounds like PreloadJS is not included, or not loaded. Can you provide
a link to the sample?
Source
You are getting a typeffor from perso1 which is undefined. I notice that you are creating your perso1 global variable, but you are not actually saying what perso1 is equal to. Well you might be later in the code, but when you are getting that typerror, perso1 is not yet set.
Currently, the issue with the site is that perso1 is undefined during your tick (deplacement function). This will happen as long as the first image (imgPerso1) is not loaded.
I am also seeing XMLHttpRequest errors in the console, indicating that something is attempting to load cross-domain. If your LoadQueue is causing this, then you might want to change it to load content using tag-based loading instead of XHR:
new createjs.LoadQueue(false);
A few miscellaneous notes:
1. You don't need to constantly call stage.update() when you make changes, because you have a ticker that will constantly update the stage for you.
2. You are still using the default timing mode for Ticker (timeout-based). There is no useRAF property in version 0.8.1 - instead set the timingMode of the Ticker:
createjs.Ticker.timingMode = createjs.Ticker.RAF;
Hope that helps.
I am getting this error in Chrome's Developer Tools:
Uncaught TypeError: undefined is not a function
This error is referencing this line of my main.js file. These two lines are both causing this error to happen:
jQuery("#signupfrm").fadeToggle('fast',function(){
jQuery("#loginfrm").fadeToggle('fast',function(){
I am getting this error when working on the website on my local computer, but it's from a theme I purchased that has a demo available online.
Here's a working copy of this same template:
https://www.whmcsdesigns.com/demo/cart.php?a=add&pid=1&systpl=flex
Just select "I will use my existing domain and update my nameservers" and enter any domain name. You'll be taken to a page where personal info can be entered. You will see that you have the option to select between "New Customer" and "Existing Customer". It works at the link above.
However, on my local server it's not letting me switch between new and existing. It just gives the error show above and is referencing those lines with signupfrm and loginfrm.
I'm guessing since it's working on the link aboving, those functions must be defined. Can anyone else find where those are being defined at?
Things that I suspect to be the problem:
jQuery hasn't been loaded correctly so the jQuery function can't be performed. It might not have been loading at all or it might be called $, but if other calls to jQuery work it should be OK.
fadeToggle is a part of jQuery so I expect that to work if jQuery is loaded
jQuery("#signupfrm").fadeToggle('fast',function(){
sometimes if you load dynamically and you test on C:\ or whatever local path things don't work the same, especially AJAX calls. Set up a local webserver to work on always, just using localhost on a simple Apache is a good start
I'm having an issue where in production only (not development) I get hundreds of cannot read property 'click' of undefined with 3-30 on each click, and a few cannot read property 'submit' of undefined. This very well may not be an issue with Meteor but with my code, so I'm just looking for any ideas why this may be happening or how I can debug it. All my events are either in Template.events or Template.rendered. It happens on every page and no matter where I click.
There are a couple of things that can cause this.
The first is that in production mode latency is a lot higher. So if you've automatically assumed that when a template is rendered the data is ready you could get all sorts of undefined as the object's are null for a very short time when meteor initally loads.
You could check your code to see if you've used any findOne or find. You need to ensure that the result of your query is properly handled in the case that there aren't any results, for that initial load. i.e
var data = myCollection.findOne(...);
if(data) {
....
}
or
var data = myCollection.find(...);
if(data.count()>0) {
....
}
The other thing that might cause it are atmosphere packages that you're using that might not be mapped correctly.
To check this have a look at your network tab in the chrome inspector:
Look through for files whos extensions don't match their content (js & css files).
If a file is a .js file it might have HTML content (Meteor doesn't serve up 404 errors, instead giving them html whichever path is called, so no explicit errors are given).
If this is the case figure out which file it is and map it correctly. (You might be calling click to a plugin that didn't load correctly). In production mode files are minified and the package paths change so this might also be it.