We Keep Coding

Can not access jquery in function. "Variable Scope" issue?

My ultimate goal is to have dynamic autocompletion on text input using typeahead jquery library.
In my HTML I put the input text field like this:
<input class="typeahead form-control" name="author_1" id="author_1" type="text"
placeholder="Type a part of author name or surname">
then in javascript I have this:
<script type="text/javascript">
function typeahead_initialize() {
var path = "{{ route('instructor_name') }}";
$('.typeahead').typeahead({
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
}
});
}
typeahead_initialize ();
// Here typeahead is recognized as a function
// $('.typeahead').typeahead('destroy');
// Begin jQuery
$(document).ready(function() {
$("#addAuthorBtn").click(function() {
addAuthor();
});
$("#removeAuthorBtn").click(function() {
removeAuthor();
});
function addAuthor () {
// Destroy the typeahead system
// The problem is here: typeahead is not recognized
// as a functon here. It seems I can not reach
// jquery functions here.
$('.typeahead').typeahead('destroy');
// I add the dynamic input here, I deleted the unrelated code
// Reinitialize typeahead system again to include
// the dynamically added text input
typeahead_initialize ();
}
function removeAuthor () {
// Destroy the typeahead system
$('.typeahead').typeahead('destroy');
// I remove the dynamic input here, I deleted the unrelated code
// Reinitialize typeahead system again to include
// the dynamically added text input
typeahead_initialize ();
}
});
</script>
I explained in comment where the problem is. The auto-completion works for the first static input. But the second dynamically added input is not offering autocomplete, which I suspect I must destroy the typeahead and rerun it again. I guess the 'this' object inside addAuthor() function does not point to the same 'this' which is outside of $(document).ready(function() {}). How can I solve this? I cannot destroy and reinitialize the typeahead system when user clicks the add or remove button.
The official error I get is:
TypeError: $(...).typeahead is not a function
Update:
This is not related to forgetting to include jquery library, these are the libraries that I have included so far (I am using Laravel so the formatting is a bit odd) I guess it is related to "scope". The autocompletion actually works! so it means "typeahead" library is included properly. It just does not work when I call the typeahead from "inside a function".
<script src="{{ URL::to('js/jquery-3.1.1.js') }}"></script>
<script src="{{ URL::to('js/bootstrap3-typeahead.min.js') }}"></script>

Thing you did wrong is invoking typeahead_initialize() in script directly. Put this function in document.ready and all will go smoothly.
I just copied your code and did some modification check jsfiddle below, see log in console also
https://jsfiddle.net/Ld1wcy03/

OK I found the problem by myself. The problem comes because I use Laravel and it adds some scripts via app.js at the button of my view that causes this problem.
Probably the Laravel framework adds jQuery library by itself and two instances of it causes this issue.Removing the Laravel scripts solved the issue.

"TypeError: $ is not a function" after loading some scripts into wordpress

