We Keep Coding

Uncaught TypeError: $(...).tooltip is not a function

I have a project based in Spring Web model-view-controller (MVC) framework. The version of the Spring Web model-view-controller (MVC) framework is 3.2.8 deployed on a WebLogic Server Version: 12.1.2.0.0
I have this error loading 1 JSP
Uncaught TypeError: $(...).tooltip is not a function
This is everything I load and I checked 1 by 1 and all of them are loaded
<link href="/tdk/styles/bootstrap.css" type="text/css" rel="stylesheet">
<link href="/tdk/styles/admin.css" type="text/css" rel="stylesheet">
<link href="/tdk/styles/jquery.dataTables.css" type="text/css" rel="stylesheet">
<link href="/tdk/styles/dataTables.bootstrap.css" type="text/css" rel="stylesheet">
<link href="/tdk/styles/slides.css" type="text/css" rel="stylesheet">
<script src="/tdk/scripts/jquery.min.js" type="text/javascript"></script>
<script src="/tdk/scripts/bootstrap.js" type="text/javascript"></script>
<script src="/tdk/scripts/jquery.dataTables.js" type="text/javascript"></script>
<script src="/tdk/scripts/dataTables.bootstrap.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
var selected = [];
var table = $('#example').DataTable({
"dom": '<"top">rt<"bottom"lp><"clear">',
"autoWidth": false,
"paging": false,
"scrollX": false,
"scrollY": 300,
"scrollCollapse": true,
"rowCallback": function(row, data) {
if ($.inArray(data.DT_RowId, selected) !== -1) {
$(row).addClass('selected');
}
},
"columnDefs": [{
"targets": 'nosort',
"orderable": false
}, ]
});
$('#example tbody').on('click', 'input', function() {
$(this).closest("tr").toggleClass('selected');
if ($(this).is(':checked')) {
var theNameOfSelectedProduct = $(this).closest("tr").find("td.productname").text();
$('#selecteddevices').val($('#selecteddevices').val() + " " + theNameOfSelectedProduct);
$('#actions4devices button').removeAttr("disabled");
} else {
var theNameOfSelectedProduct = $(this).closest("tr").find("td.productname").text();
$('#selecteddevices').val($('#selecteddevices').val().replace(theNameOfSelectedProduct, ""));
if ($('#selecteddevices').val().trim().length == 0) {
$('#actions4devices button').not('.pull-right').attr("disabled", "disabled");
}
}
});
$('#refusedevicesButtonId').on('click', function() {
$('#theRefuseFile').show();
});
});
</script>

Can we see where you're using $.tooltip() ? It's possible that it occurs somewhere before the jQuery UI embed line. So try re-arranging your script includes so jQuery is first, jQuery UI is second, then along through the rest.
<script src="/tdk/scripts/jquery.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/tdk/scripts/bootstrap.js" type="text/javascript"></script>
<script src="/tdk/scripts/jquery.dataTables.js" type="text/javascript"></script>
<script src="/tdk/scripts/dataTables.bootstrap.js" type="text/javascript"></script>
Hard to know without seeing your full code and knowing which files contains your calls to $.toolTip().
One other quick attempt would be to substitute jQuery for $ where you're using, i.e.:
$(".tips").toolTip()
would become:
jQuery(".tips").toolTip()

Be aware that jquery-ui has its own .tooltip() function and Bootstrap does too.
Try to reorder your js files like
<script src="/tdk/scripts/jquery.min.js" type="text/javascript"></script>
<!-- Jquery - ui right after-->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/tdk/scripts/bootstrap.js" type="text/javascript"></script>
<script src="/tdk/scripts/jquery.dataTables.js" type="text/javascript"></script>
<script src="/tdk/scripts/dataTables.bootstrap.js" type="text/javascript"></script>

It's probably due to the version of jQuery. At least it was me and I solved this problem like this. I was using jQuery 3.3.1. The problem was solved when I changed the django to 1.10.3. Add this,
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
It needs work.

tooltip() was only added to jQuery UI in jQuery UI version 1.9. Proof...
version added: 1.9 (Source: API.jQueryUI.com: Tooltip Widget.)
If you don't have a version of jQuery UI at version 1.9 or higher, you'll get the error: tooltip() is not a function().

