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.
Related
I can't understand this for the life of me. I normally work with Python, but am trying to dabble a bit in web development with JQuery. I've used the CDN from google, and have done everything from putting the script below the footer (A site I found said that was the best spot), to moving it up into the header (every other site I've been to since says that is the best spot), and nothing works.
From the error in the inspection tools 'Loading failed for the with source “http://localhost:63342/HTML/Omnifood/resources/javascript/script.js”.' It suggests to me that it can't even find the .js file I created to hold my code, but it is there, defined. (See screenshots attached)
Any help getting this sorted out would be appreciated.
Screenshot of HTML and file structure, as well as error in inspection tool:
Edit: The issue has been resolved in so far as the folder has been moved to the correct location (/resources/javascript/script.js), I even went in and added type="text/javascript" to all the script files just in case. Now when attempting to run script with following JQuery code:
$(document).ready(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
I get the following errors in inspection tool:
The path is wrong http://localhost:63342/HTML/Omnifood/resources/javascript/script.js
your script.js is at
http://localhost:63342/HTML/Omnifood/vendors/javascript/script.js
EDIT: See my answer below, since this works now :)
Fair warning, I've only been coding in JavaScript/JQuery for a couple months now, and I feel this is just something simple I haven't picked up on yet. There are quite a few similar questions around SO, and the web, but none of the answers I'm finding seem to be working for me.
I'm referencing a few external JS files in the <head> element of my html file...
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="javascript" src="globalVars.js"></script>
<script type="javascript" src="gatherInfo.js"></script>
</head>
The variables I have stored in globalVars.js, are working fine. I can access them with no problem. However, the functions I have stored in gatherInfo.js are showing up as Uncaught ReferenceError: functionName is not defined in the console of the browser (both Chrome and Firefox).
The gatherInfo.js file is just a bucket of functions I'm using to gather/parse data from a server. For example, here's the very first function in the gatherInfo.js file...
var getAuthInfo = function() {
authInfo = $.ajax({
type: 'POST',
url: '/api/auth',
data: {"type": "normal", "username": loginName, "password": loginPassword},
success: setAuthToken,
error: authFail,
dataType: 'json',
async: true
});
};
If I move the functions from the gatherInfo.js file, and put them directly into the html file, in the <body> element, within a <script> element, they work fine.
I'm willing to post everything I've tried, but that would turn this into quite a lengthy question... so let me know if any other info would be helpful.
EDIT: #Derek This gets confusing, so bear with me... I feel I'm missing something here.
Here are my file sizes for my external JS files;
gatherInfo.js = 4.4KB
globalVars.js = 611B
Now, here's what I see in the network tab on Chrome Dev Tools on each load attempt.
(Note: I'm loading the page with "Empty Cache and Hard Reload" on each attempt)
With my src attributes set like so src="/globalVars.js" and src="/gatherInfo.js"...
The network tab shows the files being fetched, but the size of each file being fetched is 1.5KB, which doesn't match of course.
Now, with my src attributes set without leading /, like so src="globalVars.js" and src="gatherInfo.js"...
The globalVars.js file being fetched is 912B, and the gatherInfo.js file being fetched is 4.7KB.
Assuming the slightly larger file size is just packet overhead,
it looks like it's now at least fetching the correct files. The function calls are still reporting as not defined though.
Here's where I start getting really confused...
If I change my src attribute to something nonsensical/nonexistent, like so src="/dub/mud/fub/globalVars.js"...
It still shows that it's successfully fetching the files, but they're back to 1.5KB in size... so clearly not the correct file. But it doesn't return a 404 not found.
And to go one step further, if I set the src attribute to a filename that just doesn't exist src="fubar.js"...
It will kick back a 404 not found error.
I have no idea why it's acting like it's fetching globalVars.js and gatherInfo.js, even when I give it a completely incorrect path, but it'll kick back a 404 on a nonexistent file.
EDIT: I went ahead and setup a gist with all 3 files in their entirety.
https://gist.github.com/Eschin/317dc67a50a1297393d0
As you can see, in overview.html, where I have all the JS functions commented out in the body... if I uncomment those, they work fine. They break when moved to the gatherInfo.js file, and are referenced via the script tag.
I am only guessing at the issue you're having, but if your functions are wrapped in an IIFE, using var would not make those variables global.
I think the best idea would be to add a global namespace for your code. Each file should have the following template code:
(function(){
if ( !window.myNamespace ) {
window.myNamespace = {};
}
myNamespace.function01 = function(){ /* add code here */ };
myNamespace.function02 = function(){ /* add code here */ };
})();
In your case, use getAuthInfo instead of function01, etc... and then when you call a function, make sure to include that namespacing. For example:
myNamespace.getAuthInfo();
OK, I figured out what was causing the issue... turned out to be an NGINX problem.
Quoted from http://www.webreference.com/programming/javascript/external/2.html, in order to use external JS files...Your Web server must be set up to map the ".js" file extension to the MIME type "text/javascript."
I noticed by clicking on the file name in the Network tab of the dev tools, that the server was actually returning Content-Type: application/x-javascript.
Also, seeing elsewhere that application\javascript was the most current MIME-type to use, I made this change...
Editing the /etc/nginx/mime.types file on the server, and changing application/x-javascript js; to application/javascript js; fixed the problem. All external files getting fetched are returning as Content-Type: application/javascript now, and they're working :)
Looks like I have some reading to do, as I've always just ignored MIME-type... not even really sure what it is, exactly... But problem fixed!
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 have to implement an existing frameset with JavaScript/jQuery. I´ve embedded the developer version jQuery JavaScript Library v1.9.0.
Every time the right-frame loaded a new HTML-file a function will check the content of this new loaded document. This process will fail sometimes, it´s not possible to understand when (and why) because it occurs randomly.
This is the line which will try to access the frames content:
var Jrightframe = $(iframe.find('frameset#myID frameset frame[name="right"]').get(0).contentWindow.document);
Sometimes, as I said it above, the message will be:
SCRIPT70: permission denied jquery.js, line 3882 character 2
I think it´s a same origin policy problem because I tried this locally (C: partition). But what is the problem to load a file from the partition if the js-script runs on the same partition?
Can somebody please help me to find out what´s going on here?
I searched a long time and found multiple problems like my problem. Ok here is what solved the problem:
Update the jquery core to v1.11.0. It seems only to appear in older versions.
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").