how to build jquery messages notification with php and mysq

1<script>
2
3$(document).ready(function(){
4
5// updating the view with notifications using ajax
6
7function load_unseen_notification(view = '')
8
9{
10
11 $.ajax({
12
13  url:"fetch.php",
14  method:"POST",
15  data:{view:view},
16  dataType:"json",
17  success:function(data)
18
19  {
20
21   $('.dropdown-menu').html(data.notification);
22
23   if(data.unseen_notification > 0)
24   {
25    $('.count').html(data.unseen_notification);
26   }
27
28  }
29
30 });
31
32}
33
34load_unseen_notification();
35
36// submit form and get new records
37
38$('#comment_form').on('submit', function(event){
39 event.preventDefault();
40
41 if($('#subject').val() != '' && $('#comment').val() != '')
42
43 {
44
45  var form_data = $(this).serialize();
46
47  $.ajax({
48
49   url:"insert.php",
50   method:"POST",
51   data:form_data,
52   success:function(data)
53
54   {
55
56    $('#comment_form')[0].reset();
57    load_unseen_notification();
58
59   }
60
61  });
62
63 }
64
65 else
66
67 {
68  alert("Both Fields are Required");
69 }
70
71});
72
73// load new notifications
74
75$(document).on('click', '.dropdown-toggle', function(){
76
77 $('.count').html('');
78
79 load_unseen_notification('yes');
80
81});
82
83setInterval(function(){
84
85 load_unseen_notification();;
86
87}, 5000);
88
89});
90
91</script>

1<li class="dropdown dropdown-extended dropdown-notification dropdown-dark" id="header_notification_bar">
2
3                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
4                                    <i class="icon-bell"></i>
5                                    <span class="badge badge-success"><div id="datacount"></div></span> </span>
6                                </a>
7                                <ul class="dropdown-menu" >
8                                    <li class="external">
9                                        <h3>
10                                            <span class="bold">12 pending</span> notifications</h3>
11                                        <a href="page_user_profile_1.html">view all</a>
12                                    </li>
13                                    <li>
14                                        <ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
15                                            <li>
16                                                <a href="javascript:;">
17                                                    <span class="time">just now</span>
18                                                    <span class="details">
19                                                        <span class="label label-sm label-icon label-success">
20                                                            <i class="fa fa-plus"></i>
21                                                        </span> New user registered. </span>
22                                                </a>
23                                            </li>
24
25                                        </ul>
26                                    </li>
27                                </ul>
28                            </li>
29

1<script type="text/javascript">
2
3$(document).ready(function(){
4$("#datacount").load("select.php");
5setInterval(function(){
6$("#datacount").load('select.php')
7}, 20000);
8 });
9
10</script>
11

1<?php
2
3include('connect.php');
4
5if(isset($_POST['view'])){
6
7// $con = mysqli_connect("localhost", "root", "", "notif");
8
9if($_POST["view"] != '')
10
11{
12   $update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status=0";
13   mysqli_query($con, $update_query);
14}
15
16$query = "SELECT * FROM comments ORDER BY comment_id DESC LIMIT 5";
17$result = mysqli_query($con, $query);
18$output = '';
19
20if(mysqli_num_rows($result) > 0)
21{
22
23while($row = mysqli_fetch_array($result))
24
25{
26
27  $output .= '
28  <li>
29  <a href="#">
30  <strong>'.$row["comment_subject"].'</strong><br />
31  <small><em>'.$row["comment_text"].'</em></small>
32  </a>
33  </li>
34
35  ';
36}
37}
38
39else{
40    $output .= '<li><a href="#" class="text-bold text-italic">No Noti Found</a></li>';
41}
42
43$status_query = "SELECT * FROM comments WHERE comment_status=0";
44$result_query = mysqli_query($con, $status_query);
45$count = mysqli_num_rows($result_query);
46
47$data = array(
48   'notification' => $output,
49   'unseen_notification'  => $count
50);
51
52echo json_encode($data);
53}
54?>