当前位置: 动力学知识库 > 问答 > 编程问答 >

jQuery JavaScript function order

问题描述:

I have a problem where the order of the JS functions / code changes the behaviour of the page.

There is a jQuery validation section, followed by a Bootstrap Wizard "onTabShow" section with a progress-bar.

In this order, the validation works as expected, but the progress-bar is empty.

If I switch the order, the progress-bar works, but there is no validation on each tab of the Bootstrap Wizard.

 <script>

$(document).ready(function() {

// WORKING

var $validator = $("#entry_form").validate({

rules: {

firstname: {

required: true

},

hole1score: {

required: true

},

hole2score: {

required: true

},

hole3score: {

required: true

},

hole4score: {

required: true

},

hole5score: {

required: true

},

hole6score: {

required: true

},

hole7score: {

required: true

},

hole8score: {

required: true

},

hole9score: {

required: true

}

},

messages: {

hcap: "A number is required"

}

});

// WORKING

$('#rootwizard').bootstrapWizard({

'tabClass': 'nav nav-pills',

'onNext': function(tab, navigation, index) {

var $valid = $("#entry_form").valid();

if(!$valid) {

$validator.focusInvalid();

return false;

}

}

});

// THIS SECTION ISNT WORKING IN THIS LOCATION...

$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {

var $total = navigation.find('li').length;

var $current = index+1;

var $percent = ($current/$total) * 100;

$('#rootwizard .progress-bar').css({width:$percent+'%'});

}});

// WORKING

$(".btn-group :input").change(function() {

$('input[name="' + $(this).parent().parent().attr('id') + '"]').val($(this).val());

});

});

</script>

I am sure it relates to the order of the code, or use of proper functions or something. In its current order, its more likely the "return false;" line in the validator section... But I am not savvy enough in JS to troubleshoot.

网友答案:

The culprit is likely that you are essentially defining the tabs a second time, with different options. The behavior of jQuery plugins on subsequent initializations is not well defined.

Some will ignore the second attempt, others will add the new options to the existing one. Some will reinitialize the plugin with only the newest options.

That being the case, you would be better served to combine them into a single initialization call.

    <script>        
    $(document).ready(function() {

        var $validator = $("#entry_form").validate({
          rules: {
            firstname: {
              required: true
            },
            hole1score: {
                required: true
            },
            hole2score: {
                required: true
            },
            hole3score: {
                required: true
            },
            hole4score: {
                required: true
            },
            hole5score: {
                required: true
            },
            hole6score: {
                required: true
            },
            hole7score: {
                required: true
            },
            hole8score: {
                required: true
            },
            hole9score: {
                required: true
            }
          },
          messages: {
            hcap: "A number is required"
          }
        });

        $('#rootwizard').bootstrapWizard({
            'tabClass': 'nav nav-pills',
            'onNext': function(tab, navigation, index) {
                var $valid = $("#entry_form").valid();
                if(!$valid) {
                    $validator.focusInvalid();
                    return false;
                }
            },
            'onTabShow': function(tab, navigation, index) {
                var $total = navigation.find('li').length;
                var $current = index+1;
                var $percent = ($current/$total) * 100;

                $('#rootwizard .progress-bar').css({width:$percent+'%'});
            }
        });

        $(".btn-group :input").change(function() {
            $('input[name="' + $(this).parent().parent().attr('id') + '"]').val($(this).val());
        }); 

    });
</script>
分享给朋友:
您可能感兴趣的文章:
随机阅读: