I am working on a site which has a footer that contains a Google Map. On the homepage the footer is coded on the page and displays just fine: http://www.clickityclick.me/morehampton/index.html
However, in all the other pages I call the footer from an external file using jquery like this:
<script>
$(function(){
$('#header').load('header_contact.html')
$('#fatFooter').load('footer.html')
$('#rightNav').load('rightNav.html')
});
</script>
On the pages where the footer is loaded like this, the map does not display every time - only occasionally.
Am I missing something simple that is causing the map to not display correctly every time a page is loaded? I do not want to have to code the footer onto every page.
Any suggestions welcome.
At the moment when you call init_map() #map_canvas doesn't exist(it will be loaded later).
Call the function in the load-callback:
$('#fatFooter').load('footer.html',function(){if(!window.map){init_map();}});
additionally add this to the begin of init_map() to avoid errors:
if(!document.getElementById('map_canvas')){return;}
Usually this has to do with the CSS file not playing nice or it cannot find something and defaults to the browser's default values. When I checked this console log for your home page it contained no errors. But when i checked other pages it threw an error that stated "Uncaught TypeError: Cannot Read property 'offsetWidth' of null' which is the maps width value in short. This might be due to the 404 errors on all the pages except index.html which can be seen in your browsers Source tab.
is showing a 404. I would resolve these 404 errors and it should solve your problem.
You're setting up a race condition between the header/fatFooter/rightNav loading code and your callMap script. All those files are loaded asynchronously, so there's no guarantee which will finish first. In order to prevent your callMap script from running before the fatFooter is loaded, you'll need to use a callback instead of relying on the window's load event.
Since you're using it in two places, it might be easiest to wrap the body of init_map in a try/catch (to handle the case where the race condition doesn't go your way), and add a script block to the bottom of footer.html that calls init_map - but also wrap it in a try/catch. So either way, one try/catch block will trigger.
Another option is to create a custom event that is triggered by the loading of footer.html, and listened to by the callMap script.
Related
On a website I am using a script that send a request, but on inspect element its showing this message:
The resource "RESOURCE" was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
and the request is not getting sent.
How do i fix this
In the page that this preload request is described, please make sure a function within the script file is called as part of the DOMContentLoaded event (which is earlier than the window.onloadevent) or earlier . This ensures the function is initialized within some time.
without additional code - preload snippet, usage snippet within an HTML page or an MVCE - Only directional help can be provided.
Best of luck!
I'm starting fresh with a new blank Intel project and I haven't even started coding yet. I'm just setting up my file tree and making sure the html and javascript pages are connected via the right anchors and script paths. My first .js file won't work though.
I've included a screen shot of test code and the errors. I know the syntax is correct because it works when I put it in <script> tags in the index.html file.
I'm getting "document not defined" and "alert not defined" errors or the js page though. I don't know what that means.
I've considered that my script tag src path in the index file is incorrect, but all the paths are relative in the commented out template script tags intel provides on the index page right out of the box, so why would I have to use an absolute path?
My path is: js/Test.js and it's the last script tag before the body.
Index.html file
*****UPDATE****
So I've tried a few things and it's still not working but I HAVE managed to get my errors down to just one inexplicable "missing semicolon", which will turn into an "unnecessary semicolon" error if I place it.
Any way as per the first screen shot you'll see that I wasn't placing the document object inside of an explicitly declared variable. Once I did that and accessed it through dot syntax instead of an equal sign then I stopped getting the error. I included this screenshot to show my work before I made the changes.
so the problem I went on to have is that unless every function or dom object was declared with "Var", I'd get an error. This includes the alert() function which I don't think I've ever seen needing to be declared that way, but I gave the code editor what it wanted and this last screenshot is the results. It's not working, BUT I'm not getting the errors I was before, except for the missing/unnecessary semicolon paradox. Removing it or including it throws an error.
JavaScript can be loaded before or after the HTML, however the way it is done is slightly different depending on how you do it.
For example if you wish to include your JavaScript files within the head of the HTML file then you must wrap your JavaScript code with either DOMContentLoaded or jQuery's $(document).ready().
The common misconception of using window.onload will not fix the issue where the elements have not loaded in correctly.
The Mozilla Developer Network states on this page:
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event - load - should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.
That quote in itself should prove that onload should not be relied on if you want the full DOM to be loaded properly before you start manipulating it. Instead you should do the following:
Vanilla
document.addEventListener("DOMContentLoaded", function (e) {
/** DOM has been fully loaded here, so manipulation can begin. **/
/** Your code here. **/
});
jQuery
$(document).ready(function () {
/** DOM has been fully loaded here, so manipulation can begin. **/
/** Your code here. **/
});
Click this link to see the difference between vanilla and jQuery.
The second way you can load JavaScript is by having all the script tags within the body but after all the HTML, that way it is guaranteed to load after the HTML.
Example
Try this working example I quickly coded up.
HTML
Replace the content within the body tag of your HTML to the following:
<button id="myJsTest">Click Me!</button>
<div id="clickCounter">Click Count: 0</div>
Replace the contents of your JavaScript with the following:
JavaScript
document.addEventListener("DOMContentLoaded", function() {
var clickCount = 0;
document.getElementById("myJsTest").addEventListener("click", function() {
clickCount++;
document.getElementById("clickCounter").innerText = "Click Count: " + clickCount;
});
});
Then use the Emulate tab in Intel XDK to test it.
Additional Information
When I use Intel XDK and I have an error, I quickly load the file in to the browser and check the console. It can be a really helpful and effective way of squashing those pesky little bugs.
Try using window.alert as alert is defined in the window object.
The reason you're seeing all those "error" messages in the editor window is because you've got the various JSLint/Hint tools loaded in the editor. They're trying to keep you honest and save you lots of time in the debugger chasing potential syntax errors.
The editor inside the XDK is Brackets, it is using standard Brackets extensions to provide those JSLint/Hint tools. You can download it and run it standalone on your system and edit directly within it, you don't have to use the editor inside the XDK (or you can use any other editor you like).
Because the Lint/Hint tools only look at one file at a time, and because your app is normally spread over multiple files, they don't know much about about what's defined in your other files. Likewise, those hint/lint tools need to be told that you're using some of the standard global methods and properties that are expected to be found in a browser (but which may not be found in other JavaScript environments, because JavaScript is no longer limited to just a browser environment -- in fact, your XDK app, aka Cordova app, runs inside a "webview" not in a browser, but that's another story...)
So, you should follow some standard practice of setting up your JSHint/Lint directives at the top of your JS files. For example, this is a good starting point:
/*jslint browser:true, devel:true, white:true, vars:true */
/*global $:false, intel:false */
See the JSHint documentation for details... and see the "Blank Cordova Starter App" in the "Start a New Project" section of the Projects tab for a better blank template to start (there is no real difference between a blank template and a demo app, they are structured identically).
For a more complete and even more instructive app, see the "Hello, Cordova" sample app. Both of those apps can also be found on the Intel XDK GitHub repo.
You are adding the js file that is <script src="js/Test.js"></script> inside header tag.
So js will be first loaded and and it will attach all events to it. But when js is loaded button id="jsTest" is not present because DOM is not loaded.
Solutions :-You can follow either of the approach
Add your js files after DOM is ready
<body>
<button id ="js/Test.js">Test JS</button>
// other HTML tags
<script src = "js/Test.js></script>
</body>
Use window.onload
The load event fires at the end of the document loading process.
window.onload = testJsFile(){
//Your code goes here
}
I will prefer to use the first approach since that also address other issues like page loading time
Try to put the line outside your JS function
document.getElementById(......
inside your html page between
<script>HERE</script>
If this is still no working. Try to add onClick attribute to the button like this:
<button id="" onClick="testJsFile()">
Its also good to use google chrome element inspection while devlopping cuse it will give you error msg for all these things.
I'm trying to set up a demo page for an API I'm developing at work, but I can't get my JavaScript to work. The JavaScript should poll on my server to check if the elaboration has ended and then perform the necessary operations to get the result on the browser, but I keep getting this error:
Failed to clear temp storage: It was determined that certain files are unsafe for access within a Web application, or that too many calls are being made on file resources. SecurityError
After the first time I decided to simplify my code, cutting off calls until I got it working and the add up. Currently my function looks like this, but I still get the same error (I cleared the browser's cache, so it is not executing old versions):
function getStatus(){
window.alert("Prova");
}
It should execute when a div is loaded:
<div id="LoaderImage" onload="getStatus()">
...
</div>
Since I can see the loading gif inside the div I am sure the div is being loaded, but the function doesn't do anything anyway.
The JavaScript and jQuery code used inside my template works fine, so the main suspect for the error is this function, which is the only one which does not work.
Use onload on body instead. I would prefer to invoke it on the window object like this,
window.onload = getStatus;
or to use it on <body> .. </body> do this:
<body onload="getStatus()">
...
</body>
I had a javascript file(initial.js) on the page inserted through the script tag like so:
<script src="initial.js"></script>
This file creates dom elements(let say two links) and also loads another jQuery plugin(plugin.js) asynchronously via jQuery ajax method. Clicking on those two links brings up a module from the jQuery plugin(plugin.js).
The javascript file(initial.js) was then modified to load asynchronously on the page via jQuery ajax instead of via script tag. This has resulted in some events not getting attached to the links intermittently and this results in the plugin not being called.
I believe the browser is loading the async scripts in its own order and hence the links fail to launch the plugin intermittently. Any pointers to resolve this issue with this new set up?
At a high-level, I think you need to look into something like require.js. Alternatively, you could look into some jQuery event handling code which allows you to listen on load events of calls which may help you determine when one script loaded before loading the next one.
You have probably tried something like this in the past:
var output;
$.get('data.php',function(data){
output=data;
});
alert(output);
You will get an undefined error because Javascript doesn't wait around for the AJAX call to be returned before moving onto the next code.
Same thing goes for scripts. If you place multiple calls to multiple scripts, you will probably get the smallest one returned the quickest, and that script executed. If you load a script that is 10kb and then one that is 1kb, the 1kb script will probably return the quickest and then be executed even though it was called after the 10kb script.
To correct this, you could make a queue system and then only load each script after the previous has loaded:
var scripts=['script1.js','script2.js','script3.js'];
$(document).ready(function(){
loadScript();
});
function loadScript(){
if(sendQueue.length==0)
return;
$.getScript(scripts[0],function(){
scripts=scripts.slice(1);
loadScript();
});
}
But if you are loading scripts from within scripts from within scripts... very Inception like, then this still may not work.
I have a Wordpress site set up on my local machine where I'm building a custom theme. In an 'enqueue-assets.php' file, I am using wp_enqueue_script to load a main bundle javascript file. In that bundle are additional imports of other .js files. In one of the imported .js files is the following function:
function svgPageJump(target){
alert(target);
}
I also tried assigning the function to variable, just to make sure I got the same results explained below:
let svgPageJump = function(target){
alert(target);
};
and
var svgPageJump = function(target){
alert(target);
};
When I call this function in the same .js file with .ready():
$(document).ready(function(){
svgPageJump('section-plan');
});
I get the alert when the page loads, as expected. I also get the alert by just calling it after the function declaration (also as expected.)
Unfortunately this isn't working on click events elsewhere on the page. Ultimately I'm trying to get these events to fire when clicking elements in a SVG, to create page jumps. On the clickable elements I'm using:
onclick="top.svgPageJump('section-plan');"
Clicking on the element gives me this error:
Uncaught TypeError: top.svgPageJump is not a function
at SVGGElement.onclick
At first I thought it was a targeting issue from the SVG, but I did another test on a bit of text elsewhere on the page. In a Gutenburg Heading Block in a Wordpress Page, I placed the following markup using the HTML editor for the block:
<h2 id="section-plan" onclick="svgPageJump('section-plan');">PLAN</h2>
I also did this in a Custom HTML Block, but either way when I click the h2 on the actual page I get this error:
Uncaught ReferenceError: svgPageJump is not defined
at HTMLHeadingElement.onclick
I'm obviously missing something (probably something simple) but not sure how to track the problem down between the theme's files (which are all working correctly otherwise) or the event being defined in the page via the Wordpress admin, or...?
Another note on this... I originally used the simpler approach to making these page jumps using anchor tags and associated ids. This worked fine but I have a sticky header on the page so when the page scrolls, the element with the id scrolls under the header so I am attempting to use JavaScript/jQuery to account for the header height.
Thanks!
As per this question (which I'd close as a duplicate of it if has an upvoted answer):
var in the top level of a non-module script will create a property on the window object. So will using a function declaration. You can access this from a frame via top.
let does not create a property on the window object, so you can't access it that way if you use let.