How do I force jQuery to load first? - javascript

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!

Related

Javascript cannot be loaded in time

I'm running a flask web app and i getting an error like this:
get (some js source) net::err_invalid_http_response
But the problem is when I trying to get the page the scripts that not working are
different, sometimes all the scripts are working.
When I putting the scripts on the head of html it's loading better but still not all the scripts are working, but when I slowing down the internet to 3G in devtools all the scripts are running
I don't know what to do with it and I couldn't find nothing about it.
Im am using the standard script markup in html: <script src="some/js"></script>
Thanks in advance!
I added the type attribute to the script tag and all start
working so the code looks like that:
<script type="text/javascript src="js/source"></script>

Error: Bootstrap's JavaScript requires jQuery

When i run my site on mozilla i got this error above.Here some code snippet which might be helpful
<script src="http://www.iclubz.com/js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://www.iclubz.com/js/readmore.min.js"></script>
<script src="http://www.iclubz.com/js/chosen.jquery.js"></script>
<script src="http://www.iclubz.com/js/jquery.validate.min.js"></script>
<script src="http://www.iclubz.com/js/fileinput.min.js"></script>
But it's work fine on chrome.I don't know why this problem are showing.I'll helpful if anyone tell me the reason
Thanks in advance
Edited : i forgot to mention that all my javascript are called in the bollom of the page
Make sure to load jquery.js file before loading bootstrap.
This solved my problem.
That error can only be caused by one of three things:
Your JavaScript file is not being properly loaded into your page
You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.
You should check the Firebug net panel to see if the file is actually being loaded properly.
If not, it will be highlighted red and will say "404" beside it. If the file is loading properly, that means that the issue is number 2.
Make sure all javascript code is being run inside a code block such as:
$(document).ready(function () {
//your code here
});
Your first load jquery.js(min) then boostrap load
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>

How can I find the source of a <script> placed in the footer?

I would greatly appreciate it if someone could shed some insight onto a problem I'm having.
The code below is from the footer of a WordPress website I run, and as you'll notice, the second script is invalid. I have no idea where that even came from or how to fix it, and I've searched through many WordPress PHP files (footer.php, index.php, page.php, etc.) to try to find the source, but I'm not sure where it is.
So my question is this: could someone tell me how to find the source of this script? In other words, how can I find out where that second line of code even comes from? I'm not a developer, so sorry if this is a dumb question. Here's the code for you to reference:
<script defer="defer" src="http://echidnainc.com/wp-includes/js/admin-bar.min.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-social-share-buttons/assets/js/easy-social-share-buttons.min.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-social-share-buttons/assets/js/essb-sticky-sidebar.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-slide-in/optin-forms-manager/js/placeholder.js" type="text/javascript"></script>
So to answer the general question I posed, to find the source of a line of code placed in the footer of a WordPress page, the first thing to try should probably be the one-by-one deactivation of plugins until the script disappears (and obviously, when the script disappears, then you know the last plugin to be deactivated was responsible). That worked for me.
And now for details on my specific situation's resolution:
A plugin, Speed Booster Pack, was causing the erroneous script:
<script defer=”defer” src=”http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js” type=”text/javascript”></script>
Either that erroneous script or another element of the Speed Booster Pack was interfering with another plugin I recently installed. I tried tweaking some PHP files in the Speed Booster Pack, but ultimately I just deactivated the plugin in order to solve the problem.
I browsed to each of the scripts you mentioned in your post (just pasted the link into my browser to see the JavaScript source). It doesn't seem to be any of those scripts that are adding the tag to Google's hosted version of jQuery.
My suggestion, without knowing the source of the plugins you have in your wordpress, is that one of the plugins is trying to include jQuery, and has an error.
As to why the scripts are loaded at the end of the page, this is a combination of the "defer" tag, combined with a common web development trick that placing tags at the end of the page body facilitates faster load times.
If you could refer to the source code for any of the plugins I don't mind checking to see which one, if any, have the typo. You yourself could attempt to remove plugins one by one to see if one causes the script tag to disappear, and boom, culprit.
The second script is invalid, because the url in the src="..." arrtibute is invalid. I assume you wanted to use jQuery, a JavaScript libary.
To fix that replace
src="http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"with src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"
The jQuery libary hosted by Google.

JavaScript file(jQuery steps) not loading in Google Chrome

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.

Cant figure out why my images won't lazyload

Hey guys i can't seem to get lazyload to work at all on my page, and i can't understand why. I've looked around alot and still have no idea.
I need it as im desinging a new page for my band www.childrenoftheson.com/newindex/Newtest.html and since the whole site is run off one page i need to lazyload images to speed it up.
I would also love to know if anyone could point my in the right direction for lazyloading widgets.
Any help/rage is appreciated :D.
try pointing lazy load to the correct web path:
<script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js" type="text/javascript" charset="utf-8"></script>
plus loading this way will mean your users might have already downloaded the file and thus saving them time on their page load.
To me it seems that the file which contains the jquery plugin (jquery.lazyload.js) cannot be found on your server. It seems to be located at http://www.childrenoftheson.com/jquery.lazyload.js. In your source code you are including it like this:
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
which resolves the wrong path.
If you are using Firefox, you maybe want to look at the 'Net'-Tab of Firebug to see which files cannot be found/loaded...

Categories

Resources