Javascript and Jquery is not loading on normal page refresh, but loads correctly on hard refresh (CTRL+SHIFT+R) and Incognito.
I'm calling the functions through window.onload:
window.onload = function() {
adddata(); adddata_pages();
adddata_views7();
adddata_pages7();
adddata_views1();
adddata_pages1();
};
And I'm including the Jquery files in this order in the head of html:
jquery.min.js , bootstrap.min.js , Chart.min.js , jquery.dataTables.js.
And in the end (before closing body tag) I'm calling my external js file which has all my functional code.
Can please anyone help as where I'm going wrong or what is the solutions for this?
Load your external js file inside document ready tags. jQuery has to be first in load order.
$( document ).ready(function() {
//load here your file
});
It is depends on your IDE in NetBeans you should refresh the cache to see the changes. Because refreshing page is not helping at all.Alternative solution is that you could use nodejs which uses auto refreshing when typing.
Related
I am trying to do something which I feel should be elementary and basic but it is not working. I have looked at many related Stackoverflow QAs but none covers this exact issue.
I want to run a function from an external js file called main.js. The file is loaded at the bottom of the body section of an html page in the usual way. All contents of the file is within the standard jQuery wrappers. I know it is loading properly because I can see it in Developer Tools and various animations coded in it are running correctly. I have jQuery 3.3.1 loaded in the head section of the page and again it must be loading properly because the animations are working.
As a test I have the following function in main.js:
function alerttest() {
alert('Function test works');
}
Then in the main body of the html page I call the function as follows:
<script>
alerttest();
</script>
So when I refresh the page I should get an alert but this does not happen. I get an error in the console:
Uncaught ReferenceError: alerttest is not defined.
This would happen if I loaded scripts in the wrong location so I also tried this to call the function so the DOM would be loaded first:
<script>
$(function() {
alerttest();
});
</script>
but I get the same Reference error. Can anyone suggest what is going on?
Environment: Windows 10, VSCode, Codeigniter 3, jQuery 3.3.1, WAMP with PHP 7.4.7
I believe I have solved the problem and, as I suspected, it was about the location of scripts. I have always been advised to include scripts at the bottom of the page just above the closing body tag but this didn't work in this instance. I have now located my main.js in the head section along with the jQuery CDN and everything works just fine.
Many thanks for responding.
I'm using Rails 4. I have a javascript file, app/assets/javascripts/exotic_fonts.js, which adds some javascript functionality to fonts. When I load the homepage this javascript file is automatically loaded on the homepage, however it's not loaded automatically on other pages such as /user/show and the functionality is missing. However if I refresh the page, then the javascript file is loaded and the functionality is back. I was wondering how I can fix it.
Also, is it possible to load only some of the javascript files on a certain page?
Thanks.
You can use following snippet to fix this issue. Now your js code will works with turbolinks.
ready = ->
// Your javascriptcode goes here
$(document).ready(ready)
$(document).on('page:load', ready)
I'm using Head js to load my javascript files in parallel. I added head js to my head and then used head.js("path/to/file/my.js"); but when I load my webpage the script is missing. Only after refreshing a few times does the whole script work properly. Why do I need to refresh it to make it work? Any suggestions would be appreciated!
As the scripts are loaded asynchronously, you can't use it immediately. After you have refreshed the page, it will find the script in the cache, so it will load in time for any code needing it sometimes.
Use the ready method for any code that needs the script:
head.ready(function() {
// any code that needs the script to be loaded first
});
Another way is to mark your library and then get the ready event when your script is loaded. Read more from http://headjs.com/ Labeling scripts.
head.ready("your", function() {
});
head.js(
{jquery: "http://http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"},
{tools: "http://cnd.jquerytools.org/1.2.5/tiny/jquery.tools.min"},
{your: "http://a.heavy.library/we/dont/want/to/wait/for.js"},
// label is optional
"http://can.be.mixed/with/unlabeled/files.js"
);
So I am having a hard time getting $.mobile.changePage to function properly. I call it like this:
$.mobile.changePage( "DataformsM-AddRecord.html", { transition: "slide"} );
But for some reason, when the HTML page is loaded, none of the external .js (the files that I wrote to actually do something) are included. I am following the significant loading conventions of
-Jquery
-(CUSTOM JS)
-Jquery Mobile
Does anyone know why this is not getting loaded properly? Also, the pageshow function is not getting fired either, which is strange. It looks like this:
$("div[data-role*='page']").live('pageshow', function(event, ui) {
loadFormFields();
});
Now the page is rendered, but none of the functional things happen. If I hack it and do something like this:
document.location.href="DataformsM-AddRecord.html";
It will function properly.
jQuery Mobile does not pull the whole page into the dom, it grabs the first data-role="page" element and its descendants and pulls that into the current dom.
So any scripts in the <head> of the document will not be included.
I generally put all the functional JavaScript for my site on the index page and then when external pages are loaded into the dom they can benefit from the already loaded scripts.
Also, you can place JavaScript code inside the data-role="page" element and it will be included when jQuery Mobile does its AJAX load of the page.
UPDATE
A good system for this is to put all of your JS into an include file and include it on each page of the site. It will be ignored if pages are brought into the DOM by AJAX, but if someone refreshes somewhere in your site, the JS will be available.
So building off of what Jasper so wisely noted above, I came up with a working solution.
Basically I Load up all of my JS and CSS files into the index page to start. Now when you load, this method will be triggered for the pageshow
$("div[id*='page1']").live('pageshow', function(event, ui) {
setTimeout(function() { window.scrollTo(0, 1) }, 100);
doStuffWhenPageintializes();
});
Once I call the $.mobile.changePage( "someOtherPage.html", { transition: "slide"} );, the pagehide method will get fired for the page1 object. This is where you can trigger the method to initialize the page you are transitioning to.
$("div[id*='page1']").live('pagehide', function(event, ui) {
setTimeout(function() { window.scrollTo(0, 1) }, 100);
loadStuffForNewPage();
});
Now you can remove the document.location.href="external.html" line and simply use the native JQM call. Hope this helps some people.
Kindly repeat the head section with all the scripts in each html page, since change page will cause reload of pages and will re create head section...
a simple change page like this would then work:
$.mobile.changePage('abc.html', {
transition: 'slide'
});
It seems that there is no "right" way provided by JQM to load external html files. Thanks a bunch to Jasper for the solution.
JQM suggests an AJAX reload if we want to switch to external pages, like:
<a href="foo.html" rel="external">
or
<a href="foo.html" data-ajax="false">
I tried both but they didn't work - I"m programming for native apps, so maybe it may work for web apps?
I solved this by putting script in the head section of last loaded page that helped and worked for me. JQM is not getting the head section of recently loaded page in the DOM so not bringing the JS content of the recent page. By putting all the script in an External JS file or by putting it in the head section of very first page might do the trick for you.
I too am looking for this solution the "correct way" for loading external pages. However, I will concur, that your hack does indeed work. I'll take the hack for now:
$(document).ready(function(){
$("#page1").bind('ended', function(){
$.mobile.changePage($(document.location.href="external.html"), 'fade');
});
});
I have encountered a problem. When I use jQuery to load a page that contains heavy javascript, the page freezes. I believe it is because the js executes before the page loads as my local site does not freeze. However, $(document).ready(function(){}); seems not working with dynamically loaded pages? is that true? or anything i could do to solve this problem. Thanks a million!
$(document).ready() works fine in dynamic pages. There must be an error in your code somewhere.
The first thing to do is to try View Source and save the HTML to a plain .html file, then load that file in your browser. If that still fails then you know the problem has nothing to do with the server-side ASP/PHP/whatever code. Then try removing HTML and JavaScript piece by piece until the problem disappears. That'll help you narrow down the culprit line(s). If you can reduce your page to a small file that still demonstrates the problem, post that here and we'll try to help.
Try using
$(window).load(function(){
dosomething();
});
It will run the js after the whole page is loaded.
Avoid using
$(document).ready(function(){
dosomething();
});
It will run the js just after the loading of DOM.