Jump to content

Php Notifications


Youngn

Recommended Posts

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.

post-205630-0-61753300-1507206127_thumb.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)

post-205630-0-83465300-1507725196_thumb.png

 

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.