Bootstrap Alert仅显示一次

时间:2015-03-22 09:40:14

标签: javascript jquery html ajax twitter-bootstrap

我有以下问题:我使用Bootstrap创建了一些警报。最初,这些是隐藏的。当给出评级时(使用raty),发送Ajax请求。成功返回后,将显示警报并启动计时器。当计时器用完时,警报消失。我100%确定我的Ajax请求是成功的。

这有两个问题。

  • 首先,当警报消失时,它会在页面上留下一个空白区域。
  • 其次,当给出另一个评级时,会再次触发Ajax请求,但不再显示警报。

如何解决这些问题?

这是我的代码:

HTML:

<div id='rateSuccess' class='alert alert-success alert-dismissable fade in' role='alert' hidden>
    <button class='close' type='button' data-dismiss='alert' aria-label='Close'>
         <span aria-hidden='true'>&times;</span>
    </button>
    <strong>Success!</strong> Your rating is saved!
</div>

<div id='rateError' class='alert alert-danger alert-dismissable fade in' role='alert' hidden>
    <button class='close' type='button' data-dismiss='alert' aria-label='Close'>
         <span aria-hidden='true'>&times;</span>
    </button>
    <strong>Error!</strong> You must be logged in to give a rating!
</div>

JavaScript的:

$(document).ready( function() {

    $('#rating').raty({
        path: '../images',
        click: function(score, evnt) {
            $.ajax({
                type: 'POST',
                url: '/publication/rate/' + pubID,
                data: {'score': score},
                success: function(data, status, jqXHR) {
                    var success = data.success;
                    if (success) {
                        $('#rateSuccess').toggle();
                        startTimeout('#rateSuccess');
                    } else {
                        var type = data.type;
                        if (type === 'server') {
                            $('#serverAlert').toggle();
                            startTimeout('#serverAlert');
                        } else if (type === 'loggedin') {
                            $('#rateError').toggle();
                            startTimeout('#rateError');
                        }
                    }
                }
            });
        }
    );

    function startTimeout(id) {
        window.setTimeout(function() {
            $(id).fadeTo(500, 0).slideUp(500, function(){
                $(id).toggle(); 
            });
        }, 5000);
    }
});

JSFiddle:http://jsfiddle.net/yqb1y6k1/

1 个答案:

答案 0 :(得分:2)

从超时中移除$(id).toggle();(因为警告已被.slideUp()隐藏),并在AJAX 1 / {{1}内将元素的不透明度设置为success回调:

error

$('#rateSuccess').css('opacity', 1).slideDown(); 设置元素的不透明度,而.fadeTo()将CSS设置为.slideUp()

JSFiddle