javascript - 如何在不影响页面内容的情况下刷新页面

标签 javascript php jquery

<分区>

我正在使用通知,如果我添加新记录,菜单中会出现通知。

这里通知工作正常,但问题是如果我刷新页面然后只有菜单通知可见,如果我添加新记录我如何立即显示通知

现在我的想法是在不干扰页面内容的情况下刷新整个页面,行得通吗?

<?php
ini_set("display_errors",0);
$query="SELECT count(*) as count FROM patients AS p,users AS u WHERE p.status='a' AND p.confirm_status='p' AND p.users_id_user=u.id_user";
$resultPatients=$db->select($query);
$pendingAppointments=0;
if($resultPatients && count($resultPatients)>0)
{
    $pendingAppointments=$resultPatients[0]['count'];
}
$query="SELECT count(*) as count FROM query WHERE shown_status='n'"; 
$resultQueries=$db->select($query);
$pendingQueries=0;
if($resultQueries && count($resultQueries)>0)
{
    $pendingQueries=$resultQueries[0]['count'];
}
$query="SELECT count(*) as count FROM feedback WHERE shown_status='n'";
$resultFeedbacks=$db->select($query);
$pendingFeedbacks=0;
if($resultFeedbacks && count($resultFeedbacks)>0)
{
    $pendingFeedbacks=$resultFeedbacks[0]['count'];
}

$query="SELECT count(*) as count FROM register WHERE shown_status='n'";
$resultRegisters=$db->select($query);
$pendingRegisters=0;
if($resultRegisters && count($resultRegisters)>0)
{
    $pendingRegisters=$resultRegisters[0]['count'];
}

$query="SELECT count(*) as count FROM unregister WHERE shown_status='n'";
$resultunRegisters=$db->select($query);
$pendingunRegisters=0;
if($resultunRegisters && count($resultunRegisters)>0)
{
    $pendingunRegisters=$resultunRegisters[0]['count'];
}


?> 

