Tabs not working - Bootstrap causes JS error

He

HerKle 11 Jan, 2016

Answer

Hi,

had a sudden problem with tabs not opening on a new website with a form installed from backup which worked on its source proper and smoothly.

Firebug console showed JS Error:

TypeError: jQuery(…).tooltp is not a function

Its source was an included JS script:

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
</script>

frogydiak presented a solution hack on github which worked fine for me:

This error is probably coming from this file: libraries/cms/html/bootstrap.php

Look for this code, it's probably at line 481.:
$script[] = "\t jQuery('" . $selector . "').tooltip(" . $options . ");";

change it to this:
$script[] = "\t if ( jQuery.isFunction(jQuery.fn.tooltip) ) jQuery('" . $selector . "').tooltip(" . $options . ");";

After changing line 481, I then got an error on popover, then around line 380.:
jQuery('" . $selector . "').popover(" . $options . ");

Change line 380 to:
if ( jQuery.isFunction(jQuery.fn.popover) ) jQuery('" . $selector . "').popover(" . $options . ");

If anybody meets the same problem, I hope this will provide some help.

Regards,
Herbert

Gr

GreyHead 12 Jan, 2016

Hi Herbert,

Have you checked that jQuery UI is being loaded on the new site? That would also explain the error.

Bob

He

HerKle 12 Jan, 2016

Hi Bob,

what do you mean?

Is it necessary to have UI loaded to avoid the error or is a loaded UI its reason?

Herbert

Gr

GreyHead 12 Jan, 2016

Hi Herbert,

I think that the ToolTip is a part of jQuery UI and so it fails if jQuery UI isn't loaded.

Bob

He

HerKle 12 Jan, 2016

Ok, and how can this UI be loaded then?

Herbert

Gr

GreyHead 12 Jan, 2016

1 Likes

Hi Herbert,

I use the jQueryEasy extension which works well to manage duplicate library loads.

Or you can use this in a Custom Code action in the On Load event

<?php
JHtml::_('jquery.ui');
?>

Bob

He

HerKle 15 Jan, 2016

Hi Bob,

I downloaded jqueryEasy plugin – but am far from understanding what to do with it and which settings I have to use.
Since today the error occured again, I tried your code in a custom code – it didn't help.

So I returned to my first mentioned hack here, which worked. :-(

Kind regards,
Herbert

Forums

Tabs not working - Bootstrap causes JS error