4

我正在使用 jquery,bootstrapWizard 插件将标准表单变成向导。我已经完成了这项工作，但是在重新编写表单并更新 jquery 和相关脚本时，我已经损坏了表单并且看不到出了什么问题。

我正在使用引导程序版本 3.1.1。Jquery 2.01 我的表单有 4 个选项卡，外观设置正确。我可以使用表单顶部的导航按钮导航到每个选项卡，但是我无法使用下一个按钮导航到第二页之外。

我最初认为验证是导致问题的原因，因此暂时删除了验证脚本，但问题仍然存在。

使用按钮导航最终提交按钮不会出现。我不确定我的 html 是否是问题所在 - 尽管我使用了标准设置，或者是插件脚本还是我的设置脚本。

我会设置一个小提琴，但以前有没有人遇到过这个问题

这是基本的向导 html：

  <form action="dummy">
    <div class="wizard-form">
            <div class="wizard-content">
              <ul class="nav nav-pills nav-justified steps">
                <li>
                  <a href="#step1" data-toggle="tab" class="wiz-step active">
                    <span class="step-number">1</span>
                    <span class="step-name">
                      <i class="fa fa-check"></i>
                      Article Details
                    </span>
                  </a>
                </li>

                <li>
                  <a href="#step2" data-toggle="tab" class="wiz-step">
                    <span class="step-number">2</span>
                    <span class="step-name">
                      <i class="fa fa-check"></i>
                      Article Content
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#step3" data-toggle="tab" class="wiz-step">
                    <span class="step-number">3</span>
                    <span class="step-name">
                      <i class="fa fa-check"></i>
                      Images and Files
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#step4" data-toggle="tab" class="wiz-step">
                    <span class="step-number">4</span>
                    <span class="step-name">
                      <i class="fa fa-check"></i>
                      Attributes and Submit
                    </span>
                  </a>
                </li>
              </ul>
              <div id="bar" class="progress progress-striped progress-sm active" role="progressbar">
                <div class="progress-bar progress-bar-warning"></div>
              </div>
              <div class="tab-content">

                <div class="alert alert-danger display-none">
                  <a class="close" aria-hidden="true" href="#" data-dismiss="alert">×</a>
                  Your article has errors. Please correct them to proceed.
                </div>
                <div class="alert alert-success display-none">
                  <a class="close" aria-hidden="true" href="#" data-dismiss="alert">×</a>
                  Your form validation is successful!
                </div>
                <!-- TAB PANE 1 -->
                <div class="tab-pane active" id="step1">
                  <p>Tab 1</p>


                </div>
                <!-- TAB PANE 2 -->
                <div class="tab-pane" id="step2">

                 <p>Tab 2</p>

                </div>
                <!-- TAB PANE 3 -->
                <div class="tab-pane" id="step3">
                  <p>Tab 3</p>

                </div>

                <!-- TAB PANE 4 -->
                <div class="tab-pane" id="step4">
                  <p>Tab 4</p>


                </div>
              </div>
            </div>

          </div>
          <div class="wizard-buttons">
            <div class="row">
              <div class="col-md-12">
                <div class="col-md-offset-3 col-md-9">
                  <a href="javascript:;" class="btn btn-default prevBtn">
                    <i class="fa fa-arrow-circle-left"></i>
                    Back
                  </a>
                  <a href="javascript:;" class="btn btn-primary nextBtn">
                    Continue
                    <i class="fa fa-arrow-circle-right"></i>
                  </a>
                  <a href="javascript:;" class="btn btn-success submitBtn">
                    Submit
                    <i class="fa fa-arrow-circle-right"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        </form>

这是向导脚本：

