Очистить автомат c Setinterval, чтобы открыть модальный - PullRequest
Новая
       9

Очистить автомат c Setinterval, чтобы открыть модальный

0 голосов
/ 05 февраля 2020

У меня есть часть обновления списка в моем php, где ajax обновит список. Список генерируется с помощью sql запросов и через некоторое время l oop. Таким образом, он создает количество номеров n на основе значений базы данных. Теперь у меня есть кнопка в каждом списке, которая открывает модальное поле.

Обновление выполняется с помощью функции установки интервала ниже 

var int = startinterval();

function startinterval() {
  interval = setInterval(fetch_list, 1000);
  return interval;
}

function fetch_list() {
  var action = "fetch_data";
  $.ajax({
    url: "list.php",
    method: "POST",
    data: {
      action: action
    },
    success: function(data) {
      $('.list').html(data);
    }
  })
}

My Html, где данные обновляются до класс списка 

<div class="col-lg-12 list" style="overflow-y: auto;height: 400px;">

Теперь моя проблема - когда я нажимаю кнопку в списке (как упоминалось ранее), которая обычно открывает модальное поле. Из-за setInterval, постоянно обновляющего список каждый раз c, модал при открытии исчезает и скрывается.

Так что я пытаюсь, когда я нажимаю кнопку, чтобы открыть модал, он должен остановить setinterval функция. Setinterval должен возобновиться после того, как я нажму кнопку отмены внутри модала.

Я пробовал много способов очистить interinter (), но безуспешно. Так что ожидаю чьей-либо помощи для меня, чтобы привести в движение колеса.

Заранее спасибо.

ОБНОВЛЕНИЕ: мой список будет выглядеть как на скриншоте ниже. sample list

Мой список. php

if($_POST["action"] == "fetch_data")
{
    echo fetch_list($connect);
}


function fetch_list($connect)
{
    if(!$_SESSION['id']){
        $output = '<ul class="list-unstyled"><h4>Please Select a Programme</h4></ul>';
        return $output;
    }else{
    $query = "
    SELECT * FROM list_programme
    WHERE pid = '".$_SESSION['id']."' 
    ORDER BY pid ASC
    ";

    $statement = $connect->prepare($query);

    $statement->execute();

    $result = $statement->fetchAll();

    $output = '<ul class="list-unstyled">';
    foreach($result as $row)
    {
        if($row["user"] == $_SESSION["uid"])
        {

            if($row["pstatus"] == '2')
            {
                $tickstatus = 'color:white';
                $pcontrol = 'bg-success';
                $pname = $row["pname"];
                $border =   'border-color:#999;';
                $pid        = $row['pid'];
                $notification = 'incomplete';
            }
            else
            {
                $pname = $row["pname"];
                $pid        = $row['pid'];
                $notification = 'complete';
            }
        }
        else
        {

        }

        $output .= '

    <div class="x_panel">
                    <button class="btn btn-round button-pcontrol '.$pcontrol.'" id="'.$pid.'" value="'.mb_strimwidth($pname, 0, 21, "...").'" data-notification="'.$notification.'" onClick="markcheck(this.id,this.value,this.dataset.notification)" style="'.$border.'"><i class="material-icons" title="Mark Completed" style="'.$tickstatus.'">check</i></button><span class="pname">'.$pname.'</span>
                    <span class="pcontrolbuttons">
                        <button class="btn btn-round button-pcontrol" id="programme" onClick="stopinterval()" data-id="'.$pid.'" data-toggle="modal" data-target="#programme'.$pid.'"><i class="material-icons" title="Assign users">person_add</i></button>
                        <button class="btn btn-round button-taskcontrol" data-id="'.$pid.'" data-value="'.mb_strimwidth($pname, 0, 21, "...").'" onClick="deleteprgm(this.dataset.id,this.dataset.value)"><i class="material-icons" title="Delete Task">delete</i></button>
                    </span>
                </div>

                <!--Modal -->
                <div id="programme'.$id.'" class="modal custom-modal fade" role="dialog">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title text-center">Add to this programme</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                Some Input elements, Drop downs, etc.,
                                </div>

                                <div class="submit-section">
                                    <button type="button" class="btn btn-success submit-btn" id="addnusers"><i class="glyphicon glyphicon-plus"></i> Add Users</button>
                                    <button type="button" class="btn btn-primary submit-btn" id="closeassignee" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /Modal -->';

    }
    $output .= '</ul>';
    return $output;
}
}

Ответы [ 2 ]

0 голосов
/ 08 февраля 2020

После поиска многих ресурсов мне не повезло исправить мои проблемы с SetInterval.

Поэтому вместо этого я изменил свой код для использования функции setTimeout. И главный недостаток заключается в том, что это не будет делать обновления в реальном времени, но после нажатия какой-либо кнопки для изменения содержимого, ajax успеха вызовет функцию setTimeout, и мой список будет обновлен. Таким образом, на данный момент цель достигнута.

Спасибо за ответ

0 голосов
/ 05 февраля 2020

То, что я пытаюсь сделать, это то, что когда я нажимаю кнопку, чтобы открыть модал, она должна остановить функцию setinterval.

Вы всегда должны останавливать выполнение функций, иначе это будет вызывайте AJAX один раз в секунду и изменяйте содержимое модала. 

document.getElementById('#button').addEventListener('click', function(event) {
    event.preventDefault();
    clearInterval(int);
    // open modal
});

Сет-интервал должен возобновиться после того, как я нажму кнопку отмены внутри модала. 

document.getElementById('#cancel').addEventListener('click', function(event) {
    event.preventDefault();
    startinterval();
});
...