如何禁用div以停止关闭

时间:2016-10-11 01:19:01

标签: javascript jquery html css

我每5秒钟从数据库中获取数据以获取通知。但是,通知div每5秒关闭一次,我希望div保持打开状态。我怎样才能做到这一点?

注意 ajax调用,抓取工作正常。我只希望我的通知divsetinterval触发时停止关闭。

这里是div

enter image description here

home.php

<div id="notificationsss">
          </div>



      $(document).ready(function()

        {

          loadnotif();
          setInterval( loadnotif, 5000 );

          $("#notificationsss").on("click",$("#notificationLink"), function() {
            $("#notificationContainer").fadeToggle(300);
        $("#notification_count").fadeOut("slow");

        });




        });

 function loadnotif(){

              $.ajax({
                url:'getrecords.php',
                method:'POST',
                data:{
                  "loadnotif": 1
                },
                success:function(data){
                  $('#notificationsss').html(data);
                }
              });
            }

getrecords.php

if(isset($_POST['loadnotif'])){

                    $sql = "SELECT * FROM notification";
                          $result = mysqli_query($con,$sql);
                          $count = mysqli_num_rows($result);


          $output = '      <ul id="main-menu" class="nav navbar-nav navbar-right">
                   <li class="dropdown hidden-xs">
                    <li id="notification_li">
                    <a href="#" id="notificationLink"><i class="fa fa-globe"></i>     
                        <span class="notification-counter" style="background-color:red;border-radius:3px;padding: 1px 3px;position:relative;top:-9px;right:9px;font: 8px Verdana;;">'.$count.'</span></a>

                    <div id="notificationContainer">
                    <div id="notificationTitle" style="text-align:center;background-color:#ba4f46;color:#fff;">Notifications</div>
                    <div id="notificationsBody" class="notifications">';


                       while($row = mysqli_fetch_array($result)){

           $output .='       <a href="viewlecture.php?subjdescr='.$row['subj_descr'].'" style="display:block;color:black;margin-top:10px;background-color:#f6e9e8;" id="notifa">
                          <div>
                            <img src="img/izuku.jpg" style="max-width:50px;max-height:70px;float:left;margin:0px 10px;">
                             <p style="display:inline;margin-top:20px;"><strong>'.$row['fac_code'] .'</strong> '.$row['notif_description'].'<strong><br> '.ucwords(strtolower($row['subj_descr'])).'</strong></p>
                             <p style="font-size:12px;">'.$row['date'].'</p>
                                <hr>
                          </div>

                        </a>';
                      }


       $output .='           </div>
                   <div id="notificationFooter" style="background-color:#ba4f46;"><a href="#" style="color:#fff;">See All</a></div>
                    </div>
                    </li>
            </li>


          </ul>';

          echo $output;

   }

1 个答案:

答案 0 :(得分:0)

我测试了它&amp;发现还好。你把你的ajax称为div在getrecords.php文件中吗?过程是 - 它将调用该文件&amp;从中收集信息&amp;替换首选div中的数据。

page1.php中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  $(document).ready(function()

    {

      loadnotif();
      setInterval( loadnotif, 5000 );

      $("#notificationsss").on("click",$("#notificationLink"), function() {
        $("#notificationContainer").fadeToggle(300);
    $("#notification_count").fadeOut("slow");

    });




    });

function loadnotif(){

          $.ajax({
            url:'getrecords.php',
            type:'POST',
            data:{
              "loadnotif1": 1
            },
            success:function(data){

              $('#notificationsss').html(data);
            }
          });
        }

<div id="notificationsss">

</div>

getrecords.php应该是这样的

if(isset($_POST['loadnotif'])){

                $sql = "SELECT * FROM notification";
                      $result = mysqli_query($con,$sql);
                      $count = mysqli_num_rows($result);


      $output = '      <ul id="main-menu" class="nav navbar-nav navbar-right">
               <li class="dropdown hidden-xs">
                <li id="notification_li">
                <a href="#" id="notificationLink"><i class="fa fa-globe"></i>     
                    <span class="notification-counter" style="background-color:red;border-radius:3px;padding: 1px 3px;position:relative;top:-9px;right:9px;font: 8px Verdana;;">'.$count.'</span></a>

                <div id="notificationContainer">
                <div id="notificationTitle" style="text-align:center;background-color:#ba4f46;color:#fff;">Notifications</div>
                <div id="notificationsBody" class="notifications">';


                   while($row = mysqli_fetch_array($result)){

       $output .='       <a href="viewlecture.php?subjdescr='.$row['subj_descr'].'" style="display:block;color:black;margin-top:10px;background-color:#f6e9e8;" id="notifa">
                      <div>
                        <img src="img/izuku.jpg" style="max-width:50px;max-height:70px;float:left;margin:0px 10px;">
                         <p style="display:inline;margin-top:20px;"><strong>'.$row['fac_code'] .'</strong> '.$row['notif_description'].'<strong><br> '.ucwords(strtolower($row['subj_descr'])).'</strong></p>
                         <p style="font-size:12px;">'.$row['date'].'</p>
                            <hr>
                      </div>

                    </a>';
                  }


   $output .='           </div>
               <div id="notificationFooter" style="background-color:#ba4f46;"><a href="#" style="color:#fff;">See All</a></div>
                </div>
                </li>
        </li>


      </ul>';

      echo $output;

  }