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.
Related
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.
I'm trying to load an external script while using Meteor.
Currently using this code in my layout.js to some success.
Meteor.startup( function() {
$.getScript('js/scripts.js');
});
However, if I go to another url and come back to it, the script no longer works. (I see it not working because my background cover image disappears.)
Any external scripts should be placed in client/compatibility, and Meteor will load it for you; no need for $.getScript('js/scripts.js');
You can then instantiate that script on the template like:
Template.game.onRendered(function(){
$('.grid').isotope({});
});
For anyone needing help with this, replace Meteor.startup with Template.name.onRendered. This helped solve my issue.
Cheers!
I'm having a (simple) issue, but I have no idea how to fix it. Essentially, every tutorial I have come across for Babylon puts all of the Javascript code inside < script > tags in the main HTML page.
However, I would like to have all of my Javascript code inside a separate file. I have tried every way of loading it as I could think of, though I am a novice at Javascript (I am decent at C++, and I can see the similarities); yet I was unable to make it load. (It works fine when called from the HTML page itself).
Does anyone know what (if anything) I can do in order to be able to load my scripts from external files, and still get everything to work? Thanks in advance!
2 options:
register to the DOMContentLoaded event in your external JS file
reference your JS file with the tag at the end of the HTML page
You can find a sample in one of my tutorials here: http://blogs.msdn.com/b/davrous/archive/2014/11/18/understanding-collisions-amp-physics-by-building-a-cool-webgl-babylon-js-demo-with-oimo-js.aspx
Enjoy and thanks for using Babylon.js! :)
David
I have tried to implement this kind of script (Page Transition): here
Everything is going fine as demo provided. But only 1 problem that I cant figure out is:
I have 2 HTML files which is index.html & index2.html. On index.html I put the link with the page transition effect after clicked it goes to index2.html which is on index2.html I was put in some alert script using body on-load method.
Supposedly in normal practice, the alert will appear as normal we seen for debuging. But it doesn't appear anything. Seem like it doesn't load any script after page transition done.
Can somebody give me a clue to solve this? What I have tried is using :
location.reload(); window.location.reload(); etc.. till I don't have idea to fix this :(
*location.reload() works on desktop browser but doesn't work on mobile. My priority target browser is on mobile version.
Please help & Many Thanks
for demo purpose and needs help : here
It wasn't executed because the page never really loaded. The way that page transition script worked is by loading the content of the target page via ajax, replacing the entire content of the page with it.
From the page you provided, it seems like the script accepts a callback function to be called when the page finishes loading, you can put your 'loaded' script there. But keep in mind, what is being executed is the script on that first page.
I don't know what you are trying to make, but I guess it would be better for you to look into a proper single page app with URL matching. There are frameworks like Backbone.js that can help you with this.
I have an javascript that I place into a page using the code below. What the code does is place an object/embed code into a webpage. Simple javascript loader to a NicoVideo movie
<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395"></script>
This works great in a webpage. But what if I want to load this javascript into a page using AJAX? This no longer works for the obvious reasons, you would need to eval the script in order to get it to run. However, I have no idea how to do this. I am using jQuery on my page; so keep that in mind. I have tried the following code, but it doesn't seem to work through AJAX, or even in a normal page load environment.
<script>$.getScript("http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395");</script>
Any ideas on how I would get this to work?
I think it works but its attempting to inline the write which I don't know if that would work in this case.
You would need to see if there was a way to essentially execute the '.getHTML' method and take that result and update an existing element on the page.
The issue though is that the anonymous function that is generated and executed inline might not work properly.
After reading official getScript reference, it seems you have to do something with that JS file you got a hold of, using something like this:
$.getScript("http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395", function () {
// use functions from loaded file
});