I'm following a tutorial for vendoring jQuery in a Sinatra app and I can't seem to get jQuery to function. I usually use Google's CDN to load jQuery and it works every time but I can't seem to load it by vendoring and I don't know why. I'm more than certain this is something very trivial but I don't see it. Here are the directions I've followed as suggested by my tutorial.
Create a public/vendor/jquery.js file
Copy and paste the the UNCOMPRESSED jquery 1.11 into jquery.js
Create a javascripts/rating.js file and include this code to verify if jquery loaded.
$(function(){
console.log("loaded...");
});
When I use the inspect element tool and click on the Network tab, it says that jquery can't be found. What's going on? Oh and this is my index.html.erb file:
<body>
<h1>Rate It</h1>
<div id="rating-container"></div>
<script src="public/vendor/jquery.js" type="text/javascript"></script>
<script src="javascripts/rating.js" type="text/javascript"></script>
</body>
Help would be greatly appreciated. Thanks guys.
I finally got it. The tutorial has a typo in it! Referencing vendor/jquery.js instead of public/vendor/jquery.js worked. Geez.
Related
Ok so I found the hamburger I want on codepen, the html and css works perfectly but the js won't load for some reason.
This is the link to the codepen codepen.io/sergioandrade/pen/onkub
and my files and folders are in order. My question is do I just copy the js as it is or should I add something I don't understand why this isn't working.
Thank you all in advance
It looks like this Codepen uses jQuery (by the use of the $ function). Have you included jQuery in your code? You can do so by including the following line in the <head> section of your HTML:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
I am using a simple plugin from http://www.highcharts.com/demo/pie-basic which has a javascript file stored in view options. I am using this file in my index.html code as <script src="js/pie1.js"></script> inside <body> tag where pie1 is a javascript file stored in js folder. When i run my html page nothing happens.
can anyone help me where I am getting wrong? I am new to using plugins so please bear with me and correct me if anything is wrong.
Most likely you have this situation because javascript start running the plugin before your html is ready.
Place <script src="js/pie1.js"></script> just before closing tag </body>
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>
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.
I am teaching myself how to program usign JS, jQuery, HTML and CSS. I downloaded the jquery-master from github and use it in my project, however I still cannot get it to import into my HTML files so that I can utilize it. Does anybody know how? Any help would be appreciated!
you can use this js file you donot need to download js files you just need to place this script tag to each html page where you are trying to play with jquery code.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
use this script and include your jquery code inside this script block
<script type="text/javascript"> alert('hi friend') </script>
hope this will works Thanks.