Php Notifications

[Youngn]

Hi all,

 

I have just implemented a notification system where if any action is triggered on the users page they see the notification in real time on their page.

 

The problem I have is read and unread notifications. I have an idea in my mind.

 

I have a table called notifications with a column which has boolean values of 0 and 1(read/unread)

 

Now the notification icon is embedded in a <span> and my idea is that on clicking that span or icon etc the boolean field should be updated to read.

 

Is there a way of updating mysql table by just clicking the icon?

 

If so, could you kindly give me a snippet of what I should do to update this value?

 

I would update the code I have but I don't have access to the files at the moment. Please bare with me.

 

Thank you in advance.

 

Also please find attached a screenshot of the notification icon.

[ginerjm]

Question is do you want the page to stay in place or will a full refresh work for you?  One is so very simple with a submit action; the other involves using Ajax to call a new php script and handle the response from that with JS.

[phpmillion]

In short, the answer to your question is "yes, it's possible".

 

You should add onClick trigger to that icon using basic JavaScript code, and then simply post that data to PHP file (which will make all the changes you need in MySQL database) using Ajax. This way, the page will remain unchanged (I mean, it will not be reloaded), while changes in database will be performed in the background.

[Youngn]

Hi, thanks for the response.

 

Here is my code:

 

I am using codeigniter to handle this:

 

View:

<?php
                        if($notification_count):
                        ?>
                        <li class="dropdown">
                    <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                        <i class="fa fa-bell"></i>  <span class="label label-warning count" id="alert_id"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">
                        
                        <li>
                            <a href="profile.html">
                                <div>
                                    <i class="fa fa-twitter fa-fw" id="follower_id"></i> 
                                    <span class="pull-right text-muted small">12 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <!--<li>
                            <a href="grid_options.html">
                                <div>
                                    <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>-->
                        <li class="divider"></li>
                        <li>
                            <div class="text-center link-block">
                                <a href="notifications.html">
                                    <strong>See All Alerts</strong>
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>

 

JS:

$(document).ready(
  function(){
    var interval = setInterval(function() { 
      get_notifications(); 
    }, 2500)


    function get_notifications(){
       $.post(
          base_url +"user/home/ajax_get_count", 
          { notification_count : notification_count, follower_count : follower_count}, 
          function(data) {
             //if (data.status == 'ok')
             //{


              //var current_content = $("#alert_id").html();
              //var follow_content = $("#follower_id").html();
             
              if(data > 0){
                $("#alert_id").html(data);
                $("#follower_id").html(data + " <span style='font-family: Open Sans, helvetica, arial, sans-serif;'>New Follower(s)</span>");
                
            }


            else{
              $("#alert_id").html('');
            }


          }, "json"
        );
        //clearNotif();
   }


      $( "#alert_id" ).click(function() {
        console.log("click");
        $("#alert_id").html('');
        clearInterval(interval);
      });
  


   get_notifications();
});

Controller:

public function count($user_id = null)
{
$user_id = $this->session->userdata('user_id');


$data['notification_count'] = $this->Notification_model->get_notification_count($user_id);
$this->load->view('user/templates/header_view_subpage', $data); 
$this->load->view('user/notifications_view', $data);
$this->load->view('user/templates/footer_view_subpage');
}

Model

public function get_notification_count($recipient = null){
$session = $this->session->userdata('user_id');
$this->db->select('*');
$this->db->from('notifications');
$this->db->join('users', 'users.user_id = notifications.user_id');
$this->db->where(array('notifications.recipient' => $recipient));
//$this->db->count_all_results();


$query = $this->db->get(); 
//return $query->result_array();
return $query->num_rows();
}

 

 

The thing is everything works fine, I have a notification table (just a rough markup)

 

I want to be able to change the status from unread to read once a user clicks the link.

 

I know this could be done by update statement obviously but the notification icon is wrapped in a link(a href) and not a button or form.

Edited October 11, 2017 by Youngn

[ginerjm]

You STILL didn't answer my question. 

[Youngn]

It should not refresh, I want it to update real time

[ginerjm]

Thank you for the reply.  In that case - phpmillion has already laid out your solution.  It would be to use an Ajax call, which is going to require some JS to initiate a PHP script to do your update and return a response to that JS that you can then post to the screen.