smartwizard 点击提交按钮后界面被刷新

Posted 2021-02-11 hans-z

项目中用到了smartwizard，对用户的入网配置进行了分步操作

这个插件给的范例中除了提供上一步下一步之外, 还可以添加其他的按钮

我这边额外添加了两个按钮，分别是提交和关闭

点击提交按钮时，异步向后台提交数据，步骤配置代码如下：

$(‘#smartwizard‘).smartWizard({
        selected: 0,
        theme: ‘dots‘,
        cycleStep: false,
        transitionEffect:‘fade‘,
        keyNavigation: false,
        showStepURLhash: false,
        toolbarSettings: {toolbarPosition: ‘bottom‘,
            toolbarExtraButtons: [btnFinish, btnCancel]
        },
        lang : {
            next: ‘下一步‘,
            previous: ‘上一步‘
        }

    });

btnFinish和btnCancel分别对应的就是上述的[提交]和[关闭] 按钮, 按钮对应的方法如下：

var btnFinish = $(‘<input type="button" id="btnFinish"></input>‘).addClass(‘btn btn-info‘).on(‘click‘, function(){    
    var mask;
    $.ajax({
        type: "POST",
        url: ‘/xxx‘,
        data: {corpId: "123"},
        dataType: ‘json‘,
        async: false,
        cache: false,
        beforeSend: function() {
            mask = layer.load(0, {
                shade: [0.7, ‘#393D49‘]
            },
            {
                shadeClose: true
            }); //0代表加载的风格，支持0-2
        },
        success: function(data) {
            var jsonData = eval(data);
            if (jsonData.code == ‘10000‘) {
                layer.alert(‘配置成功‘, {
                    icon: 1
                });
                $(‘#reportTable‘).bootstrapTable(‘refresh‘);
            } else {
                layer.alert(jsonData.msg, {
                    icon: 2
                });
            }
            layer.close(configLayer);
            layer.close(mask);
        },
        error: function(data) {
            alert("error");
            $(‘#reportTable‘).bootstrapTable(‘refresh‘);
        }
    })
});

碰到的问题：

1. 点击提交按钮和关闭按钮后, 界面被刷新

根据https://bbs.csdn.net/topics/391852021中4楼的回答

将上面代码标红的地方修改为如下代码，问题虽好了，但是我明明有给设置value值呀.. 咋button就没名字了：最终显示效果是button有了，但是button中没有值了..

<input type="button" id="btnFinish" value="提交"></input>

解决办法是：在初始化smartWizard控件后给这两个button赋值（手动笑脸??）

我这边的分步操作的界面是放在模态框中的，当模态框打开成功后我就给两个button的value赋值

$(‘#btnFinish‘).val("提交");
$(‘#btnCancel‘).val("关闭");