Joomla Templates Club 406,261 posts

[Sam Samiei Friend Sam SamieiJoin date: September 2014Posts: 118Downloads:187Uploads:15 Thanks: 4]

#659943

The tabs WITHOUT dropdown tab works as expected in any joomla article. However, when I add the bootstrap drop down tab, everything breaks. I can see the tab but the javascipt doesn’t work – i can’t switch between tabs.

Ive had the same problem with Ja Decor and fixed the problem with the solution below

Open templates/ja_decor/js/script.js file

find and change

Code:

if($('.nav.nav-tabs').length > 0 && $('.view-article').length == 0){
$('.nav.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
}

to

Code:

if($('.nav.nav-tabs').length > 0){
$('.nav.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
}

but i can’t find that bit of code in ja directory js file.
any help appreciated.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#660399

Hi behroz,

These are different templates so they doesn’t use the same JS code as you mentioned. The tab in JA Directory template use bootstrap libruary.

[Sam Samiei Friend Sam SamieiJoin date: September 2014Posts: 118Downloads:187Uploads:15 Thanks: 4]

#660636

<em>@Ninja Lead 487074 wrote:</em><blockquote>Hi behroz,

These are different templates so they doesn’t use the same JS code as you mentioned. The tab in JA Directory template use bootstrap libruary.</blockquote>
hi
Any idea how to fix the issue on ja directory?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#660685

I did not get the problem on your site, you can clarify it more details so that I can replicate issue and help you to check it further.

[Sam Samiei Friend Sam SamieiJoin date: September 2014Posts: 118Downloads:187Uploads:15 Thanks: 4]

#660885

<em>@Ninja Lead 487161 wrote:</em><blockquote>I did not get the problem on your site, you can clarify it more details so that I can replicate issue and help you to check it further.</blockquote>
this is the page:
https://www.northlondonappliancerepairs.co.uk/west-london-appliance-repairs.html#double-ovens

and where it says We offer the following domestic appliance repairs:
there is a bootstrap dropdown tabs that are not functioning.

[Sam Samiei Friend Sam SamieiJoin date: September 2014Posts: 118Downloads:187Uploads:15 Thanks: 4]

#745359

<em>@Ninja Lead 487161 wrote:</em><blockquote>I did not get the problem on your site, you can clarify it more details so that I can replicate issue and help you to check it further.</blockquote>
this is the page:
https://www.northlondonappliancerepairs.co.uk/west-london-appliance-repairs.html#double-ovens

and where it says We offer the following domestic appliance repairs:
there is a bootstrap dropdown tabs that are not functioning.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#660943

It seems to be a bug of this template. I’ve reported to the development team for further checking, you can check its status here.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#745417

It seems to be a bug of this template. I’ve reported to the development team for further checking, you can check its status here.

[Sam Samiei Friend Sam SamieiJoin date: September 2014Posts: 118Downloads:187Uploads:15 Thanks: 4]

#663024

<em>@Ninja Lead 487324 wrote:</em><blockquote>It seems to be a bug of this template. I’ve reported to the development team for further checking, you can check its status here.</blockquote>

Hi, any update on this?
thanks

[Sam Samiei Friend Sam SamieiJoin date: September 2014Posts: 118Downloads:187Uploads:15 Thanks: 4]

#745968

<em>@Ninja Lead 487324 wrote:</em><blockquote>It seems to be a bug of this template. I’ve reported to the development team for further checking, you can check its status here.</blockquote>

Hi, any update on this?
thanks

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#663184

<em>@behroz 488131 wrote:</em><blockquote>Hi, any update on this?
thanks</blockquote>

You can use temporary fix with the problem on your site

Open templates/ja_directory/js/script.js file and add script below into end of line


(function($){
$(document).ready(function(){
if($('.nav.nav-tabs').length > 0){
$('.nav.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
}
});
})(jQuery);


Hope it helps

[Sam Samiei Friend Sam SamieiJoin date: September 2014Posts: 118Downloads:187Uploads:15 Thanks: 4]

#663774

<em>@Ninja Lead 488260 wrote:</em><blockquote>You can use temporary fix with the problem on your site

Open templates/ja_directory/js/script.js file and add script below into end of line


(function($){
$(document).ready(function(){
if($('.nav.nav-tabs').length > 0){
$('.nav.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
}
});
})(jQuery);


Hope it helps</blockquote>

thanks, it worked.

[Sam Samiei Friend Sam SamieiJoin date: September 2014Posts: 118Downloads:187Uploads:15 Thanks: 4]

#672821

<em>@Ninja Lead 488260 wrote:</em><blockquote>You can use temporary fix with the problem on your site

Open templates/ja_directory/js/script.js file and add script below into end of line


(function($){
$(document).ready(function(){
if($('.nav.nav-tabs').length > 0){
$('.nav.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
}
});
})(jQuery);


Hope it helps</blockquote>

Hi,
thanks for your earlier help. I have just noticed there is same issue with other Tabs and they are not working, the drop down one is fine now after i added the code but the normal tabs doesn’t function and can’t switch between them.

here is one of the pages with Ja Directory template and the tab
https://goo.gl/lM3Kkv

thanks in advance

[Sam Samiei Friend Sam SamieiJoin date: September 2014Posts: 118Downloads:187Uploads:15 Thanks: 4]

#746714

<em>@Ninja Lead 488260 wrote:</em><blockquote>You can use temporary fix with the problem on your site

Open templates/ja_directory/js/script.js file and add script below into end of line


(function($){
$(document).ready(function(){
if($('.nav.nav-tabs').length > 0){
$('.nav.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
}
});
})(jQuery);


Hope it helps</blockquote>

Hi,
thanks for your earlier help. I have just noticed there is same issue with other Tabs and they are not working, the drop down one is fine now after i added the code but the normal tabs doesn’t function and can’t switch between them.

here is one of the pages with Ja Directory template and the tab
https://goo.gl/lM3Kkv

thanks in advance

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#672874

<em>@behroz 489271 wrote:</em><blockquote>Hi,
thanks for your earlier help. I have just noticed there is same issue with other Tabs and they are not working, the drop down one is fine now after i added the code but the normal tabs doesn’t function and can’t switch between them.

here is one of the pages with Ja Directory template and the tab
https://goo.gl/lM3Kkv

thanks in advance</blockquote>

I am not sure the HTML code tab under Module ID: 221 on your site works or not but I made the tab like as you are trying to do and it’s working fine, you can use it


<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">home</div>
<div role="tabpanel" class="tab-pane" id="profile">profile</div>
<div role="tabpanel" class="tab-pane" id="messages">messages</div>
<div role="tabpanel" class="tab-pane" id="settings">settings</div>
</div>
</div>


[Author]

Posts