We start to provide a HTML-Snippet like Google or Facebook does for its advertising things or the integration for the Facebook like button. It contains a business application.
Our HTML-Snippet loads a script and contains a few more informations:
<div id="ncc" data-hash="" ng-jq>
<div id="wiz" ng-controller="WizardCtrl"></div>
<script src="{{URLTOSCRIPT}}/load.js"></script>
</div>
The script checks if a jQuery is installed and loads all related things into the DOM and at the ends inits an angular-Application.
All this works fine on pages that havn't enabled jQuery.noConflicts-Mode.
After the latest Wordpress-Updates we got an ERROR
"TypeError: $ is not a function"
We tried to get rid of it using some workaroungs like
jQuery(document).ready(function($){
$(function () {
//code to execute
});
OR
jQuery(document).ready(function(){
var j = jQuery.noConflicts();
j(function () {
//code to execute
});
and changed also all references in the angular-part. But nothing working really well.
Any suggestions?
We are using AngularJs v1.4.7, jQuery v1.11.3 (started to migrate to 2.1.4), the

Sometimes when more versions of jQuery are loaded or if it conflicts with another library you can get that error:
have you tried to replace in all of your code the $ symbol with the word "jQuery"?
So your example would become:
jQuery(document).ready(function(){
jQuery(function () {
//code to execute
});
Note: I don't think that in this case passing "$" as a parameter is needed anymore ;)
EDIT: there is also another possibility:
you say that you're using the $ sign (i guess to avoid the usual conflicts in wordpress) in this way:
jQuery(document).ready(function($){
$(function () {
//code to execute
});
But this will make the $ symbol available only inside the ready() function.
Did you check if you have somewhere code using the $ where you actually aren't allowed to (or in other words if you have any piece of your js code where $ isn't mapped as "jQuery")?
EDIT 2: The only working solution in the end was:
(function($,undefined){
$(document).ready(function(){
//code to execute
});
})(jQuery);"

Make sure jQuery is loaded before any other script that uses certain jQuery functions.

Normally those errors arise, when the jQuery library wasn't loaded yet. Make sure that a $()-call is called after jquery was loaded, which normally happens at the end of your file to speed up loading times.
Therefore putting
<script src="{{URLTOSCRIPT}}/load.js"></script>
to the end of the body-tag should help.

Usually when you get this error: "TypeError: $ is not a function"
it means, you a missing a JQuery library or they are not placed in the correct order. Ordering JQuery libraries is important.

$ is not a function. It means that there is a function named $, but it does not have a plugin/widget named selectable. So, something has stolen your $ or there is another library added after it, or it was never loaded.

Your script file is not loading properly or script file is not available.
open browser inspect element and put this code
jQuery().jquery.
it's display which jquery version is use.
this is for testing
jQuery(document).ready(function()
{
alert("test");
});

Wordpress jQuery script is not starting on one instance with jQuery.noConflict usage

I have Wordpress 2 instances: local and remote (remote should be very similar, it was mainly uploaded from local except from a few plugins). Code is using jQuery.noConflict method, because without it it was not working locally after adding a lot of plugins. Now when it's uploaded to remote Wordpress, it's still not starting there, but it works locally :). JS method is just not started. For sure file is attached with proper path in HEAD section of HTML file. No errors displayed in console.
Expected behaviour is: JS alert should appear but it not.
JS code is here:
var jQueryAlias = jQuery.noConflict();
function customizeWebUIForEmailSubscriberPlugin() {
alert("customizeWebUIForEmailSubscriberPlugin");
//format input button
jQueryAlias('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');
//format input button
jQueryAlias('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');
//format message text
//jQuery('.elp_msg').removeClass('elp_msg').addClass('post-body');
jQueryAlias('#elp_msg').addClass('message-format');
//hide submit button
jQueryAlias('#elp_txt_button').addClass('hide');
//hide email label
jQueryAlias('.elp_lablebox').addClass('hide');
}
jQueryAlias(customizeWebUIForEmailSubscriberPlugin);

Try the following. The function should fire on document.ready, but you can also call it whenever you like.
jQuery(function ($) {
function customizeWebUIForEmailSubscriberPlugin() {
alert("customizeWebUIForEmailSubscriberPlugin");
//format input button
$('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');
//format input button
$('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');
//format message text
//jQuery('.elp_msg').removeClass('elp_msg').addClass('post-body');
$('#elp_msg').addClass('message-format');
//hide submit button
$('#elp_txt_button').addClass('hide');
//hide email label
$('.elp_lablebox').addClass('hide');
}
$(document).ready(function() {
customizeWebUIForEmailSubscriberPlugin();
});
});
Edit:
In order to add jquery in WP, add this code to the bottom of your theme's functions.php file, before the closing php tag tat looks like this: ?>:
function pk_enqueue_scripts() {
wp_enqueue_script('jquery');
}
add_action('pk_enqueue_scripts', 'wp_enqueue_scripts');

The problem is that on both servers (local and remote) jQuery lib is attached in HEAD tag in different sequence. On my local machine: jQuery was attached after script.js and that worked. For remote: jQuery was attached after my script.js. I am not sure why it works in such way on my remote machine.
Solution:
After adding code
<?php wp_enqueue_script("jquery"); ?>
right after HEAD tag, it works:).

Javascript works in HTML but not javascript file

my javascript code works withing a my html file but when I move it to a javascript file of its own, it doesn't work. I checked and it is not an issue with the file location. And it doesn't work in any browser. Please help. Thank you.
My HTML calling the file:
<script type="text/javascript" src="js/click-dropdown.js"></script>
Here is my javascript code:
$(document).ready(function() {
$('.prospectus-click').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
//$('.prospectus-form > div').parent().removeClass('on');
$('.prospectus-arrow').removeClass('prospectus-arrow-up');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.table-wrap').slideUp('fast');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($('.prospectus-click').next().is(':hidden') == true) {
//ADD THE IMGON CLASS TO THE IMAGE
//$(this).find('.accimge').addClass('imgon');
//ADD THE ON CLASS TO THE BUTTON
$('.prospectus-arrow').addClass('prospectus-arrow-up');
//OPEN THE SLIDE
$('.prospectus-click').next().slideDown('medium');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
$('.prospectus-click').mouseover(function() {
$(this).parent().addClass('over');
}).mouseout(function() {
$(this).parent().removeClass('over');
});
$('.table-wrap').hide();
$('.live-consult').click(function() {
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.live-consult-div').slideUp('fast');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($('.live-consult').next().is(':hidden') == true) {
$('.live-consult').next().slideDown('medium');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
$('.live-consult').mouseover(function() {
$(this).parent().addClass('over');
}).mouseout(function() {
$(this).parent().removeClass('over');
});
$('.live-consult-div').hide();
});

The Javascript file you have written is using the jQuery library. In order for this to work you must load the jQuery library prior to your script.
You can download jQuery from here http://jquery.com/
I would also suggest for performance that you use the minified file and make your scripts load at the bottom of your html page before the closing body tag.
<script type="text/javascript" src="js/jquery-min-1.11.0.js"></script>
<script type="text/javascript" src="js/click-dropdown.js"></script>

As Nevett and David mentioned suspected that you might be including/loading your 'click-dropdown.js' file prior to inclusion of jquery library. But if you are not sure in which order you have the included your script, then simple way to detect is either check you dev console for error "ReferenceError: $ is not defined" or just simply write
alert('my $ is '+typeof $);
as the very first line of your script. If alert says undefined then include your script after jquery. If alert says function then please describe what is the exact problem you are facing; any error, warnings.

javascript error while loading the document

Im trying to run the below script to understand the Javascript object and inheritance but don't see anything being displayed.
<html>
<head>
<script>
$(document).ready(
function Person(){
alert('New Person Created');
}
Person.prototype.sayHello = new function(){
alert('Hello');
};
var x = new Person();
x.sayHello();
var newfunction = x.sayHello;
newfunction.call(Person);
);
</script>
</head>
<body>
</body>
</html>

$ is defined in jQuery, you need to include jQuery library before using the $
you can include jquery library using cdn like this,
<script src ="//code.jquery.com/jquery-1.10.2.min.js"></script>

The first line of your script is jQuery. If you want to use jQuery you should include it first (based on what you have written I strongly suspect you don't need or want it just yet).
Alternatively, just drop the $(document).ready part and its {}s and that should get you going.
Also, take a look at your developer tools menu and get your JavaScript console open. It will have told you about this error.

When you use a construct like $(document), you are calling a function $, which is defined as jQuery. You need a <script> tag in your document to load the correct version of jQuery. Also, check your browser console. You will see an error there about $

The only thing I can see wrong is that you are trying to use the jQuery library, but you've never actually included it.