<div class="mainNav">
        <div class="user">
            <a title="" href="index.php" class="leftUserDrop"><img src="images/icare.png" height="100" width="100" alt="" /><!--span><strong>3</strong></span--></a>
            <!--ul class="leftUser">
                <li><a href="#" title="" class="sProfile">My profile</a></li>
                <li><a href="#" title="" class="sMessages">Messages</a></li>
                <li><a href="#" title="" class="sSettings">Settings</a></li>
                <li><a href="#" title="" class="sLogout">Logout</a></li>
            </ul-->
        </div>

        <!-- Responsive nav -->
        <div class="altNav">
            <div class="userSearch">
                <form action="">
                    <input type="text" placeholder="search..." name="userSearch" />
                    <input type="submit" value="" />
                </form>
            </div>

            <!-- User nav -->
            <ul class="userNav">
                <li><a href="#" title="" class="profile"></a></li>
                <li><a href="#" title="" class="messages"></a></li>
                <li><a href="#" title="" class="settings"></a></li>
                <li><a href="#" title="" class="logout"></a></li>
            </ul>
        </div>

        <!-- Main nav -->

        <ul class="nav">
            <li><a href="index.php" title="" <?php if($_SESSION['menu']=='index') { ?> class="active" <?php } ?> ><img src="images/icons/mainnav/dashboard.png" height="30" width="30" alt="" /><span>Dashboard</span></a></li>

            <?php

            $totalcount=$pendingQueries+$pendingRegisters;
            ?>

            <li><a href="users.php" title="" <?php if($_SESSION['menu']=='user') { ?> class="active" <?php } ?> ><img src="images/icons/mainnav/ui.png" height="30" width="30" alt="" /><span>Users</span><span class="requestSpan" ><?php if($totalcount>0) {?><strong id="queryCount"><?php echo $totalcount?></strong><?php }?></span></a></li>

            <li><a href="doctors.php" title="" <?php if($_SESSION['menu']=='doctor') { ?> class="active" <?php } ?> ><img src="images/icons/mainnav/doctors.png" height="30" width="30" alt="" /><span>Doctors</span></span></a></li>


            <?php

            $totalcount2=$pendingAppointments+$pendingunRegisters;
            ?>




            <li><a href="appointments.php" title="" <?php if($_SESSION['menu']=='patient') { ?> class="active" <?php } ?> ><img src="images/icons/mainnav/appointments.png" height="30" width="30" alt="" /><span>Appointments</span><span class="requestSpan" id="queryCount1"><?php if($totalcount2>0) {?><strong id="queryCount1"><?php echo $totalcount2?></strong><?php }?></span></a></li>

            <li><a href="feedbacks.php" title="" <?php if($_SESSION['menu']=='feedback') { ?> class="active" <?php } ?> ><img src="images/icons/mainnav/forms.png" height="30" width="30" alt="" /><span>Feedbacks</span><span class="requestSpan" id="mainFeedbackCount"><?php if($pendingFeedbacks>0) {?><strong id="feedbackCount"><?php echo $pendingFeedbacks?></strong><?php }?></span></a></li>

            <li><a href="offers.php" title="" <?php if($_SESSION['menu']=='offer') { ?> class="active" <?php } ?> ><img src="images/icons/mainnav/offers.png" height="30" width="30" alt="" /><span>Offers</span></a></li>

            <!--li><a href="slots.php" title="" <?php if($_SESSION['menu']=='slot') { ?> class="active" <?php } ?> ><img src="images/icons/mainnav/about.png" height="30" width="30" alt="" /><span>Info</span></a></li-->
            <li><a href="photos.php" title="" <?php if($_SESSION['menu']=='photo') { ?> class="active" <?php } ?> ><img src="images/icons/mainnav/upload.png" height="30" width="30" alt="" /><span>Photos</span></a></li>
             <li><a href="services.php" title="" <?php if($_SESSION['menu']=='services') { ?> class="active" <?php } ?> ><img src="images/icons/mainnav/services.png" height="30" width="30" alt="" /><span>Services</span></a></li>


        </ul>
        </ul>
    </div>






    <div id="sound" style="display: none"></div>
    <script type="text/javascript">
        function playSound(filename){   
                document.getElementById("sound").innerHTML='<audio autoplay="autoplay"><source src="' + filename + '.mp3" type="audio/mpeg" /><source src="' + filename + '.ogg" type="audio/ogg" /><embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3" /></audio>';
            }
         function getNotification()
         {
             var request=$.ajax({
                url: "getNotificationCounts.php",
                dataType: "json",
                async: false
              });
              request.done(function(response){
                  var queryCount=$('#queryCount').html();
                  var queryCount1=$('#queryCount1').html();
                  var appointmentCount=$('#appointmentCount').html();
                  var feedbackCount=$('#feedbackCount').html();
                  var status=false;
                  if(response.queries>0)
                  {
                      if(!queryCount)
                      {
                          status=true;
                          $('#mainQueryCount').html('<strong id="queryCount"></strong>');
                      }
                      if(queryCount!=''&&response.queries>parseInt(queryCount))
                          status=true;
                      $('#queryCount').html(response.queries);
                  }

                  if(response.unregister>0)
                  {
                      if(!queryCount1)
                      {
                          status=true;
                          $('#mainQueryCount1').html('<strong id="queryCount1"></strong>');
                      }
                      if(queryCount1!=''&&response.queries1>parseInt(queryCount1))
                          status=true;
                      $('#queryCount1').html(response.unregister);
                  }


                  if(response.appointments>0)
                  {
                      if(!appointmentCount)
                      {
                          status=true;
                          $('#mainAppointmentCount').html('<strong id="appointmentCount"></strong>');
                      }
                      if(appointmentCount!=''&&response.appointments>parseInt(appointmentCount))
                          status=true;
                      $('#appointmentCount').html(response.appointments);
                  }
                  if(response.feedbacks>0)
                  {
                      if(!feedbackCount)
                      {
                          status=true;
                          $('#mainFeedbackCount').html('<strong id="feedbackCount"></strong>');
                      }
                      if(feedbackCount!=''&&response.feedbacks>parseInt(feedbackCount))
                          status=true;
                      $('#feedbackCount').html(response.feedbacks);
                  }
                  if(status)
                      playSound('bing');
              });
         }
         setInterval(function(){getNotification();},30000);
    </script>

最佳答案

使用ajax获取通知记录,调用setInterval函数,每隔5秒左右调用ajax函数获取记录,无需以毫秒为单位刷新整个页面time interval 你可以给你想要的任何时间间隔

setInterval(function(){
    get_latest_notification() // this will run after every 5 seconds
}, 5000);

关于javascript - 如何在不影响页面内容的情况下刷新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29789715/

相关文章:

javascript - 从 $http GET 服务返回函数值

javascript - 在这些代码中,如何使用执行上下文解释输出结果?

php - 检查 foreach 循环中的下一个对象中是否存在值

javascript - 如何使用 javascript/jquery 检测最后一个或第一个列表项是否显示在其容器中

javascript - 如何让一个嵌入式函数运行多次

javascript - 可以移动滚动条位置吗?

php - Android - 将sqlite数据和照片上传到服务器

php - 在 while 循环中更改最后两行的类

javascript - 重构 jQuery 以使用 $(this) 并从另一个元素添加/删除类

javascript - 如何让页面在显示前运行所有的js?这用于 pdf 应用程序的屏幕截图,无用户交互