Question

我有一个只包含textarea的表单，并且使用jquery ajax提交数据。如果我提交框，进度条将有效。但我的问题是我不知道如何在不刷新页面的情况下清除进度条。因为在提交第一个数据后，我需要异步添加另一个数据。我的js代码如下。请帮我找一个解决方案。

表格

<form id="form-for-freetext" class="simform no-margin" data-social="status" autocomplete="off" action="post">
    <div class="status-form-inner">
        <ol class="questions">
            <li class="current"> <span>
                                                            <label for="status-q1">What's on your mind?</label>
                                                        </span>
 <span class="successMessage"></span>

                <input id="freetext" type="text" name="freetext" class="freetext">
                <input type="hidden" id="id" value="<?php echo $customerdetails->customer_id;?>">
            </li>
        </ol>
        <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
        <input class="submit" type="submit" value="Send">
        <div class="controls">
            <div class="progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
</form>

JS

<script>
    $('#form-for-freetext').on('keypress', function (e) {
        var key = e.which;
        if(key == 13)  // the enter key code
        {
            e.preventDefault();

            var freetext       = $('#freetext').val();
            var id             = $(":hidden", this).val();
            var token          = $('input[name=_token]').val();
            var dataString     = 'freetext='+freetext+'&id='+id+'&token='+token;
            $.ajax({
                type: "post",
                url: "{!! URL::to('socialfreetext') !!}",
                data: dataString,
                success: function(data) {
                    // Progress bar begin
                    var stops = [25, 55, 85, 100];
                    $.each(stops, function(index, value){
                        setTimeout(function(){
                            $('.progress').css( "width", value + "%" ).attr('aria-valuenow', value );
                        }, index * 100);
                        //$('.progress').delay(1000).fadeOut();
                    });
                    $( ".progress" ).css( "width", "0%" ).attr( "aria-valuenow", 0);
                    // Progress bar end

                    // Response data begin
                    var date           = data.responsecusthistory.created_at.split(" ")[0];
                    var successContent = '<div class="card share col1" data-social="item"><div class="circle" data-toggle="tooltip" title="Label" data-container="body"></div><div class="card-header clearfix"><div class="user-pic"><img alt="Profile Image" width="33" height="33" data-src-retina="assets/img/profiles/avatar.jpg" data-src="assets/img/profiles/avatar.jpg" src="assets/img/profiles/avatar.jpg"></div><h5><?php echo $customerdetails->firstname ." ". $customerdetails->lastname; ?></h5><h6><span class="location semi-bold"><i class="fa fa-map-marker"></i> <?php echo $customerdetails->street .",". $customerdetails->city; ?></span></h6></div><div class="card-description"><p>'+data.responsecusthistory.freetext+'</p><div class="via">via Twitter</div></div><div class="card-footer clearfix" style="border-top: 1px solid #e1f0fd;"><div class="time">'+date+'</div><ul class="reactions"><li><a href="#">5,345 <i class="fa fa-comment-o"></i></a></li><li><a href="#">23K <i class="fa fa-heart-o"></i></a></li></ul></div></div>';
                    $(".showbox").append(successContent);
                    // Response data end

                },
                error: function(data) {
                    if( data.status === 422 ) {
                        //process validation errors here.
                        var errors = data.responseJSON;
                        errorsHtml = '<div class="alert alert-danger"><ul>';
                        $.each( errors , function( key, value ) {
                            errorsHtml += '<li>' + value[0] + '</li>';
                        });
                        errorsHtml += '</ul></div>';
                        $( '.error-message' ).html( errorsHtml );
                    }
                }
            });
            //$( ".progress" ).css( "width", "0%" ).attr( "aria-valuenow", 0);
            $('#freetext').val('');
            return false;
        }
        //window.setTimeout(function() { $(".progress").alert('close'); }, 100);
    });
</script>

Answer 1

请检查最适合您的动态example。在代码中，您需要设置以下代码：

//For reset progress bar with 0
$( ".progress" ).css( "width", "0%" ).attr( "aria-valuenow", 0);

只需将上面的代码放入其中，如果有更多帮助，请告诉我。

如何清除引导进度条

1 个答案: