We Keep Coding

what is wrong with my slideshow code in jQuery? [duplicate]

I am using jQuery and put this code in my javascript:
function HideMe(itemID) {
var myDiv = 'item_' + itemID;
$(myDiv).fadeOut("slow");
}
But its giving me this error: fadeOut is not a function.

This will happen if you're using the "slim" version of jQuery. Only the "full" version of jQuery includes animation effects.
Try grabbing the "full" version of jQuery from the jQuery downloads page and including that in your page (or including a full version of jQuery from a CDN from your page).

Do you have another javascript library on that page? It seems you have the hide function, and the $ defined (prototype, for example, also has an hide function).
If that is the case, try:
jQuery("#item_0").fadeOut("slow");

I had this error because I was using a slim version of jQuery. If you download the full version you should be okay.

Even if the selector didn't return any items in the collection the function call would have worked (not generated this error anyway) if jQuery was loaded correctly. Either there is a conflict in the page, or it didn't load at all. You can try
jQuery(myDiv).fadeOut("slow");
or look into why jQuery hasn't been loaded.
P.S.: don't forget the # in the selector if selecting by id.

Also, you probably forgot a # in the selector (unless you've got something like <item_1 /> in the markup).
var myDiv = '#item_' + itemID;
jQuery uses CSS selectors to search for elements, so without the #, you'd get every element with the tag item_x instead of the ID.

It happened to me because of slim version of Jquery library. Full version of Jquery library includes animation.
Jquery CDN available at https://code.jquery.com/

It looks like jquery is not correctly attached to the page.
Check your linking to jQuery.

Try keeping it inside
$(document).ready(function(){
// your code. and don't forget the '#' in front of item.
});
Looks like you're trying to call the function before jQuery / the DOM loads.

You have liDiv instead of myDiv. Try:
function HideMe(itemID) {
var myDiv = 'item_' + itemID;
$(myDiv).fadeOut("slow");
}

On moving a .html template to a wordpress one, I found this popping up regularly.
Two reasons, and the console error can be deceptive:
The error in the console can send you down the wrong path. It MIGHT not be the real issue. First reason for me was the order in which you have set your .js files to load. In html easy, put them in the same order as the theme template. In Wordpress, you need to enqueue them in the right order, but also set a priority if they don't appear in the right order,
Second thing is are the .js files in the header or the footer. Moving them to the footer can solve the issue - it did for me, after a day of trying to debug the issue. Usually doesn't matter, but for a complex page with lots of js libraries, it might!

jQuery(...).autosize is not a function when using autosize.js

I'm trying to get autosize.js to work in my Rails 6 application but it doesn't matter what I try, it's not working.
Every time I try to use it on a textarea I'm getting this error:
jQuery(...).autosize is not a function
What I did:
I added the plugin via yarn with yarn add autosize
Then I required it in my application.js, I tried different solutions:
require("autosize")
require("autosize/dist/autosize")
Then I imported it in different ways to try if it works somehow (as all other plugins are working).
What I tried:
import 'autosize'
import autosize from 'autosize'
Then I tried setting a global scope for the variable:
global.autosize = autosize;
For initialization I followed the readme:
autosize($('textarea'));
I even tried to remove the yarn package and download the files. But still the same error.
Any more suggestions on what I could do to make it work?
EDIT:
Okay, at least I found the problem: The textareas are generated by AJAX, so they are dynamically generated. On other textareas that are not dynamically it's working.
I tried:
$(document).on('focus', 'textarea', function(){
autosize($('textarea'));
});
and visually it's working, but I still get the same error and can't submit the data.

Foundation 6 - Console Warning : Tried to initialize magellan (any JS plugin) on an element that already has a Foundation plugin

