Conflict between Jquery [duplicate] - javascript

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

Related

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

Winow.setInterval js not working

I am trying to usesetInterval for a javascript function of mine to be called every 5 seconds. Here is what I have for code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="#routes.Assets.at("bootstrap/dist/css/bootstrap.css")" rel="stylesheet"/>
<script src="#routes.Assets.at("javascripts/patientmonitor.js")"/>
<script type="text/javascript">
window.setInterval("myFunction()",1000);
</script>
</head>
I know the function is being loaded in to the window, because I can call it via window.myFunction() and it performs as expected.
Thanks!
In your code this <script> has not closing tag but it is being self closed which is wrong
<script src="#routes.Assets.at("javascripts/patientmonitor.js")"/>
that's why setInterval code is not executing.
Your code have quote "" problem also.
<script src="#routes.Assets.at('javascripts/patientmonitor.js')"/>
//-----------------------------^convert it into single quote-^
<link href="#routes.Assets.at('bootstrap/dist/css/bootstrap.css')" rel="stylesheet"/>
JS
function myFunction (){
alert("your code here");
}
window.setInterval(myFunction, 1000);
Try this:
myInterval = setInterval(function() { myFunction() }", 5000);

pjs is undefined (processingjs)

if i use this:
$(document).ready(function() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(pjs);
}
then pjs is always undefined
when i use this:
function test() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(pjs);
}
and trigger test() with a button then pjs = D.Processing, as it should be.
I load the scripts in this order:
<script type="text/javascript" src="processing-1.3.6.min.js"></script>
<script type="text/javascript" src="jquery1-7-1.js"></script>
<script type="text/javascript" src="script.js"></script>
How can i work with pjs without have people to press a button?
Please try this - just to also see if it is a timing issue - note the swapped scripts too:
<script type="text/javascript" src="jquery1-7-1.js"></script>
<script type="text/javascript" src="processing-1.3.6.min.js"></script>
<script type="text/javascript" src="script.js"></script>
var tId,pjs,cnt=0;
$(document).ready(function() {
tId=setInterval(function() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(cnt+':'+pjs);
if (pjs) clearInterval(tId);
},500);
});
and what does this say?
var tId,pjs,cnt=0;
$(document).ready(function() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(cnt+':'+pjs);
if (!pjs) tId=setInterval(function() {
pjs = Processing.getInstanceById("EyeCanvas");
console.log(cnt+':'+pjs);
if (pjs) clearInterval(tId);
},500);
});
Yes mplungjan wrote the true answer, but remember that, when you use JQuery plugins you must be load JQuery library first, all time.

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

2 javascripts plugin not working together

I tried to implement 2 plugins in a page and when i introduce the 2nd one... the 1st plugins stops working .. can you please help me in this.. he is the page i am trying to build..
http://www.abc.com/home21
and here are the 2 plugins i am trying to use.
http://www.catswhocode.com/blog/how-to-integrate-a-slideshow-in-your-wordpress-theme
http://www.fyneworks.com/jquery/star-rating/
here is my code.. The rating script was working from beginning. i tried to add this slideshow in this page like
<link rel="stylesheet" href="testing/t1/css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="testing/t1/css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="testing/t1/scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="testing/t1/scripts/jd.gallery.js" type="text/javascript"></script>
<script src="testing/t1/scripts/jd.gallery.transitions.js" type="text/javascript"></script>
<script type="text/javascript">
var newj = jQuery.noConflict();
function startGallery() {
var myGallery = new gallery(newj('myGallery'), {
timed: true,
showArrows: false,
embedLinks: false,
showCarousel: true,
defaultTransition: "continuoushorizontal"
});
} window.onDomReady(startGallery);
</script>
please help me how to solve this problem
You are using both Mootools and JQuery. These two javascript libraries overwrite each other.
http://www.catswhocode.com/blog/how-to-integrate-a-slideshow-in-your-wordpress-theme uses Mootools
http://www.fyneworks.com/jquery/star-rating/ uses Jquery
You will need to find plugins that only use jquery or mootools. See:
http://mootools.net/forge/
http://plugins.jquery.com/
For more plugins for each framework.
So the first one is MooTools, the second is jQuery. You can try to do $.noConflict()
http://api.jquery.com/jQuery.noConflict/
jQuery.noConflict();
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
embedLinks: false,
showCarousel: true,
defaultTransition: "continuoushorizontal"
});
} window.onDomReady(startGallery);
Regarding your using of $ all over your site, this would do it(based on docu):
<script type="text/javascript" src="other_lib.js"></script><!-- your mootools lib-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
$('#id-here').click(function(e) {
alert('I can use $ here with no conflicts on other js libraries!');
});
});
// Code that uses other library's $ can follow here.
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
embedLinks: false,
showCarousel: true,
defaultTransition: "continuoushorizontal"
});
} window.onDomReady(startGallery);
</script>
If this still didn't work, take time to read the manual...you will get it eventually^^ Just know using .noConflict worked for me on a similar case I had a while back.
Though I'm curious where your star rating code is located...

Categories