Forums

8.4.1 Is there an example of Bootstrap nav-pills working with concrete5?

Permalink
I have the following code:
<div class="row">
    <div class="col-3">
        <ul class="nav nav-pills nav-stacked" id="myTab">
            <li><a class="active" data-toggle="pill" href="#home">Home</a></li>
            <li><a data-toggle="pill" href="#profile">Profile</a></li>
            <li><a data-toggle="pill" href="#messages">Messages</a></li>
            <li><a data-toggle="pill" href="#settings">Settings</a></li>
        </ul>
    </div>
    <div class="col-9">
        <div class="tab-content" id="content">
            <div class="tab-pane fade show active" id="home">
                <p>Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.</p>
            </div>
            <div class="tab-pane fade" id="profile">
Viewing 15 lines of 26 lines. View entire code block.

view.js:
$(function(){    
    $('#myTab a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });
});

controller:
public function registerViewAssets($outputContent = '')
{
    $this->requireAsset('javascript', 'jquery');
    $this->requireAsset('javascript', 'bootstrap/*');
    $this->requireAsset('css', 'bootstrap/*');
}

which show the pills on the page, I can click them but the contents are not displayed, they are always hidden regardless of the link pressed and an error is thrown in the console: "TypeError: $(...).tab is not a function".

What could be wrong with it?
linuxoid
 
ConcreteOwl replied on at Permalink Reply
ConcreteOwl
Try changing this
<li><a class="active" data-toggle="pill" href="#home">Home</a></li>

To this
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
linuxoid replied on at Permalink Reply
linuxoid
Nope, still throws the error.

Looks like Bootstrap is not loaded. But why?
linuxoid replied on at Permalink Reply
linuxoid
The following worked:

view.php:
<div class="row">
    <div class="col-sm-3">
        <ul class="nav nav-pills nav-stacked" id="ccm-tabs">
            <li class="active"><a href="#" data-tab="home">Home</a></li>
            <li><a href="#" data-tab="profile">Profile</a></li>
            <li><a href="#" data-tab="messages">Messages</a></li>
            <li><a href="#" data-tab="settings">Settings</a></li>
        </ul>
    </div>
    <div class="col-sm-9" id="header">
        <div class="row">
            <div class="col-xs-12">
                <p>Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint.</p>
            </div>
        </div>
Viewing 15 lines of 45 lines. View entire code block.

view.js:
$(function(){    
    ccm_activateTabBar($('#ccm-tabs'));
});

view.css:
.ccm-tab-content { display: none; }
.ccm-tab-content.active { display: block; }
linuxoid replied on at Permalink Reply
linuxoid
What I find is that the above code works in desktop browsers and in browser developer tools, but it doesn't work on real mobile phones. I tried both Chrome and Firefox on my phone. The buttons show but the content does not show. Nor do the buttons (<li>s) get pressed or become 'active'.

Any idea why not?

Thank you.
linuxoid replied on at Permalink Reply
linuxoid
Bummer!

https://www.concrete5.org/community/forums/customizing_c5/ccm_activa...

Copy tabs.js to the package js folder and add this to view.php:
$u = new User();
if (!$u->isLoggedIn()) { ?>
  <script src="<?php echo $pkg->getRelativePath(); ?>/js/tabs.js"></script>
<?php } ?>
jasteele12 replied on at Permalink Reply
jasteele12
Sounds like if you moved the user logic to the block controller's view() and fleshed it out a bit, it would make for a nice quick How-To ;)
linuxoid replied on at Permalink Reply
linuxoid
I've actually moved that code to the controller:
$u = new User();
        if (!$u->isLoggedIn()) {
            $html = $this->app->make('helper/html');
            $pkg = \Concrete\Core\Package\Package::getByHandle('package_handle');
            $this->addFooterItem($html->javascript($pkg->getRelativePath() . '/js/tabs.js'));
        }


PS. That's why I want a Code Snippets section on this site

https://www.concrete5.org/community/forums/chat/i-would-like-code-sn...
jasteele12 replied on at Permalink Reply
jasteele12
I hear ya, and also replied to that thread.

Still, I think this case is more of a How-To than a snippet though...
linuxoid replied on at Permalink Reply
linuxoid
HOW TO use nav-pills in package:

1. Copy tabs.js from /concrete/js/build/core/app/ to the package's js folder
2. Add this code to block or single page controller's view():
$u = new User();
if (!$u->isLoggedIn()) {
    $html = $this->app->make('helper/html');
    $pkg = \Concrete\Core\Package\Package::getByHandle('package_handle');
    $this->addFooterItem($html->javascript($pkg->getRelativePath() . '/js/tabs.js'));
}


)))