I installed Foundation 6 using bower. I keep getting multiple warning in the console every-time I use any Foundation 6 - JavaScript based plugin.
Exact warning :
Tried to initialize magellan on an element that already has a Foundation plugin.
My script includes look like:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
The warning is triggered by the following code present in foundation.js at line 180 :
// For each plugin found, initialize it
$elem.each(function () {
var $el = $(this),
opts = {};
// Don't double-dip on plugins
if ($el.data('zfPlugin')) {
console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin.");
return;
}
I have tried re-installing from scratch but it still doesn't work.
Similar question exists in Zurb Foundation Forum but till now there is no good answer.
How do I resolve this?

UPDATE
For Version 6.4.*, all plugins and js based elements tend to work only if $(document).foundation(); is mentioned within the html file. So delete it from app.js if you have written in it. For additional reasons, go through the explanation below.
Although I have mentioned the answer long back in the comments of the question, I felt it will be better to write it up with few more points.
While installing Zurb Foundation 6 using bower (command line), it gives you a nice index.html page to get started which has the <script> tag that refers to an external js file located at root\js\app.js. The app.js file by default has the following code:
$(document).foundation(); //invoke all jQuery based Foundation elements
So basically, you already have everything to get started.
But, this wasn't the way how it worked until Foundation 6 and I wasn't aware of these changes. I didn't go through the contents of app.js as I was assuming it to be empty. I simply did the old way of invoking them in my html pages by writing the following code:
<script type="text/javascript">
$(document).foundation();
</script>
This kind of double referred the jQuery based Foundation elements raising a warning at the browser console.
Solution was to remove either of the invocation, but actually removing the code written in external js file makes more sense for the following reasons:
External references cost an additional http request, very slightly increasing the precious page load time. Why not reduce it, if you can.
Invoking jQuery based elements in the site has to be done as early as possible so that every element gets the original shape in no time. So it makes more sense to mention the invocation within a html page rather than request a external file to invoke.
So, remove the code mentioned in the external js file, that is your app.js file. The warnings would vanish.
For Version 6.4.*, all plugins and js based elements tend to work only if mentioned within the html file.

The best solution to this problem is to put $(document).foundation(); inside <script> tag under .html file, and remove it form external .js file (app.js)
Like this-,
in
xyz.html
<script type="text/javascript">
$(document).foundation();
</script>
other solution like, putting it inside external .js file (app.js), and removing it from .html file, will not always works.
at least it didn't work for me.
Tested on-
foundation version 6.4.2

$(...).popover is not a function

I have looked through quite a few posts on here dealing with this issue, but none of them seem to solve my problem.
I have imported the jQuery and Bootstrap js files in the right order. Things such as bootstrap panels are working perfectly fine for me.
My script imports are like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
However, when I try
$('[data-toggle="popover"]').popover();
I get the following message in the Chrome console:
Uncaught TypeError: $(...).popover is not a function
At first I thought maybe popover was not being included in CDN's copy, so I went ahead and downloaded a local copy with all the plugins included from here:
http://getbootstrap.com/customize/
and got the same error message (re-pointed the script tags towards the local js file).
Doing a search for "popover" the bootstrap.min.js file:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
Shows that popover is included in the file.

Since you have stated you have included jQuery and the other libraries correctly, 1 possible case is there could be multiple instances of jQuery in the page.
So based on the server technology used, search for a duplicate version of jQuery and if there is any remove them(if not needed else will have to think about noConflict() use).
In case of duplicate jQuery instances the problem is the jQuery version to which the plugin is attached might be different from the one which you are accessing to use the plugin at that point the plugin will not be found.
https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

The order of including bootstrap.js and jquery.js matters. Include the jquery.js BEFORE bootstrap.js

For Bootstrap 5 onwards this is how you add popovers
Code for Button:
<button type="button" class="btn btn-secondary mx-2" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Your Cart(<span id="cart">0</span>)
</button>
Script:
<script type="text/javascript">
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
</script>

Had the same problem and checked jquery version. Moving to v1.12 helped me

What worked for me, was making a call to $.noConflict() which returned control of $.
That was because some other JavaScript libraries use $ as a function or variable name, just like jQuery does. During jQuery initialization, there are some old references of $ saved. noConflict() restores them.
$noConflict();
jQuery(document).ready(function ($) {
$("#id").popover('hide');
});

Assuming you are correctly added popover script in the your site.
To fixed the "$(...).popover is not a function" bug. Sometime just add a timer delay can be fix it.
$('[data-toggle="popover"]').popover();
Modify to
setTimeout((function() {
$('[data-toggle="popover"]').popover();
}),500);
Sometimes (always) the web page doesn't fully render the content and the POPOVER will gives this error. So, We need 500ms delay starting the popover script. Sometimes 500ms is not enough to wait for rendering, so more delays can be modified as needed.
Even in bootstrap 5 has this issue too
Conclusion
POPOVER script starting need waiting whole page completely render.

So based on the server technology used, search for a duplicate version of jQuery and if there is any remove them(if not needed else will have to think about noConflict() use).

This is Happen due to Differ version of bootstrap
In This case use script of same version as your bootstrap
In other case jquery is not recommended. insted use Advance Css Js
This is also happen cause latest bootstrap doesn'

After hours, I found out that I forgot to attach bootstrap.js file to my page ;)

Jumi plugin doesnt seem to load jQuery and images called with css in joomla 1.5

I have a select list I have styled using html, css& js, it is working independently but once I load it into an article it displays the default html select list. I have tried positioning the customized select.html using Jumi plugin it loads most css but somehow refuses to load images called in the css. Help

First of all, the last time I used Joomla, it uses Mootools. Mootools and jQuery don't get along well because they fight over $ namespace and most people use $ in jQuery code.
to prevent this, you should either
use $.noConflict() to change the jQuery namespace
use jQuery instead of $ in your code
enclose your code in a closure:
(function($){
//use `$` safely in here
}(jQuery))