0

I have a web page with 2 countdown timers. Time is taken from MySQL. When each timer ends, it opens UI dialog modal div.

Also there's a link, which increases time in MySQL table and using AJAX reloads timers

When I click this link, time changes, but dialog div appears if there's was no time refresh

What I have now: page loades, counter are working. Before 60 seconds to the end appears dialog-message div, I press the link in it. The counters begin from start. But in 30 seconds appear dialog-message2 div

What I've done wrong?

Main page

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>
4

0 回答 0