1

I have added a Bootstrap Wizard inside the modal, and I need to initialize the Wizard only when this actually exists on the DOM 'cause I have to calculate the width, when the modal is closed if I execute:

$('.card-wizard').width()

I get: 0, when the modal is opened if I execute the same command above I get 465. The problem is that I have to calculate the width after that the modal is opened otherwise the width() method will return 0.

What I tried so far is:

$('a[href="#account"]').on('shown.bs.tab', function(){ $('.card-wizard').bootstrapWizard({ onInit: function(tab, navigation, index){ let width = $('.card-wizard').width(); } }); });

the tab is defined in that way:

<div class="wizard-navigation"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#account" data-toggle="tab" role="tab"> Account </a> </li>

and the wizard is contained inside the member-modal which is opened using $('#member-modal').modal('show');

is there a way to initialize the BootStrap Wizard after the modal show?

Improve this question

3 Answers 3

Reset to default
2 
$('#code').on('shown.bs.modal', function (e) { // do something... })
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The width is 0 because your element is inside the modal that is hidden.

You can workaround using .show( complete ).

The snippet:

$('#exampleModal').show('show', function() { var x = $('.wizard').width(); $('#exampleModal').hide(); console.log('width: ' + x); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://www.bootstrapwizard.com/demo/bootstrap-wizard.css"> <script src="http://www.bootstrapwizard.com/demo/bootstrap-wizard.min.js"></script> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body wizard"> <ul class="nav nav-wizard"> <li> <a href="#step1">Step 1</a> </li> <li> <a href="#step2">Step 2</a> </li> <li> <a href="">Step 3</a> <ul class="nav nav-wizard"> <li> <a href="#step3a">Step 3A</a> </li> <li> <a href="#step3b">Step 3B</a> </li> <li> <a href="#step3c">Step 3C</a> </li> </ul> </li> <li> <a href="#step4">Step 4</a> <ul class="nav nav-wizard"> <li> <a href="#step4a">Step 4A</a> </li> <li> <a href="#step4b">Step 4B</a> </li> <li> <a href="#step4c">Step 4C</a> </li> </ul> </li> <li> <a href="#step5">Step 5</a> </li> </ul> <div class="wizard-pane" id="step1"> <h3>Step 1</h3> </div> <div class="wizard-pane" id="step2"> <h3>Step 2</h3> </div> <div class="wizard-pane" id="step3a"> <h3>Step 3A</h3> <p>Step 3 href is empty, so the first child is selected</p> </div> <div class="wizard-pane" id="step3b"> <h3>Step 3B</h3> </div> <div class="wizard-pane" id="step3c"> <h3>Step 3C</h3> </div> <div class="wizard-pane" id="step4"> <h3>Step 4</h3> </div> <div class="wizard-pane" id="step4a"> <h3>Step 4A</h3> </div> <div class="wizard-pane" id="step4b"> <h3>Step 4B</h3> </div> <div class="wizard-pane" id="step4c"> <h3>Step 4C</h3> </div> <div class="wizard-pane" id="step5"> <h3>Step 5</h3> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

Improve this answer

Comments

0

I appreciated the solution of gaetano, but I would propose another solution, add this in the show event:

$('#member-modal).focus();

and then create:

$('#member-modal').on('focus', function () { //init wizard.. });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.