Notification Message using PHP and Jquery

Question

In the header of my application I have notification message icon.

For example, when a new record is inserted into the table, there must appear the notification message to admin, like this:

If I toggle the button it looks like this:

But the problem is that when I click the notification button, it shows the data, but the count of notofications does not reset to zero.

What I need is when I click the notification link, the quantity of notifications should be reset to zero.

it should look like below image

This is my code:

<!-- Messages: style can be found in dropdown.less-->
                <li class="dropdown messages-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="notify-comet">
                        <i class="fa fa-envelope-o"></i>
                        <span class="label label-success" id="not-count">
                            <?php
                                $count = Delay::find()
                                        ->where(('id') !== 0)
                                        ->orderBy('id')
                                        ->count();  
                                echo "$count";
                            ?>
                        </span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="header">You have <?php echo "$count" ?> messages</li>
                        <?php
                            $qry = Delay::find()->all();
                            foreach ($qry as $key => $value) 
                            { 
                        ?>
                            <div class="delay-notification">
                            <ul class="menu">
                                <li><a href="index.php?r=delay"><?php echo $value->claimer_name; ?> &nbsp <?php echo $value->company_name; ?></a></li>
                            </ul>
                            </div>
                        <?php  
                            $i = 1;
                            if ($i++ == 4) break;
                            }
                        ?>

                        <li class="footer"><a href="index.php?r=delay">See All Messages</a></li>
                    </ul>
                </li>

                <?php
                    }
                ?>

On click, you should call an AJAX/simply replace the inner HTML with JavaScript. — Kamall A Joshi
– Kamall A Joshi, Commented Sep 2, 2015 at 7:06

Touqeer Shafi · Accepted Answer · 2015-09-02 08:00:05Z

1

Using jQuery bind an event on .messages-menu class

jQuery(document).ready(function($){
   $('#notify-comet').on('click', function(e){
        $("#not-count").html("0");
   })
})

It will reset counter to 0 every time when you open your dropdown.

edited Sep 2, 2015 at 8:00

answered Sep 2, 2015 at 7:34

Touqeer Shafi

5,3043 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Nodemon Over a year ago

this working perfectly, but while refreshing the page or moving to another tab, again the value getting reset

Touqeer Shafi Over a year ago

are you using .message-menu some where else to ? make .message-menu unique.

Nodemon Over a year ago

am not using message-menu, am using #notify-comet, bcoz i dont have class like message-menu

Nodemon Over a year ago

use this function in <a> tag

Nodemon Over a year ago

if i use messages-menu also, am getting the same

|

Amit Guleria · Accepted Answer · 2015-09-02 07:16:26Z

0

Do one simple thing when you click on the link or on Button (which shows you the count) call the ajax function which will reset the count to zero or simple j query can do it for you by resting the value of that span .

answered Sep 2, 2015 at 7:16

Amit Guleria

2312 silver badges11 bronze badges

3 Comments

Nodemon Over a year ago

i used this code <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="notify-comet" onclick="document.getElementById('not-count').innerHTML = '0'"> this working while clicking, afterthat if i reload the page the count getting reset

Amit Guleria Over a year ago

For that you have to maintain the status. If the value is coming from DB you can take a status field in DB for that if message has been read (When you click on button make the status false that mean msg has been read ) make that false so that you can check on document load using ajax hit. Let me know more about this if this couldn't help you out .

Amit Guleria Over a year ago

Tell me on thing this message is coming from DB ?

Sukanya Suku · Accepted Answer · 2016-01-14 06:08:28Z

<?php
session_start();
include("../connect.php");
$user=$_SESSION['user'];
if(empty($user))
{
    header("location:index.php");
}
else{
$query_not="SELECT count(status) AS sum FROM `user_leave_details` where status='1' Or status='4' or status='5'";
$result=mysqli_query($bd,$query_not);
while($arr=mysqli_fetch_array($result))
{   
$sum=$arr['sum'];
}   
?>
<html>
<head>
<li class="dropdown messages-menu">
<a href="" class="dropdown-toggle"><span style="color:white"><i class='fa fa-comment-o'  title="Notification"></i></span>
<span class="badge" style="color:#FF0000">
<?php if(empty($_POST['hide']))
{ 
echo $sum;
}
else
{
echo $sum=0;
}?>
</span></a>                                 
<ul style="display: none;" class="dropdown-menu bold">
<?php
$query="SELECT * FROM user_leave_details WHERE status='1' Or status='4' or status='5'";
$sl_no=1;
$result=mysqli_query($bd,$query);
if(mysqli_num_rows($result)>0)
{                                                       while($row=mysqli_fetch_array($result))
                                                 { 
                                                 $user_id=$row['leave_id'];
                                                 $user_name=$row['user_name'];
                                                 $no_days=$row['no_leave'];
                                                 $leave_from=$row['leave_from'];
                                                 $leave_to=$row['leave_to'];
                                                 $status=$row['status'];
                                            ?>
                                         <li name='hlo'><?php echo "<a href='admin_approved.php?reg_id=$user_id' id='hide'' name='hide'>";?><?php if($status==1){echo $user_name." request permission for ".$no_days. " day/days leave from ".$leave_from ." to ".$leave_to;}else if($status==4){echo $user_name." leave reduced from ".$leave_from." to".$leave_to ;}else if($status==5){echo $user_name." cancel for the leave from ".$leave_from." to ".$leave_to;}echo " </a>"; ?> </li>
                                          <?php
                                          if(isset($_POST['hlo']))
                                            {
                                                echo $sum=0;
                                            }
                                            }

                                            }
                                        ?>

                                </ul>
                            </li> 
</head>
</html>
connect.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";$mysql_database = "";        $bd=mysqli_connect($mysql_hostname,$mysql_user,$mysql_password,$mysql_database);
?>

I have did that by using MySQL not sqli...if you post me a answer for mysql..it will be useful for me...

Collectives™ on Stack Overflow

Notification Message using PHP and Jquery

3 Answers 3

9 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related