We Keep Coding

How to work Ajax libs jquery and jQuery CDN in single page

I called Ajax jquery for supersized slider in the head and called jquery-1.11.0. min. j's for mixitup plugin. One is work that is called last. how can work two plugin?
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> //call it
for supersized slider
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
//call it for mixitup plugin

Just remove the second one, it will overwrite the first one and you'll want the newer version.
Mixitup should work with 1.11.0 as well, so you don't need 1.6.1.
See here, Mixitup also recommends newest version.
https://mixitup.kunkalabs.com/learn/tutorial/get-started/

you should not include Jquery Script twice in a single page for multiple plugins which are dependent on Jquery Script because including it once is enough for every plugin dependent on it to work, unless the plugin rely on a specific version of Jquery..
NOTE - the jquery Script should be included before any other script is included that depends on it..
if you want to include multiple version of Jquery than you can use Jquery's noConflict().

$(...).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 ;)

jquery script not changing div's class

On my single page site, I have a script that is called to add a "read more" style link to a content area's div.
When the button is clicked, it should change the class of the content area to allow view of all of the content.
When clicked again, it should hide the content.
This is the site I'm having trouble on: http://lexisnexis.stacklaw.com.au/
But, it is working OK on this site: http://nundoobah-retreat.com.au/about.html
What have I got wrong?

JQuery is throwing a script error -- "can't find .curCSS" when your script runs the switchClass method.
I'm not sure, but this may be due to the fact that you're running an older version of JQuery UI than the JQuery core:
<script type="text/javascript" src="/templates/microsites//js//jquery-1.8.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
The curCSS method was deprecated in JQuery 1.8.0.
I'd suggest upgrading to the latest version JQueryUI. Alternatively, don't use switchClass (which belongs to JQuery UI), but instead use removeClass / addClass, or slideUp / slideDown (part of the core JQuery library).

Here is curcss issue with jquery-ui. http://bugs.jquery.com/ticket/11921
You might use jquery-ui later 1.9.0.

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))

jQuery simple dialog not working

I'm trying to figure out why my jQuery dialog is not working properly on this page:
http://bit.ly/nOKwYz
This is the code snippet:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#dialog22").dialog();
});
</script>
and I also have:
<div id="dialog22">test</div>
For some reason it does not load the dialog, any ideas?

It's gotta be the library order. See this fiddle. Your sample works just fine if you have the library order right:
http://jsfiddle.net/mikethomsen/a25gw/
The way it works is you need to load jQuery.js, jQuery UI's JS and then the jQuery UI CSS, then throw in your custom code.
Edit
I replaced my fiddle's libraries with your sample and Firefox says jQuery('#dialog').dialog is not a function. That means you are missing the dialog code from the build of jQuery UI you made. You need to go back to the jQuery UI site and build a new distribution of jQuery UI that includes the other pieces you need.

To show the dialogo you should first hide it i think:
<div id="dialog22" style="display:none;">test</div>
and then show it with a button for example
EDIT - look at the fiddle here : http://jsfiddle.net/LCPJe/

Where do you load jQuery (and jQuery UI) on that page? You need to reference those libraries in the page (specifically before any code that uses them). Unless I'm just not seeing the reference, you do have quite a few script tags in the header.
You don't have to host a copy, though. You can reference a CDN link.