Question

首先，让我解释一下。我有一个页面来监控我的用户。在这个页面中，我可以看到我的用户在桌面上的所有请求，我也可以看到请求的总数是在服务器中。我的问题是，如何在新请求到来时发出通知。我想发一个通知，比如大窗口弹出窗口说“新请求来了”和将播放的一种音乐音调。

这是我的代码：主页

<!-- start: Header -->


<div class="container-fluid-full">
    <div class="row-fluid">
        <noscript>
        <div class="alert alert-block span12">
            <h4 class="alert-heading">Warning!</h4>
            <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
        </div>
        </noscript>

        <!-- start: Content -->


        <!--First indicator-->
        <marquee>Belum Diterima: <span id="request_belum_terima"><?php
                if ($request_belum_terima > 0) {
                    echo $request_belum_terima;
                } else {
                    echo "0 ";
                };
                ?></span> buah Request</marquee>

        <div class="box-header">
            <h2><i class="halflings-icon align-justify"></i><span class="break"></span>Penerimaan Request</h2>
            <div class="box-icon">
                <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
            </div>
        </div>

        <!--Table one-->
        <div class="box-content" id="things_table">
            <?php $this->load->view('view_monitoring_belum_terima'); ?>
        </div>


        <!--Second indicator-->
        <marquee>Belum Selesai: <span><?php
                if ($request_sudah_terima > 0) {
                    echo $request_sudah_terima;
                } else {
                    echo '0 ';
                }
                ?></span> Request</marquee>

        <div class="box-header">
            <h2><i class="halflings-icon align-justify"></i><span class="break"></span>Outstanding Request</h2>
            <div class="box-icon">
                <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
            </div>
        </div>


        <!--Table two-->
        <div class="box-content" id="things_table2">
            <?php $this->load->view('view_monitoring_belum_selesai'); ?>
        </div>
    </div><!--/.fluid-container-->
</div><!--/row-->

<?php $this->load->view('view_monitoring_modal') ?>

<div class="clearfix"></div>


<!-- start: JavaScript-->
<?php $this->load->view('/include/js.html'); ?>
<!-- end: JavaScript-->
<?php $this->load->view('view_monitoring_js'); ?>

我使用codeigniter和一些jquery来开发我的应用程序。所以，我逐一解决。首先，我使用第一个选框的指示器。如果可以看到，span标记上有一个ID的jquery。例如，First指标的值为1.因此，我使用ajax从数据库中汇集数据并使用旧值进行检查; 这是代码：

控制器

public function hitungRequestBelumTerima() {
    $row = $this->model_request->hitungRequestBelumTerima();
    echo json_encode($row);
}

模型

public function hitungRequestBelumTerima() {

    $this->db->select('*');
    $this->db->where('is_approved', 1);
    $this->db->where('by_who is not null');
    $this->db->where('it_person is null');

    $query = $this->db->get('tbl_requestfix');

    if ($query->num_rows() > 0) {
        return $query->num_rows();
    }

    return NULL;
}

之后，我写了一个jquery的代码来自动刷新指标，如下所示：

function refresh() {
    var ini;
    var requestMasuk = $('#request_belum_terima').text();

    setTimeout(function() {

        $.ajax({
            url: '<?php echo base_url() . 'control_closing/hitungRequestBelumTerima/' ?>',
            type: 'POST',
            dataType: 'json',
            success: function(obj) {
                if (obj > requestMasuk) {
                    ini = obj;
                    $('#request_belum_terima').text(obj);
                    alert("New request coming");
                }

            }
        }).always(function() {
            $('#request_belum_terima').text(ini);
        }).done(function() {
            $('#request_belum_terima').text(ini);

        });

        $('things_table2').fadeOut('slow').load('<?php ?>').fadeIn('slow');
        refresh();
    }, 20000);
}




$(document).ready(function() {

    refresh();
}

它努力刷新，但我不知道，为什么警报会弹出两次。所以，情况是：一个新的请求，但两个警报通知在一个间隔弹出。因此，在前10分钟，警报正在提高。在20分钟内，警报仍在进行中。但是在30分钟内，警报没有提高。为什么警报会提高两次？

Answer 1

使用setInterval而不是setTimeout。这是你的ajax函数（ajax未测试，正如你所说的那样）

function refresh() {
    var ini;
    var requestMasuk = $('#request_belum_terima').text();
    $.ajax({
        url: '<?php echo base_url() . 'control_closing/hitungRequestBelumTerima/' ?>',
        type: 'POST',
        dataType: 'json',
        success: function(obj) {
            if (obj > requestMasuk) {
                ini = obj;
                $('#request_belum_terima').text(obj);
                alert("New request coming");
            }

        }
    }).always(function() {
        $('#request_belum_terima').text(ini);
    }).done(function() {
        $('#request_belum_terima').text(ini);

    });

    $('things_table2').fadeOut('slow').load('<?php ?>').fadeIn('slow');
}




$(document).ready(function() {

 setInterval(function () {
    refresh();
 }, 20000);

}

对于操纵通知，Ajax setInterval执行两次

1 个答案: