1

现在坚持了很长一段时间，我正在尝试使用 twitter 引导向导（http://vinceg.github.io/twitter-bootstrap-wizard/）创建一个表单向导，该向导显示在模式窗口内的按钮单击上。这似乎对我不起作用。

该向导是使用 ajax 调用动态创建的，该调用返回向导的 html。我还尝试使用jQuery Steps插件，该插件在模态窗口中也无法正常工作。我尝试了两种方法：

  1. 在 jquery-ui 对话框中附加向导 html。- 这里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'
        });
    }
4

0 回答 0