Because jQuery 3.5.1 is getting larger it takes more time to load, in addition to the ordering of the JavaScript files, mentioned in many answers to this question, the way to go in addition to fixing the order which by the way does not always work, for Bootstrap tooltip option, a work around is to use a timeout based on jQuery loading time, example:
setTimeout(function () {
$("[title]").tooltip({
container: "body",
placement: "top",
delay: { show: 240, hide: 60 }
});
$("[title]").on("click", function () {
$(this).tooltip("hide");
});
}, 545*1.33); // 545ms timing to load jQuery.js + network estimated delay

To solve this you'll have to add to your gemfile:
gem 'jquery-ui-rails'
gem 'jquery-ui-themes'
Then you won't have the problem that jquery-ui isn't loading anymore Another solution is to require("bootstrap") in application.js seemingly in addition to import("bootstrap") and you have install jquery and bootstrap with yarn too I think this all pretty crazy

Saving User-Chosen Stylesheet via jQuery and Cookies

Edit: I figured it out. I'm a complete numpty and didn't test putting the switcher code at the top of my other scripts. As soon as I did that, I fixed it, and it works perfectly.
Old post below.
I want to be able to have my users select a stylesheet via button or link, and have the browser remember that. I'm not great with jQuery, but I know generally enough to follow tutorials and reverse-engineer, to a point.
I have been attempting to use this plugin, but it's not playing nicely with my existing code. There are a couple of things that could be causing the issue, but I think the most likely culprit is the different versions of jQuery that are used. Using just the 1.4.4 breaks some of the core functionality (the ability to reset the checkbox state), and using just the 1.11.2 means that the plugin doesn't work at all. I've no idea how to resolve this, nor even what to google.
After further testing, when using the demo's index.html, I can use just the 1.11 library without breaking functionality. But when using my index.html, it doesn't function at all. So that's probably not the issue.
The demo HTML is viewable online, and here is a pastebin of my full index.html. Obligatory plea for mercy regarding my subpar coding skills.
Here's the demo header:
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<link type="text/css" rel="stylesheet" id="theme" href="css/theme1.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"> </script>
<script type="text/javascript" src="js/jquery.style-switcher.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#header').styleSwitcher();
});
</script>
And here's my header:
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/classic.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Marcellus+SC|Open+Sans' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="http://starbuckguild.com/ore/favicon.png">
<script>
//Add functionality for hiding perm nodes that may be silver or iron
$(document).ready(function () {
$("input[name=both]").not(".textbox").click(function () {
if ($(this).is(":checked")) {
$("input[name=both]").prop('checked', true)
$("input[name=both]").parent(".container").addClass("visited_node");
$("input[name=both]").parent(".container").hide(500);
}
else $(this).parent(".container").removeClass("visited_node")
});
$("input[name=both2]").not(".textbox").click(function () {
if ($(this).is(":checked")) {
$("input[name=both2]").prop('checked', true)
$("input[name=both2]").parent(".container").addClass("visited_node");
$("input[name=both2]").parent(".container").hide(500);
}
else $(this).parent(".container").removeClass("visited_node")
});
$("input[name=both3]").not(".textbox").click(function () {
if ($(this).is(":checked")) {
$("input[name=both3]").prop('checked', true)
$("input[name=both3]").parent(".container").addClass("visited_node");
$("input[name=both3]").parent(".container").hide(500);
}
else $(this).parent(".container").removeClass("visited_node")
});
//Mark node as visited.
$("input").not(".textbox").click(function () {
if ($(this).is(":checked")) {
$(this).parent(".container").addClass("visited_node");
$(this).parent(".container").hide(500);
}
else $(this).parent(".container").removeClass("visited_node")
});
//Show visited nodes
$("#showall").click(function () {
$(".visited_node").show();
});
//Hide visited nodes
$("#hideall").click(function () {
$(".visited_node").hide();
});
//Hide all nodes with list price less than 1s
$("#good").click(function () {
$("input[name=bad]").parent(".container").addClass("visited_node");
$("input[name=bad]").parent(".container").hide();
});
//Add short route function
$("#short").click(function () {
$("input").parent(".container").addClass("visited_node");
$("input").parent(".container").hide();
$("input[name=1hr]").parent(".container").removeClass("visited_node");
$("input[name=1hr]").parent(".container").show();
});
//Prompt user to reset all nodes
$("#uncheckall").click(function () {
$(".button").show();
$(this).hide();
});
//Actually reset all nodes if user is sure
$("#imsure").click(function () {
$(".visited_node").show();
$("input").not(".textbox").prop("checked", false);
$(".visited_node").removeClass("visited_node");
$(".button").show();
$(this).hide();
});
//Hide or show nodes by type
$("#nav a").click(function () {
var id = $(this).attr('id');
id = id.split('_');
if ($(this).is(".off")){
$("#menu #menu_" + id[1]).show();
}
else {
$("#menu #menu_" + id[1]).hide();
}
$(this).toggleClass("off");
});
//Show map to nodes when clicked
var option = 'blank';
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();
$('#blank').hide();
}
The plugin also requires
<div id="header">
Default
Darkness
Colorful
</div>
to be placed in the body of the page. I've just been putting it inside my navigation div at the top of the page, but perhaps I'm making a mistake there as well/instead.
As an aside, I note that the local machine version of the demo's index.html does not save the stylesheet preferences, whereas the web version does - I assume this is normal behaviour? Edit: It is. It works fine when uploaded.

Conflict between Jquery [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
conflict between Jquerys
i have a problem when i made lot of jQuery functions on the same file it did not work. In any jQuery tab i want to make a table with to possibility to sort it just by clicking on colonne.
I used this to add jQueryTabs:
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
and this for the sorting fonction:
<script type="text/javascript" src="jquery.js"></script>
I try to use de jQuery.noConflict() fonction but it didn't work , where is the problem ?
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
jq172.noConflict();
jq172(document).ready(function()
{
var jQueryTabs1Opts =
{
event: 'click',
collapsible: false
};
jq172("#jQueryTabs1").tabs(jQueryTabs1Opts);
});
</script>
<script type="text/javascript" src="jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('#example').dataTable( {
"aaSorting": [[ 4, "desc" ]]
} );
} );
</script>
<script type="text/javascript" src="jquery.dataTables.js"></script>

