why jquery ui tooltip options are not working? - javascript

on my page I'm trying to apply jquery ui tooltip on a specific element:
<script>
$(function() {
$('.aticker').tooltip(); //works perfectly
});
</script>
but no options are working at all, so:
$('.aticker').tooltip({track: true}); // not working
$(document).tooltip(); //not working ( i have to use selector and not document)
$('.aticker').tooltip({tooltipClass:'rd'}); // not working
not sure what is wrong with it.

I found out that there was a confliction between bootstrap.js and jquery.js tooltip.
known issue
Tooltip conflict with jQuery UI #6303

I am not allowed to comment because of a lack of reputation, so I will post this as an answer. I created a jsfiddle based on your information. For me it seems to work perfectly well.
I used the links to the javascript files from your post and $('.aticker').tooltip({track: true}); works.
Could you please provide further information such as any errors shown in the javascript console?

Related

Lightbox.options is not a function - lightbox plugin

I am using this lightbox plugin,
http://lokeshdhakar.com/projects/lightbox2/
https://github.com/lokesh/lightbox2/
I have items on the page similar to the example:
Image #2
Image #3
Image #4
it works fine, but I want to change some options, for that according to the documentation http://lokeshdhakar.com/projects/lightbox2/#options it should be
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
however i am getting an error
lightbox.option is not a function
so, how to set the options I need ?
edit: the option snippet I have is AFTER the line where the lightbox js is loaded.
edit2: also the options snippet is inside document ready
edit3: lightbox is loaded and is working fine
As it turned out it has something to do with the version, i was using version 2.7.1, I tried with the version 2.8.1 and the error disappeared
I had same problem using npm. I solved it like this.
import lightbox from 'lightbox2/dist/js/lightbox';
window.lightbox = lightbox;
window.lightbox.option({
disableScrolling: true,
fadeDuration:200,
//other
});
Change the ID of that <div id="lightbox"> to something else. Browsers automatically turn all IDs into global variables, and this is overwriting the global lightbox object.

JQuery plugin dotdotdot not working

I have this fiddle:
http://jsfiddle.net/6HKJZ/3/
This is the part of CSS that causes troubles:
.r .rp{
max-width:50%;
}
.r .r2{
padding:5px;
max-height:60px;
background-color:#292929;
}
And this is the Javascript code:
$(".rp, .r2").dotdotdot();
I get informations from an external page, everything worked before, but now it does not.
This is what I get on my site:
Everything is correct but it's not working...
P.S. Sorry about bad formatting
when you call dotdotdot() it is to early stage to calculate domElements. I wired thing to a button click and it is working.
http://jsfiddle.net/6HKJZ/5/
I don't know when you call it exactly but try jquery dom ready event
$(function(){
//Your code
});
if this does not work try to call it little bit later with a setTimeout
AS I understand it you are trying to use a jQuery plugin that adds the method "dotdotdot". Your fiddle only includes jQuery, not the dotdotdot library.
If you check your console, running your project, does it give an "undefined" on the line it runs "dotdotdot"? It does on the fiddle.
I included the lib on this updated fiddle: http://jsfiddle.net/6HKJZ/4/. And it works.
$(".rp, .r2").dotdotdot();

Trouble getting bootstrap tooltips to work on Joomla 3.0 with Gantry 4 Framework

I am trying to enable the bootstrap tooltips in Gantry 4.
The bootstrap javascript is loaded, as bootstrap.min.js as is jquery.
I added the following to the index.php file just before the closing body tag
<script type="text/javascript">
$(document).ready(function () {
$("[rel=tooltip]").tooltip();
});
</script>
I seem to have a conflict as I get the following error:
TypeError: 'undefined' is not a function (evaluating '$(document).ready(function () {
$("[rel=tooltip]").tooltip();
})')
The text that is supposed to trigger the tooltip is:
le cas d’un mariage de longue durée
Can someone please point out what I need to do to resolve this? Thanks.
Sorry, I forgot to add the link to the site and page where the tooltip is not functioning.
http://gobet.ergonomiq.net/divorce-séparation/divorce/26-requérir-seul-le-divorce-après-deux-ans-de-séparation#
You have MooTools active on the website, so the $ selector doesn't work like it would if jQuery were the primary $ selector agent. You'll need to convert the uses of $ where jQuery is expected to use jQuery instead.
Example:
$(selector here)
should be:
jQuery(selector here)
And everything else will work fine.
Ensure that you have only 1 jQuery library being loaded and that it is at the top of the list. If not, then your bootstrap.min.js file won't work.
If this is done and it's still not working, try adding the code like so:
$document = JFactory::getDocument(); //remove is this line is already being used
$js = "$(document).ready(function(){
$('[rel=tooltip]').tooltip();
});";
$document->addScriptDeclaration($js);
Hope this helps.
Add the bootstrap framework to the component.php of your template:
JHtml::_('bootstrap.framework');
This should solve the ".tooltip is not a function" error
In your Joomla Project, open templates/<your-template-name>/index.php.
find JHtml::_('behavior.framework', true); and comment it out.
OR You can just replace the word behavior with bootstrap.

