Bootstrap wizard not working inside Bootstrap modal or jquery-ui dialog

Question

Stuck on this for quite some time now, I am trying to create a form wizard using twitter bootstrap wizard (http://vinceg.github.io/twitter-bootstrap-wizard/) which is shown on button click inside a modal window. This doesn't seem to be working for me.

The wizard is created dynamically using an ajax call, which returns the html for the wizard. I also tried using jQuery Steps plugin which was also not working properly inside the modal windows. I tried 2 approaches:

1. Appending the wizard html inside a jquery-ui dialog. - Here the jquery steps plugin method .steps() wasn't able to create the wizard, rather flat html was rendered instead of a wizard.

2. Appending the wizard html inside a bootstrap wizard - Tabs are created as links, but clicking on either of the tabs navigates to localhost:port//#tab1

Here are my code snippets:

Bootstrap Wizard

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

Modal Window

<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'
        });
    }