I might have wrote my title incorrectly, but my problem is when i render it using ExpressJS the functionality i had in my HTML file doesn't work anymore.
Can you please elaborate?
What error are you getting?
Maybe, you are loading and executing the script before your page loads.
In that case, your JavaScript will fail to get objects from the DOM (because there is nothing in it).
Try using defer when you load your scripts.
Related
I created a vanillaJS script that is used by several other websites. The script-server went down for a couple of minutes last week and the result was that several of the sites using the script were not loading correctly (slow, pages not loading at all, errors, etc.) because the sites kept on "waiting" for the external script to load.
I noticed ALL these sites had the script in de head. I suggested moving the script-tag to the footer plus adding the 'async' attribute. But is this the best solution?
Sidenotes:
Can't use jQuery
Can't use a framework like Angular or React
Preferably don't use additional JS on the site itself
The script created it's own content and does not rely on anything on
the page it's served on. It simply created a div with content from a
datababase staticly served in very basic JS to avoid cross-site
errors.
Thanks in advance.
async will make the script to load asynchronously and will be be executed while the page is reading.
defer will make the script to execute once the page is loaded although it's highly depends on the browser at to my tests IE9, IE8 supports this. You can make a quick check with this defer in fiddler
But there is one more alternative to have the script tag at the bottom as
<script>
window.onload = function() {
var element = document.createElement("script");
element.src = "vanillaJS .js";
document.body.appendChild(element);
};
</script>
But i guess these will not solve your problem where the script is not accessible cause of server fault. I suggest to have the local copy of the script in the website folder and reference it.
i want to include a file that must be used only when a jade file is render client side, this is the .jade file:
button(type="button")#start.flex
p#timer.flex
button(type="button" )#stop.flex
script(src='../public/js/timer.js')
The js file will handle the timer function, i have a console log in the .js file but it is never fired. What i'm doing wrong? I canno't import it in the head because the element won't be ready yet.
Thus i have to find a way to include and use timer.js only when this file is render. Thank you guys
JavaScript inserted as DOM text will not execute.
You must load the script file initially, with the document load. When loading content via AJAX response, execute whatever javascript function or functions you want in the success handler. There are other ways as well, but your current design wont work.
Checkout this link:
http://caih.org/open-source-software/modularjs/loading-javascript-script-vs-ajax-vs-both/
I have some javascript that looks like this:
$('.resultitem').click(function(event){
alert('check this gets called');
location.href='viewinfo/'+$(this).attr('rel');
});
this code works fine on my local machine but after uploading to the server it doesn't seem to get called at all. Can anybody help me understand why?
UPDATE: As mentioned below this was caused by a script error higher up. While debugging with firebug, I noticed on the server that in the net tab a GET jquery.cookie.js failes with a code of 406 not acceptable.
I had to rename to jquerycookie.js to keep this particular hosting provider happy. I did a little more research and this could be due to the following:
"anything with .cookie. in it triggers an Apache mod_security warning, stopping the file from being served, effectively making this unable to work"
Are you including your JavaScript files using Cake's HTML helper? For example:
echo $this->Html->script(array('jquery-1.4.3.min'));
Note that following Cake's conventions, I've left off the .js file extension. In my experience, this has created problems where the production server thinks that .min is the file extension and attempts to load a nonexistent file called jquery-1.4.3.min, which means jQuery isn't loaded and therefore the snippet you've posted would fail.
I'm not sure if this is how you're loading your scripts, but in general it's safer to use the entire file name, like so:
echo $this->Html->script(array('jquery-1.4.3.min.js'));
I'm loading user control through jQuery in my asp.net page.
User control contains JavaScript files, while loading the user control all my js load at one time which are dependent on each other and they tend to give error while all file load at one time. So I want that my JavaScript file to load synchronously one by one , as one file get completely loaded than next file should start loading .
Is there any way to set synchronously mode in JavaScript? or any JavaScript to set this? Any pointer or suggestion would be really helpful.
You should use jQuery.load() to load only a HTML fragment and not a full page with the scripts. jQuery use DOM structure of the loaded document to modify the DOM structure of the corresponding part of your page (controls).
In general you can use jQuery.ajax to load a script, but I recommend you to use the simplified form jQuery.getScript() instead. jQuery.getScript() can be used to load a JavaScript file from the server using a GET HTTP request and then execute it. Using success event handler you can do some action after the script are loaded.
JS files are loaded in the order you put them in your HTML code.
For example,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
You always need to load jQuery before jQuery UI (or UI will not be recognize since it uses the jQuery $ shortcut) so you must put the line with jQuery before the one with jQuery UI into your HTML.
And when your page is fully loaded, js will start thanks to window.onload, $(document).ready(function(){}); for jQuery or via the first command it will encounter.
JavaScript files always load synchronously. In fact, JavaScript always runs synchronously because it is single threaded.
My guess is that you need to work out which order to include the files so that it runs properly. You can use the window.onload event to run script once all of the JavaScript and images have been loaded.
I have some js file generated with php., name by example "my_file.js.php", served with appropriate content-type for JS.
In FF, IE7, Chrome, etc.. all works fine, these files are correctly loaded.
But, in IE6, ths is more complicated :
- first load of the page : file is not loaded, and consequently, I have some JS errors on my page
- If I did a page refresh, all is now ok
Did anyone of us experience some strange behaviour like this ?
(it seems clearly linked to the fact the files are not "pure" .js files, because my other .js files are correctly loaded.
I got it !
After all, the problem was not linked to JS.. but my PHP.
I have a call to "session_start", and it seems that the "no-store" header sent by this call was no very well managed by IE6.
I added a session_cache_limiter('none'); before my call to session_stat and all is now OK.
For french speakers, here is some informations :
http://www.developpez.net/forums/d619691/php/langage/sessions/header-session_start-sous-ie/#post3691413
Well, it's hard to say without the source, but maybe you could try putting the defer attribute in your script. That way your script might get loaded after the body, circumventing the error.