Skip to content
Advertisement

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:

JS Fiddle

Also below:

JavaScript
JavaScript
JavaScript
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!

Advertisement

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.

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement