My easeljs project doesn't work online - javascript

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.

Related

Google Tag Manager and Single Page APP: How to read a DOM Element?

I want to create a variable on my GTM to store a DOM element. I've tried a custom javascript, for example:
function(){
return document.querySelector('.room__price-value').innerText;
}
But nothing, on GTM preview I see always NULL. I think the issue was the single page app.
And I can't involve the programmers.
Any suggestions?
Thanks
Make sure that when in preview, you check the value of your variable on every event on the left.
Make sure when you execute document.querySelector('.room__price-value').innerText; in your console, you actually get the result you're expecting.
Change the code until you get the result in the local console.
Make sure your timing is good, as Eike mentioned in the comment.
What you're doing there seems right. That's pretty much how you do DOM scrape in GTM when front-end devs aren't available. If the suggestions still don't work for you, give us more info on what you're doing, on how your DOM looks like, what your debugging showed and such. As much potentially useful context as you can.

How can I debug this JavaScript error?

I have been asked to fix an issue with a website and I am encountering an issue with a JavaScript error.
On the home page, [removed website link], I am receiving the error Uncaught TypeError: undefined is not a function. However, the function being called on that line (line 30) should exist, as the jQuery plugin is being loaded.
The call-stack just shows a series of anonymous functions pointing towards the jQuery file. I am having trouble determining why this is producing an undefined function error.
I have tried using the Chrome debugger to step through the code where the error occurs but it just seems to highlight the jQuery source file for every step.
My question is this:
How do I go about tracking down the source of the issue when the trail is just a series of anonymous functions in the jQuery source file?
Is there something I am missing here or that I am not considering?
Thank you.
Edit:
As is it not clear, the method being called, jQuery.ContentSlider is in fact being included within the page within the file testimonials.js.
This is not just a "What's wrong with my code" question, but also an inquiry into how I handle situations such as this in the context of JavaScript & jQuery specifically.
A call stack of anonymous functions is confusing to me, and I have already attempted to take the obvious steps, such as verifying the plugin is included and that this inclusion takes place before attempting to utilize that plugin.
Sorry for the confusion.
Edit - Solution Found
It appears that although jQuery and the plugin were included prior to use, another copy of the same jQuery file was being injected by a Joomla! module. Since this was the exact same Google hosted jQuery file, it did NOT appear twice in the Resources tab in the Chrome Developer Tools. It appears that Chrome will parse jQuery twice, but doesn't show it as being included twice. So, the version with the plugin attached was being overwritten.
Thank you to those who answered. Thanks to A. Wolff for bringing that piece of information about the Resource tab to my attention.
You're loading the slider after you instantiate it.
Reverse the order of these two blocks:
<script type="text/javascript">
$(function() {
jQuery('#two').ContentSlider({
width : '440px',
height : '240px',
speed : 400,
easing : 'easeOutQuad',
textResize : true
});
});
</script>
<script src="/templates/sp/javascript/jquery.sudoSlider.min.js"></script>
Edit: To the heart of your well-formed question about debugging, generally, Undefined is not a function, especially when dealing with frameworks, is a symptom of trying to access a method before it exists, which is why your attempted function call returns undefined rather than a function.
It's almost always the result of loading a framework after trying to call it, or in an asynchronous context, of not waiting for the framework to load or do something important.
EDIT 2: The above answer is not correct, as A.Wolff points out: it's not that you must reverse the order of the two blocks, but that:
1) The second framework is probably not the one you want, or
2) You have called jQuery('#two').ContentSlider when you meant to call .sudoSlider, (or whatever is appropriate for that framework).

Same JavaScript code behaves differently in two different environments

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.

Why the copied HTML doesn't look like the original HTML?

I copied the generated source code (View Source -> View Generated Source in the Firefox Web Developer Toolbar) of Google's Keyword Tool page to a new HTML file.
But, when I open this new file, some of the items looks stretched for some reason:
The original website looks like this:
I guess that Google create some elements and set various attributes using Javascript, but I copied the page after it has been generated. So, why is this difference?
UPDATE 1
The only JS/CSS file, which is not given as a full path, is:
<script language="javascript" src="/cues/cues.js">
I tried replace this with:
<script language="javascript">
Contents of '/cues/cues.js' here
</script>
but it didn't help.
UPDATE 2
In the browser's error console I found the following 2 errors:
Error: com_google_ads_apps_servers_cues_CuesRelease is not defined
Source File: https://adwords.google.com/cues/768DAEDDB2193AB5B05B9C6A01394D78.cache.js
Line: 1
Error: com_google_ads_apps_targetingideas_client_TargetingIdeas is not defined
Source File: https://adwords.google.com/o/Targeting/756D6AF3BB4DD4A68315E34F50C2BC7E.cache.js
Line: 1
Any ideas why these errors appear?
UPDATE 3
Apparently, the reason is that the DOCTYPE declaration is missing. After I added <!DOCTYPE html> to the stretched version, it solved the problem. Can anyone explain why?
When you save a page, you only get the version of HTML served from the server in its original form. Any mods to the DOM made after load using JS will not be part of the save.
EDIT
I could not trace out the exact reason for the error as the code is really cryptic! In any case, if all you want is to be able to reproduce the exact page offline, then you can do a 'save page as..' from your browser (choose web page, complete). I tried this with FF as well as Chrome and it is working fine in both cases. While opening the saved page, it might be best not to use IE as its a certified choker when it comes to even the slightest error in code. :)
The most likely reason for the error is an cross-domain AJAX security exception (fired when the calling client side script and called server side script are from different domains). The 2 variables namely, com_google_ads_apps_servers_cues_CuesRelease and com_google_ads_apps_targetingideas_client_TargetingIdeas seems to be initialized using the return of some AJAX call (which couldn't execute bcoz of the secu excep), and as a result remain as undefined.
You must be missing some css and js which is not on the page but referred from somewhere else.
The most probable reason is that the CSS and the corresponding images that might be referred within it are not getting applied correctly.
Check the paths of the CSS and for the images (background) within the CSS...You might need to correct the paths to fix the issue.

'$ is not defined' in code following jQuery include

I'm getting the familiar '$ is not defined' error in my JavaScript for the following line in one of my javascript files...
$(document).ready(function() { … }
Normally this is because I've forgotten to include jQuery, but not this time! I have included it, and it is the first include in the page. This error happens in included JavaScript files, and also in any code within tags, all of which come after the jQuery include. It also doesn't happen all the time, maybe half the time when I refresh the page.
I've also used jQuery quite a lot and never seen this before, so I am quite confused.
Edit:
Looking at the Net tab in Firebug, jQuery is being requested and I get a 200 response but nothing is sent back in the response body. If I open the file directly in a new tab or whatever, I get an empty document. Firefox seems to think the file is cached but the data size is 0. Cache control is 'no-cache'. Confused.
Edit 2:
Opened jQuery file in VisualStudio, saved jQuery file with no modifications, everything works perfectly now. Still totally confused.
Are you sure that jQuery is actually being loaded into the browser? It sounds like it really isn't. You should use Firebug or Fiddler to check all the http requests to see if it is actually being downloaded.
Here's a screenshot of how you can check this using Firebug.
Are you using Wordpress or some sort of CMS? If so, their version of jQuery may have of code at the end which calls jQuery.noConflict(). You can read about this method here: http://api.jquery.com/jQuery.noConflict/
This means that whenever you want to use the $ function, you need to use jQuery instead.
For example...
Instead of
$("p").addClass("awesome");
You would do
jQuery("p").addClass("awesome").

Categories