Мастер начальной загрузки не работает в модальном диалоговом окне Bootstrap или jquery-ui

Question

Застрял в этом довольно долго, я пытаюсь создать мастер форм с помощью мастера начальной загрузки Twitter (http://vinceg.github.io/twitter-bootstrap-wizard/), который отображается при нажатии кнопки в модальном окне. Это не похоже на работудля меня.

Мастер создается динамически с помощью вызова ajax, который возвращает html для мастера. Я также пытался использовать плагин jQuery Steps , который также не работал должным образом в модальных окнахЯ попробовал 2 подхода:

1. Добавление html мастера в диалоге jquery-ui - Здесь шаги jquery метод плагина .steps() не смогсоздать мастер, вместо мастера был выведен довольно плоский html.

2. Добавление html мастера в мастер начальной загрузки - вкладки создаются как ссылки, но при нажатии на любую из вкладок происходит переход кlocalhost:port//#tab1

Вот мои фрагменты кода:

Мастер начальной загрузки

 <div id="MainContainer">
        <form id="MainForm" class="form-horizontal">
            <div class='sectionA' id='rootwizard'>

                <ul class="nav nav-tabs">
                    <li class="active"><a href="#Tab1" data-toggle="tab">Tab1</a></li>
                    <li><a href="#Tab2" data-toggle="tab">Tab2</a></li>                      
                </ul>

                <div class="tab-content">
                    <div class="tab-pane" id="Tab1">
                        <div class="control-group">
                            <label class="control-label" for="email">Email</label>
                            <div class="controls">
                                <input type="text" id="emailfield" name="emailfield" class="required email">
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label" for="name">Name</label>
                            <div class="controls">
                                <input type="text" id="namefield" name="namefield" class="required">
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="Tab2">
                        <div class="control-group">
                            <label class="control-label" for="url">URL</label>
                            <div class="controls">
                                <input type="text" id="urlfield" name="urlfield" class="required url">
                            </div>
                        </div>
                    </div>

                    <ul class="pager wizard">
                        <li class="previous"><a href="#">Previous</a></li>
                        <li class="next"><a href="#">Next</a></li>
                    </ul>
                </div>    
            </div>
        </form>
    </div>

Модальное окно

<div id="MainDiv" tabindex="-1" class="modal fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Trigger</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="DialogDiv">

            </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>

Javascript

        $('#MainDiv').on('shown.bs.modal', function (e) {
                $.ajax({
                    url: '/MethodToFetchData',
                    type: 'POST',                    
                    data: data,
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        var html = JSON.stringify(data);
                        html = html.replace(/(?:\\[rn])+/g, "");                                                       
                        initTriggerAdvancedEdit(html);
                    },
                    error: function (err) { alert(JSON.stringify(err)); }
                });
        });

    function initTriggerAdvancedEdit(html) {
        $('#rootwizard').bootstrapWizard({
            'tabClass': 'nav nav-pills'
        });
    }