Twitter Bootstrap Popovers not working for Dynamically Generated Content

New to posting on stackoverflow here, so my apologies in advance if I messed anything up here.
I'm using Twitter Bootstrap's popovers. My popovers seem to be working for elements that I manually type into my HTML document - but NOT the elements that I dynamically generate via Javascript / Ajax.
For example, the popover seems to work if I manually add this directly to my HTML document:
<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>
But what I really need is for my dynamically generated elements to have popovers. I use an XMLHttpRequest to send a request to a PHP file, and then grab the responseText and display it. When I add this line of code to my aforementioned PHP file:
echo "<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>";
... surely enough, the words "hover for popover" appear - but the popover itself doesn't work!
This has been driving me nuts for some time and it would be incredible if someone could lend me a helping hand! I've also added the JQuery function I'm using to enable Bootstrap's popovers below, for what that's worth.
$(function (){
$("[rel=popover]").popover({placement:'left'});
});
I've done a thorough search of similar problems and the best I could find was this link. But that link doesn't seem to have any solutions either. Thanks in advance again!
UPDATE:
Fixed! Many thanks to everyone who helped out. My problem was that the function was being called BEFORE the elements were added into the Document Object Model. There are multiple possible fixes - I simply tested out the solution by shifting the popover function to the END of the Ajax function and it worked!
You need to call $("[rel=popover]").popover({placement:'left'}); AFTER the elements are in the DOM.
UPDATE
If you are using jQuery
$(element_selector)
// load results into HTML of element_selector
.load('your/php/file')
// when done, initialize popovers
.done(function(){
$("[rel=popover]").popover({placement:'left'});
});
OR a catch all for jQuery ajax requests
$.ajaxComplete(function(){
$("[rel=popover]").popover({placement:'left'});
});
In the success function of the ajax you need to call the popover. Something like this
success:function(){
$("[rel=popover]").popover({placement:'left'});
}
This Function will work properly in the selector you have to specify the location on the page where you have to search "rel=popover" like I put *
$(function ()
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});

jquery autocomplete this.source is not a function error

I've implemented autocomplete on an input field, but the box does not show up and firebug returns "this.source is not a function". I've used autocomplete on other fields of the same page without any problems. (two textarea's).
I'm using the following code to debug, same effect if I run from script file or Firebug command line.
var fakedata = ['test1','test2','test3','test4','ietsanders'];
$("#omschrijving").autocomplete(fakedata);
running jquery 1.4.2 and jquery ui 1.8.2, both minified versions.
Does anyone have an idea how autocomplete works fine on the textareas but causes this malfunctioning on inputs?
Error & Stack trace:
this.source is not a function
http://facturatie.autodealers.nl/dev/resources/js/jquery-ui-1.8.2.custom.min.js
Line 570
close(Object { name="a"})jquery....min.js (regel 570)
close(Object { name="a"}, Object { name="c"})jquery....min.js (regel 570)
response()
Answer is that the first parameter of the autocomplete should be an object containing the "source" property. This works
var fakedata = ['test1','test2','test3','test4','ietsanders'];
$("#omschrijving").autocomplete({source:fakedata});
If you were trying to use autocomplete from http://www.devbridge.com/projects/autocomplete/jquery/#demo, it now collides with the autocomplete method in jQuery UI. I had the same problem and later noticed that I could just use the jQuery UI implementation.
(NOTE: It appears that this page's documentation is wrong: http://docs.jquery.com/Plugins/Autocomplete#Setup)
If you use it with jQuery UI library it also has plugin named autocomplete. In this case you can use plugin alias devbridgeAutocomplete:
$('.autocomplete').devbridgeAutocomplete({ ... });
This solve the problem with jQuery UI collision
As Shelton stated, the version from devbridge.com (1.1.3) collides with jQuery UI (1.8.4). Got it working by making sure the devbridge version loads after jQuery UI's version.
Had similar problem for tagedit/autocomplete. It seems you also want to disable the autocomplete. Setting the source to false avoids these errors.
Solution:
options.autocompleteOptions.source = false;
Search at the end of jquery.autocomplete.js the following section:
Create chainable jQuery plugin:
$.fn.devbridgeAutocomplete = function (options, args) {....
This devbridgeAutocomplete is an alternative plugin to access to the same functionality using this lines:
if (!$.fn.autocomplete) {
$.fn.autocomplete = $.fn.devbridgeAutocomplete;
}
So.. you can use devbridgeAutocomplete instead of autocomplete or any name by changing this $.fn.devbridgeAutocomplete
in my case I had a second import of jquery which I didn't realize.
Something like:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js"></script>
// More code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
So be sure to import the autocomplete script after you initialized jquery.

Categories