d3: HTTP404 NOT FOUND error - javascript

I have just started learning d3 and am trying to point localhost at the html file I created. It shows a blank page and HTTP404 NOT FOUND error, despite me adding some text to the source code.
Source code
Error message
Please help me figure out what I am doing wrong!

I suspect you have a subdirectory mismatched between your html referencing the d3 Javascript file and the actual location. One simple solution is to replace it with CDN - i.e., get it from a publicly available location instead of your own server. To do that, replace:
src="d3/d3.v3.js"
with:
src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"
for the latest version 4.9.1.

Related

JQuery CDN not working, and local JS script not seen

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

JavaScript failed to load resource: file not found, but the file is a Laravel auto-generated view

This is a problem that I just now encountered. When I go to certain pages within my application, I see an error in the dev console that says:
inject.preload.js:373 GET blob:http://my-app-name.test/ba65127c-383e-45b7-8159-9b52ea288658 0 ()
So, when I go to inject.preloader.js, and I find the line that is throwing the error, it says Failed to load resource: net::ERR_FILE_NOT_FOUND.
That's fine. I know how to normally fix that error. But since I'm working with laravel for the first time, I believe that the file it's talking about is one of the files Laravel automatically generates in App/storage/frameworks/views/. And if that's the case, how do I fix this error?
The error doesn't actually impact anything. The pages it appears on are all functioning normally as far as I can tell, and there don't seem to be any issues in the blade files.
I was just curious if anyone else had encountered an issue like this before. I haven't changed my blade template used for the headers and scripts, and the only thing I changed in the page that is throwing the error is adding a bootstrap 4 modal.
I can link to a github repo if needed.
I don't know why this fixed it, but I moved my javascripts includes in the master.blade.php template, and it's not a problem anymore.

angularjs error in console log for jsfiddle

I am working on an Angular grid project and i am facing a minor error while using angular-grid.
Heres the error- Module 'angularGrid' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
So i thought i am missing out on something. I checked a JSfiddle and was not able to view the output there. So i checked the console for errors. here also the same error is displayed.
JSfiddle is not even edited by me. I am just viewing the link. Yet i get the same error.
http://jsfiddle.net/9b5gnjf1/8/
<md-toolbar class="md-whiteframe-z2">
<div class="md-toolbar-tools">Toolbar</div>
Just adding the above 2 lines from the link so that stackoverflow lets me paste the jsfiddle link. without any code written, it doesnot allow to post the link here.
anyone knows what kind of error is this and how to solve it ?
There's a 404 error resolving the external link to the javascript file that the angular-grid module lives in.
Looks like either it's a bad link, or the rawgit servers are down.
You can either wait and hope the link comes back to life, or replace the broken external resource with a working one.

D3.js json error when making tree

I am trying to make my own tree in D3.js, but I am having trouble figuring out how to make one. I have looked at the following links:
http://bl.ocks.org/1249394#interactive_tree.css
d3js Tree square
and even tried copying them to get something working so that I can tinker, but it won't work for me. I have riddled the code with alerts and in both the pedigree and the collapsible tree the code stops working right after the d3.json call. I copied the json files too and renamed them so that they were the same. In the pedigree example
d3.json("info.json", function(json) {
alert(json);
var nodes = tree.nodes(json);
alert('hi');
So here the first alert works and the second doesn't, and this happens in both examples. If anybody knows why, an explanation or fix would be greatly appreciated. Thanks!!!
I figured out that when d3.json("localhost...", callback) is called it is returning null. I read on another post that there are cross domain restrictions. I am not really sure what that means or how to fix it
I have tried it both locally from the same directory as I am running my application from and I have tried it from my Xamp server. And still when the alert(json) is called it shows null.
The d3 documentation has some more information on this. Basically, your browser will not load a JSON file from the local filesystem or a server that the original page is not on. There are ways around this, for example Google Chrome can be started with --disable-web-security to disable those restrictions, but this is not recommended.
All modern browsers have a Javascript error console that will show you the exact reason for the JSON file not loading. Remember that when you serve the page through a local web server, you shouldn't specify localhost:// or similar in the path of the JSON file, just the path relative to the directory that the HTML file resides in.

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.

Categories