Блог

Главная - Вопросы по программированию - jQuery AJAX div reload увеличивает размер моего div после каждого интервала обновления

jQuery AJAX div reload увеличивает размер моего div после каждого интервала обновления

#javascript #php #jquery #ajax #laravel

#javascript #php #jquery #ajax #laravel

Вопрос:

Я делаю проект на laravel voyager, и на одной странице я хочу перезагрузить данные из базы данных без обновления страницы вручную, поэтому я использовал jQuery / AJAX, перезагрузка работает, но при каждом интервале перезагрузки он изменяет размер моего div и перемещает навигацию и боковую панель, которые находятся за пределами div, которыйЯ обновляю. Кто-нибудь может помочь?

Я думал, что это, возможно, из-за версии jQuery, но я пробовал с несколькими версиями и все тот же результат.

Страница (blade.php ):

 @extends('voyager::master')
@section('page_title', 'ACD Status')
@section('page_header')
<h1 class="page-title">
    <i class="voyager-phone"></i>
    ACD Status
</h1>
@stop
@section('content')
<div class="page-content edit-add container-fluid" id=>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-bordered">
                <div id="tables">
                    <div id="reload">
                        --Data Here--
                    </div>  
                </div>
                <script language="javascript" type="text/javascript">
                    var timeout = setTimeout(reloadStatus, 5000);
                    var i=0;
                    function reloadStatus(){
                        $('#tables').load('/admin/acd-status #reload',function(){
                            $(this).unwrap();
                            timeout = setTimeout(reloadStatus, 5000);
                        });
                        console.log(i  );
                    }
                </script>
            </div>
        </div>
    </div>
</div>
@stop

Любая помощь приветствуется.
Изображения:
перед

после

Комментарии:

1. что вы пытаетесь загрузить? что возвращается из ‘/ admin / acd-status #reload’? можете ли вы добавить html, возвращенный в этот пост?

2. /admin/acd-status — это маршрут, который возвращает эту страницу

3. Каждый раз, когда вы unwrap() это делаете, вы перемещаете его вверх по дереву dom, удаляя его родительский элемент. Это не имеет смысла

4. Вот и все, я просто удаляю unwrap и вуаля. Спасибо @charlietfl

Ответ №1:

Удален $this.unwrap() 

 @extends('voyager::master')
@section('page_title', 'ACD Status')
@section('page_header')
<h1 class="page-title">
    <i class="voyager-phone"></i>
    ACD Status
</h1>
@stop
@section('content')
<div class="page-content edit-add container-fluid" id=>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-bordered">
                <div id="tables">
                    <div id="reload">
                        --Data Here--
                    </div>  
                </div>
                <script language="javascript" type="text/javascript">
                    var timeout = setTimeout(reloadStatus, 5000);
                    var i=0;
                    function reloadStatus(){
                        $('#tables').load('/admin/acd-status #reload',function(){
                            timeout = setTimeout(reloadStatus, 5000);
                        });
                        console.log(i  );
                    }
                </script>
            </div>
        </div>
    </div>
</div>
@stop