jquery - Ajax + タイマー + JQuery UI ダイアログ

Question

2 つのカウントダウン タイマーを含む Web ページがあります。時間は MySQL から取得されます。各タイマーが終了すると、UI ダイアログのモーダル div が開きます。

また、MySQL テーブルの時間を増やし、AJAX を使用してタイマーをリロードするリンクもあります。

このリンクをクリックすると時間が変わりますが、時間の更新がない場合はダイアログ div が表示されます

私が今持っているもの：ページの読み込み、カウンターが機能しています。60 秒後にダイアログ メッセージ div が表示される前に、その中のリンクを押します。カウンターは最初から始まります。しかし、30 秒後に dialog-message2 div が表示されます

私が間違ったことをしましたか？

メインページ

print "<div style='float: left;' id='time'>";
    require ('time.php');
print "</div>";

time.php

<div id="timer1" style="display: block;"></div><div id="timer2" style="display: block;"></div>

<div id="dialog-message" class="modal" title="Attention!">
      <p>
      <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
      xx minutes are up. <a href="/prolong" class="prolong">Take more time</a></p>
      </div>

<div id="dialog-message2" class="modal" title="Attention!">
      <p>
      <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
      x minutes are up. <a href="/prolong" class="prolong">Take more time</a></p>
      </div>

<script type="text/javascript">
$( document ).on( "click", ".prolong", function(e) {
          e.preventDefault();
          $.ajax({
            type: "GET",
            url: "/settime.php" // Here makes time update in MySQL database
          });
          $('#time').load('/time.php');
        });

        function alerter1() {
          $("#dialog-message" ).dialog({
            open: function() { $(".ui-dialog-titlebar-close").hide(); },
            modal: true,
            buttons: {
              Ok: function() {
                $( this ).dialog( "close" );
              }
            }
          });
        }
        function alerter2() {
           $( "#dialog-message2" ).dialog({
            open: function() { $(".ui-dialog-titlebar-close").hide(); },
            modal: true,
            buttons: {
              Ok: function() {
                $( this ).dialog( "close" );
              }
            }
          });
        }

$('#timer1').addAndRunBackwardTimer({
        seconds: '60',
        timeUnitsNames: {
            h: "h",
            m: "m",
            s: "s"
        },
        onTimerStop : alerter1
    })

$('#timer2').addAndRunBackwardTimer({
        seconds: '30',
        timeUnitsNames: {
            h: "h",
            m: "s",
            s: "m"
        },
        onTimerStop : alerter2
})
</script>