Knockout JS with Bootstrap Modal

I have a simple page with a button which triggers a modal to open. I have all my code in this JSFiddle:

Also below:

$('#displayDetails').click(() => {
    let obj = {
        Overview: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        Mileage: 36,
        From: " Location 1",
        To: "Location 2",
        Districts: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    }
    ko.cleanNode(document.getElementById("tabPanel1"));
    ko.applyBindings(obj, document.getElementById("tabPanel1"))
    $('#modalOverlay').modal('show');
    
})

 .modal.modal-fullscreen .modal-dialog {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            max-width: none;
            z-index: 3000;
        }

        .modal.modal-fullscreen .modal-content {
            height: auto;
            height: 100vh;
            border-radius: 0;
            border: none;
        }

        .modal.modal-fullscreen .modal-body {
            overflow-y: auto;
        }

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<button id="displayDetails">Click to see modal</button>
<div class="modal fade modal-fullscreen" id="modalOverlay" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 id="modal_header"></h1>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <section id="tabs" class="project-tab">
                        <!-- <div class="container"> -->
                        <div class="row">
                            <div class="col-md-12">
                                <nav>
                                    <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                                        <a class="nav-item nav-link active" id="nav-1-tab" data-toggle="tab"
                                            href="#nav-1" role="tab" aria-controls="nav-1"
                                            aria-selected="true">Tab 1</a>
                                        <a class="nav-item nav-link" id="nav-2-tab" data-toggle="tab"
                                            href="#nav-2" role="tab" aria-controls="nav-2"
                                            aria-selected="false">Tab 2</a>
                                    </div>
                                </nav>
                                <div class="tab-content" id="nav-tabContent">
                                    <div class="tab-pane fade" id="nav-1" role="tabpanel"
                                        aria-labelledby="nav-1-tab">

                                      
                                        <div id="tabPanel1" class="details-tab-pane tab-pane in active" role="tabpanel"
                                            aria-label="Overview">
                                            <div class="container">
                                                <div class="details-content__wrapper">
                                                    <div class="row">
                                                        <div class="col-md-6 details-content">
                                                            <p data-bind="text: Overview"></p>
                                                            <p>Mileage &amp; Terminus <span data-bind="text: Mileage" data-format="n1"></span>
                                                                miles from
                                                                <span data-bind="text: From"></span> to
                                                                <span data-bind="text: To"></span>
                                                            </p>

                                                            <p>Highway District(s)
                                                                <span data-bind="text: Districts"></span>
                                                            </p>


                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="nav-2" role="tabpanel"
                                        aria-labelledby="nav-2-tab">
                                        <h3>This is Tab 2</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- </div> -->
                    </section>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>

I have 2 tabs inside the modal. First tab has some content with some variable text. I am using Knockout JS to fill out the variable text in the content. However, the first time I click on the button to open the modal, Tab 1 is blank and I have to switch to Tab 2 and back to Tab 1 for the content of Tab 1 to be displayed. I’m a rookie with Knockout JS and don’t know what I am doing wrong. Any help is appreciated!

Answer

I’m a rookie with Knockout JS and don’t know what I am doing wrong.

I don’t think your problem lies with Knockout but with the Bootstrap Tabs. If you look at the CSS classes on each tab, when you click on one of them you’ll see active show added to the classes; When you first display the modal (with the tabs) these classes have not been added to Tab 1 so the Bootstrap JS doesn’t know that you want it displayed.

Currently your tabs are set to display on click, which is why clicking on Tab 2 and then clicking on Tab 1 causes it to show.

There’s probably a way to solve this using the Bootstrap Tabs JavaScript but as you’ve tagged this with knockoutjs then you could force Tab 1 to be displayed by adding those CSS classes yourself – either with a Knockout observable or with vanilla JS.

Advertisement

Answer