You need to do this:
<script>
var jq172 = jQuery.noConflict();
jq172(document).ready(function()
{
var jQueryTabs1Opts =
{
event: 'click',
collapsible: false
};
jq172("#jQueryTabs1").tabs(jQueryTabs1Opts);
});
</script>
That said, I've never tried this, and I don't know how browser loading and caching would affect this. I'm not confident that the first jQuery.noConflict will call the 1.7.2 library. You might be better off using a library like Require.js to load and separate your modules, despite its coding and setup overhead.

Try assigning no conflict into a variable.
var jq172 = jQuery.noConflict();
var jQuery2 = jQuery.noConflict();

Can someone find an error with this code?

When I run this code in the browser, it says that there is no 'fadeIn' method. Is there a reason to it?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function showDiv1() {
$("#blackback").fadeIn(500);
$("#contactform").fadeIn(500);
$("#blackback").click(function () {
hideDiv1();
});
}
function hideDiv1() {
$("#blackback").fadeOut(500);
$("#contactform").fadeOut(500);
}
</script>
Thanks!

have you included jquery js ? like
<script src="http://code.jquery.com/jquery-latest.js"></script>
refer http://api.jquery.com/delay/

Two points
Like stated above, do you have the query library included?
When you're calling your functions, are you waiting for the dom to load before firing them, i.e. document ready?
I took your code and added in document ready and the jquery library and it seemed to work fine
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#blackback").hide();
$("#contactform").hide();
showDiv1();
});
function showDiv1() {
$("#blackback").fadeIn(500);
$("#contactform").fadeIn(500);
$("#blackback").click(function () {
hideDiv1();
});
}
function hideDiv1() {
$("#blackback").fadeOut(500);
$("#contactform").fadeOut(500);
}
</script>
</head>
<body>
<div id="blackback">ONE</div>
<div id="contactform">contact Form</div>
</body>
</html>
An example of this running is here

It is jquery function, you have to register jquery javascript framework first

Cant figure how to implement following jQuery plugin into my webpage

I've been looking for something that will authorize a textbox when user types something and I found this ideal plugin:
http://james.padolsey.com/javascript/jquery-plugin-autoresize/
It seems prety straight forward, but for some reason I can't implement it on my website >.< do you guys have any ideas on how to do it? (read the post)
Thank You )))
Here is what I tried, but it doesn't work
HTML
<head>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
<script type="text/javascript" src="js/autoresize.jquery.js"></script>
<script type="text/javascript">
$('textarea.mainStatusTxt').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
</script>
</head>
<body>
<textarea class="mainStatusTxt" placeholder="Comment" style="display:block;"></textarea>
</body>

Either wrap your script with:
$(document).ready(function() {
//YOUR CODE
});
or move the entire <script> tag to the end of the document (or at least, after the <textarea>).