var FormWizard = function() {
console.log("setting up form");
return {
    init: function() {
        if (!jQuery().bootstrapWizard) {
            return;
        }

        var wizform = $('#myForm');
        var alert_success = $('.alert-success', wizform);
        var alert_error = $('.alert-danger', wizform);



        /*-----------------------------------------------------------------------------------*/
        /*  Initialize Bootstrap Wizard
        /*-----------------------------------------------------------------------------------*/
        $('#formWizard').bootstrapWizard({
            'nextSelector': '.nextBtn',
            'previousSelector': '.prevBtn',
            onNext: function(tab, navigation, index) {
                alert_success.hide();
                alert_error.hide();

                var total = navigation.find('li').length;
                console.log("Total:", total);
                var current = index + 1;
                console.log("current:", current)
                $('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total);
                jQuery('li', $('#formWizard')).removeClass("done");
                var li_list = navigation.find('li');
                 for (var i = 0; i < index; i++) {
                     jQuery(li_list[i]).addClass("done");
                 }
                if (current == 1) {
                    $('#formWizard').find('.prevBtn').hide();
                } else {
                    $('#formWizard').find('.prevBtn').show();
                }
                if (current >= total) {
                    $('#formWizard').find('.nextBtn').hide();
                    $('#formWizard').find('.submitBtn').show();
                } else {
                    $('#formWizard').find('.nextBtn').show();
                    $('#formWizard').find('.submitBtn').hide();
                }
            },
            onPrevious: function(tab, navigation, index) {
                alert_success.hide();
                alert_error.hide();
                var total = navigation.find('li').length;
                var current = index + 1;
                $('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total);
                jQuery('li', $('#formWizard')).removeClass("done");
                var li_list = navigation.find('li');
                for (var i = 0; i < index; i++) {
                    jQuery(li_list[i]).addClass("done");
                }
                if (current == 1) {
                    $('#formWizard').find('.prevBtn').hide();
                } else {
                    $('#formWizard').find('.prevBtn').show();
                }
                if (current >= total) {
                    $('#formWizard').find('.nextBtn').hide();
                    $('#formWizard').find('.submitBtn').show();
                } else {
                    $('#formWizard').find('.nextBtn').show();
                    $('#formWizard').find('.submitBtn').hide();
                }
            },
            onTabClick: function(tab, navigation, index) {
                 bootbox.alert('On Tab click is disabled');
                 return false;
            },
            onTabShow: function(tab, navigation, index) {
                 var total = navigation.find('li').length;
                 var current = index + 1;
                 var $percent = (current / total) * 100;
                 $('#formWizard').find('.progress-bar').css({
                     width: $percent + '%'
                 });
            }
        });



        $('#formWizard').find('.prevBtn').hide();


    }
};

更新： 我添加了几个console.logs来获取索引等，按照下面放在onNext事件中的问题。第一次单击后，索引显示为 1，这将是正确的，但不会进一步增加。

我刚刚也意识到后退按钮也不起作用。所以它进入选项卡 2（索引 1）并卡住

4

3 回答 3

2

设法让它为你工作：小提琴

您需要formWizard像这样将 id 添加到表单中：

<form action="dummy" id="formWizard">

然后改变你的 JS 使其有意义，如下所示：

var FormWizard = function () {
    console.log("setting up form");

        var wizform = $('#myForm');
        var alert_success = $('.alert-success', wizform);
        var alert_error = $('.alert-danger', wizform);



        /*-----------------------------------------------------------------------------------*/
        /*  Initialize Bootstrap Wizard
        /*-----------------------------------------------------------------------------------*/
        $('#formWizard').bootstrapWizard({
            'nextSelector': '.nextBtn',
                'previousSelector': '.prevBtn',
            onNext: function (tab, navigation, index) {
                alert_success.hide();
                alert_error.hide();

                var total = navigation.find('li').length;
                console.log("Total:", total);
                var current = index + 1;
                console.log("current:", current)
                $('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total);
                jQuery('li', $('#formWizard')).removeClass("done");
                var li_list = navigation.find('li');
                for (var i = 0; i < index; i++) {
                    jQuery(li_list[i]).addClass("done");
                }
                if (current == 1) {
                    $('#formWizard').find('.prevBtn').hide();
                } else {
                    $('#formWizard').find('.prevBtn').show();
                }
                if (current >= total) {
                    $('#formWizard').find('.nextBtn').hide();
                    $('#formWizard').find('.submitBtn').show();
                } else {
                    $('#formWizard').find('.nextBtn').show();
                    $('#formWizard').find('.submitBtn').hide();
                }
            },
            onPrevious: function (tab, navigation, index) {
                alert_success.hide();
                alert_error.hide();
                var total = navigation.find('li').length;
                var current = index + 1;
                $('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total);
                jQuery('li', $('#formWizard')).removeClass("done");
                var li_list = navigation.find('li');
                for (var i = 0; i < index; i++) {
                    jQuery(li_list[i]).addClass("done");
                }
                if (current == 1) {
                    $('#formWizard').find('.prevBtn').hide();
                } else {
                    $('#formWizard').find('.prevBtn').show();
                }
                if (current >= total) {
                    $('#formWizard').find('.nextBtn').hide();
                    $('#formWizard').find('.submitBtn').show();
                } else {
                    $('#formWizard').find('.nextBtn').show();
                    $('#formWizard').find('.submitBtn').hide();
                }
            },
            onTabClick: function (tab, navigation, index) {
                bootbox.alert('On Tab click is disabled');
                return false;
            },
            onTabShow: function (tab, navigation, index) {
                var total = navigation.find('li').length;
                var current = index + 1;
                var $percent = (current / total) * 100;
                $('#formWizard').find('.progress-bar').css({
                    width: $percent + '%'
                });
            }
        });

        $('#formWizard').find('.prevBtn').hide();
};

$(document).ready(function() {
    FormWizard();
});
于 2014-02-27T23:54:33.413 回答
2

Tomanow 的回答帮助了该解决方案，因为我能够排除我的设置是问题所在 - 谢谢。

最终解决方案与插件脚本本身有关。在较早的工作页面中，我使用了一个可以正常工作的缩小版本。在开发此页面时，我使用了完整版。

我用缩小版替换了这里的插件，它又能正常工作，恢复到完整的脚本，但它失败了。所以在某个地方我的图书馆变得腐败了。

已下载最新版本，现在一切正常。

当基础知识失败时真是令人沮丧

于 2014-02-28T10:22:59.677 回答
0

问题出在引导版本上。将您的引导 javascript 版本降级到 2.3.2 以使其正常工作。

您可以检查[已解决] Bootstrap Wizard Next 按钮不起作用的问题

于 2015-06-22T07:24:50.643 回答