Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
On my following website every function that related to javascript (using bootstrap framework) isn't working properly. Today when I began to work on it the application worked fine and the only thing I changed on the website that could affect the page itself / all pages that the website contains is the navigation bar that I edited when I added a simple green button, that when I delete it will not fix the error. I've been searching and testing for days and can't find the solution.
Whenever I view the error logs there is one simple error
ReferenceError: $ is not defined (index.php:110)
that refers to
<script type="text/javascript" >
$(document).ready(function() {
$('.carousel').carousel()
});
</script>
which should only affect the home page as this file is not called on any other part of the website.
However, as I don't know where to start searching in the code for this error, I can't really post the whole code here. However it can be viewed on the link above. I'm actually just searching for a position to start fixing or looking for some typos or whatever, but I got confused because it worked before I added a PHP-script which doesn't affect the websites state at all.
Any clues? Thanks for answers.
My guess is that the jquery file is not properly linked.
You have to consider that your main html has to link to the custom javascript code AND a javascript library code, wich can be hosted in your local server or somewhere in the internet.
Make sure you have something like this in the body of your Html file, and before your custom js code:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
The jQuery library is not loaded yet - or at all.
You forgot to load the jQuery library. Be sure you load it before all your javascript code and before bootstrap library also.
You should load bootstrap after jQuery, and you should execute the code below only after you load jquery.js and bootstrap.js
$(document).ready(function() {
$('.carousel').carousel()
});
Note: Any code that has to do with $ it's linked to jQuery, so you have to use it after (not before) the jQuery library. I recommend you to use all your Javascript code just before the </body> tag
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I built a simple random quote generator as part of a learning program.
On codepen.io my code worked perfectly. I built a single (& simple) function in javascript (jQuery) that rendered a random quote (stored in an array) along with the author in pre-defined html elements.
I then made sure that my function would run as the page was loaded, and also when the button was clicked.
This is the codepen.io page of my project, fully functional
https://codepen.io/empathies/pen/NWRvXKK
This is the link to the page I put online
http://empathies.eu/FreeCodeCamp/random-quote-generator.html
When the page is loaded a random quote is shown, proving that my html page can access my Javascript file (in a different folder), but when I click the button on my page nothing happens.
Here is the content of my .js file (declaration of my “quotes” array is just above in the file)
const generateQuote = function() {
let random = Math.floor(Math.random() * quotes.length);
$("#text").fadeOut(function () {$('#text').text(quotes[random][0])}).fadeIn();
$("#author").fadeOut(function () {$('#author').text(quotes[random][1])}).fadeIn();
}
$(document).ready(generateQuote);
$("#new-quote").click(generateQuote);
The document ready line is excecuted, but the click-event is completely ignored.
Can anybody help me solve this mystery?
Thanks to the comments my mistake was found.
I linked to my .js filed at the top of my html page meaning the script was loaded before the button was present in my page.
I moved my link to the bottom of the page meaning it's loaded after the creation of my button element.
Now it works perfectly.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
Why my code is unable to run and brower's console is producing error "JQuery is not defined" even though I am en-queuing my JavaScript file into the plugin properly.
As per source code, JQuery Library file before is also importing before my JavaScript file.
Please take a look at the code below and let me know if I am doing something wrong:
File Path: wp-content/plugins/AjaxTest/AjaxTest.php
<?php
/*
Plugin Name: Ajax Test
Description: This is a Ajax Test plugin
Version: 1.0
*/
function add_ajax_file()
{
wp_enqueue_script('ajax-test', plugins_url('/js/ajax.js', __FILE__), array('jquery'));
}
add_action('wp_enqueue_scripts', 'add_ajax_file');
File Path: wp-content/plugins/AjaxTest/js/ajax.js
JQuery(document).ready( function($){
alert("Hello");
});
Error Message in Console:
Uncaught ReferenceError: JQuery is not defined
(anonymous function) # ajax.js?ver=4.5.2:1
Order of JavaScript files in source code after running above code into the browser:
<script type='text/javascript' src='http://localhost/wordpress1/wp-includes/js/jquery/jquery.js?ver=1.12.3'></script>
<script type='text/javascript' src='http://localhost/wordpress1/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.0'></script>
<script type='text/javascript' src='http://localhost/wordpress1/wp-content/plugins/AjaxTest/js/ajax.js?ver=4.5.2'></script>
As suggested on web from WordPress users with similar problem, I have already tired adding below code into the wp-config.php file but no luck
define('CONCATENATE_SCRIPTS', false);
I am using WordPress 4.5.2
You need to correct this JQuery to jQuery
jQuery(document).ready( function($){
alert("Hello");
});
you can use dollar sign in stead of jQuery for simplicity (if letter casing is hard for you to memorize).
note: JavaScript (jQuery is a library built using JavaScript) is case sensitive.
the correct code would look like :
$(document).ready( function($)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question would be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
My wordpress website is very slow. It takes around one minute to load. I tried various plugins and other troubleshooting options to find out the reasons behind high loading time, but I could not find any. The website can be found here
http://www.developmentlogics.com/
What can I do to improve the site performance?
Try commenting out the following code from your site to see what happens. There is a timeout error on the loaded JS file 4190.js and it is causing the rest of your website to not complete until that error is triggered.
<!--Start of GHRec Script-->
<script type="text/javascript">
(function() {
var host = ("https:" == document.location.protocol ? "https://secure.eemt.se" : "http://www.eemt.se");
document.write(unescape("%3Cscript src='" + host + "/gt/js/4190.js' type='text/javascript'%3E%3C/script%3E"));
})();
</script>
<!--End of GHRec Script-->
I'm not sure if this is what you are looking for. You can press "f12" and under the networking tab you can see all the timing for the files to be loaded.
I had the same issue with my website, though couple of things you need to ensure.
1 - Don't add preloader to a page where you may have a counter. In your website we can see on row with counters, due to which your pre-loader is taking time to load the website.
2. Try to minimize your CSS and compress images on the website.
Try to use cache plugin and one thing more add favicon icon to site:
Do these steps :
1) Add cache plugin
2) compress your images, Css and Javascript
3) delete unwanted images as well as content
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm learning web development now and have been going through many websites and looking at the source code through Chrome's developer tools. This has been helpful in understanding HTML and CSS.
However, I am unable to make any sense of the Javascript. If they link an external javascript file, I open that file and try to read through. I know its minified but I don't think I'd be able to make sense of it regardless. If they have Javascript directly in their code, I'm still unable to make sense of it.
BTW - I have gone through a few Javascript tutorials so I'm at least a little familiar with JS.
Am I missing something here?
Thanks
There's a special button which looks like this: { }. It can be found under the source code in the Sources tab. It prettifies the code for you :D
Please Note: Jumping in to reading some websites code is a pretty poor way in a lot of cases, of learning javascript. Best to write your own, and read others from a repository liek github, or pastebin, or plunkr, or jsfiddle, etc.
That said:
Using your browsers debugger you can see the javascript files being used in the page. I'm guessing you already know this since you've found minified javascript files. 2 issues to address:
How to make sense of a minified file: firefox has an unminifier feature. Very google-able.
Given a javascript file, how to see what it's doing. I would suggest creating a breakpoint on a line in the javascript file that you know will be hit when you do something on the web page. Find a button in the html, see what click function is attached to it, then go into the javascript file and find that click function by name using 'ctrl-f' to find it. Then create a breakpoint on a line in the function you want to debug. As soon as the breakpoint is set, once you click the button, your deubgger will stop the code right on the breakpoint, you can then step through the code to your leasure. All of these key concepts and keywords are googleable. This should give you a headstart to answering your question.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a thumbnails scroller driven by a jquery plugin, everything works fine.
The plugin that I'm trying to integrate works perfect individually but when I try to add on my actual markup I check it with Firebug and I receive this strange error: Uncaught TypeError: Cannot call method 'extend' of undefined
I can not post the entire markup on jsfiddle or here so I prefer to give you a link to that error maybe you can help me understand what's happening. It's very stressful.
Here is my attempt.
You are running jQuery in so-called "no-conflicts" mode. This basically boils down to not using the $ function as an entry point. If your module is not programmed with this in mind, you will see failures such as this one.
Either: 1) do not use jQuery in no-conflicts mode
If you are not planning on using other javascript libraries (and really, one is enough I assure you) then you're perfectly fine taking this route,
Simply remove this code
* jQuery.noConflict() for using the plugin along with other libraries.
You can remove it if you won't use other libraries (e.g. prototype, scriptaculous etc.) or
if you include jQuery before other libraries in yourdocument's head tag.
[more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */
jQuery.noConflict();
... and check out the documentation that comment references for a deeper understanding: http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Never hurts to read the docs!
Or: 2) Fork and fix the source code of the module (if it is on github or other open-source repository)
You'll need to re-write the module to use the safer entry point jQuery instead of assuming that $ is available (as it currently does). You can also just correct your copy, but if you're doing the work you may as well put it in a place where someone else can benefit too -- after all, you're benefiting from the work of others (jQuery, the module, etc) :D