页面在ajax重新加载时上下波动

时间:2018-12-21 16:59:57

标签: jquery css ajax laravel

每当我的Ajax在后台重新加载页面并将新获取的内容重新固定到它的先前位置时,我的页面就会不断地上下移动。请我如何停止这个。 这是我的Ajax代码

function reloadComment(){
        var url =  window.location.href;
        $.get(url,{},function (data) {
            dataObj = $(data);
            var data = dataObj.find('#allMessages').html();
            $("#contentMessage").html(data).fadeIn(0);
        });
   }
   setInterval(reloadComment,1000);

这是HTML

<div class="card mb-4">
    <div class="card-header">
        <h6 class="mb-0">Trips&#39; Questions And Answers</h6>
    </div>
    <div id="username" class="d-none">{{auth('web')->user()->username}}</div>
    <span id="avatar" class="d-none">{{auth('web')->user()->avatar()}}</span>
    <div class="card-body">
**Point to place reloaded data**
        <div id="contentMessage" style="">
           @if($comments->count()>0)
                @include('Users.templates.message')
           @else
                <h2 class="text-center text-danger">No Comments Yet!!</h2>
           @endif
        </div>
        @if(auth('web')->check())
            <div class="row">
                <div class="col">
                    <form id="formComment" action="{{route('comments',['trip'=>$trip->id])}}" method="post">
                        @csrf
                        <textarea name="comment" class="message" style="width:100%;border:groove 4px;color:black;height:130px;"></textarea>
                        <span class="messageStatus"></span>
                        @if($errors->has('comment'))
                            <small class="text-center text-capitalize text-danger">{{$errors->first('comment')}}</small>
                        @endif
                        <button class="btn btn-primary mt-2 sendComment" token="{{csrf_token()}}" type="submit" style="float:right;" url="{{route('comments',['trip'=>$trip->id])}}"><span id="btn-text">Send</span>
                            <i class="fa fa-send-o icons"></i>
                        </button>
                    </form>
                </div>
            </div>
        @endif
    </div>
</div>

0 个答案:

没有答案