JavaScript file(jQuery steps) not loading in Google Chrome - javascript

I am using a jQuery plugin the file name is jquery.steps.js.
I include it in index.html unambiguously but Chrome will not load this script. It was somehow in the cache earlier which is why I never noticed this.
Can anyone suggest what the problem might be and how in the world I can get it to load.
Thanks in advance

Im not sure why you are getting that problem but you could solve it adding
'?whateverHere'
at the end of your src attribute of the script, that will enforce the script to be loaded again.

Related

No CSS and JS loading on Wordpress site after enabling plugin

Quick question: as someone who is using Wordpress a lot, I am first time ever noticing that I can't see any Javascript files associated with my plugin (ULike plugin) on my website when I enable that specific plugin. The HTML is loaded, but CSS and JS files are entirely missing and thus not loaded on the page...
I ran out of options. I already removed cache, enabled debug mode in Wordpress (didn't give any errors), checked the console and logs...
Any idea what might cause this error and what else I can do to check what is going wrong?
It might be an error with your URL ( www ) while loading CSS and JS.
Fixing all the links of CSS and JS should work.
I have an answer to my own question. It was because <?php wp_head() ?> was not added in my header.php that is was not working.
Problem solved!

How do I force jQuery to load first?

I am trying to add bootstrap-select to my Flask app and I keep running into the error "TypeError: $(...).selectpicker is not a function". Everything I've read says this only occurs if you load jQuery again after loading bootstrap-select.js, so I went through and cleaned up my scripts, ensuring that jQuery was being loaded before all my other JS scripts, like so:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"> </script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
However, I was still getting the same problem. I decided to take a look at the order of loading in the chrome developer tools window, and now I think my problem is this: jQuery is being queued for loading before bootstrap-select, but it's not actually starting the download until after bootstrap-select has already finished. I suspect this is because of the difference in size between the two.
Is there any way I can force my other scripts to delay loading until after jQuery has already loaded? Or if I figure out how to cache a copy of jQuery in my static directory, will that help?
Edit: Wow, okay, I got a lot of comments on this! To try and clarify as much as possible, I'm just going to make some notes:
After thoroughly checking all my scripts, I can confirm that only one copy of jQuery is being loaded.
This is not an https page, I'm running it locally on a Flask development server.
I checked the bootstrap-select url I have in my code and it is the correct one. Sorry, I'm not sure why it left out the dash when I was copy-pasting. I have corrected the question accordingly.
I have been using the Network tab in chrome's dev tools to check loading successes/times.
I moved my jQuery to the very beginning of the file to ensure it would load first, and I can now confirm it is finished loading before bootstrap-select loads.
Despite all this, I'm continuing to get the same error, so if anyone has other suggestions I would appreciate them. I'm completely out of ideas at this point.
You should put defer at the end of both script tags, so they are loaded in order no matter what, like this:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous" defer></script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrapselect/1.13.1/js/bootstrap-select.min.js" defer></script>
Try changing the URL for your bootstrap select library to:
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js
I have the solution and it's dumb as heck.
I was adding my scripts to the same place the previous developer added theirs, in the base template that all my other templates extend. The thing is, they added theirs to the end of the page, after the body tag was closed (presumably to make page loading faster). The little bit of jQuery which was using selectpicker was in the body, and was thus trying to load the function prematurely.
Thanks for all your answers!

Tracking script sources in chrome dev tools [duplicate]

I'm having trouble with fbevents.js, I don't know why but is loading with my page, I'm nor importing it anywhere neither putting it inside a script tags referencing it.
Image from my page:
What do you guys think could be the problem?
I had the same problem and in my case I noticed it is one of the scripts loaded by the Google Tag Manager.
http://staticw2.yotpo.com/QxG0HurQF664N9LddhiDMsxHjx9XYsaVgWcDBnme/widget.js
above widget.js script load fbevent.js.
here is the related code line. view source and search for fbevent.you can find that line.
(window,document,"script","//connect.facebook.net/en_US/fbevents.js"
Yeah GTM contained a section for fb code so just pause that in GTM studio and its fixed

BabylonJS Execute Script from External File

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

preventing JS running when the page is not loaded

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.

Categories

Resources