CODEWITHSUNDEEP
phpjqueryajaxwordpressbuddypress
air
air

Reputation: 6264

buddy press ajax new message notifiction

i am working on one buddy press theme and want to display unread messages count via ajax.

i have bellow code in function.php of my theme

<?php
function addMessageRefresh()
    {
    ?>
<script type="text/javascript">
    function getMessages(){
    jQuery('#user-messages span').text("Unread Messages: (<?php echo messages_get_unread_count(); ?>)");
     }
   setInterval("getMessages()", 10000);
</script>
    <?php
    }
add_action( 'wp_head', 'addMessageRefresh');
?>

it worked.

but its only show unread count on page load, but if user receive any message this did’t update.

the main purpose of this script is to display total number of unread messages and it should update via ajax means if user receive any message, it should show total number of unread messages without reloading page.

Thanks

Upvotes: 0

Views: 2635

Answers (3)

Steve Buzonas
Steve Buzonas

Reputation: 5710

Your issue lies within:

jQuery('#user-messages span').text("Unread Messages: (<?php echo messages_get_unread_count(); ?>)");

What is being done is when the page is being loaded PHP processes the messages_get_unread_count() function and uses that value to render the page. From there the generated JavaScript will be called at your interval but it will have a static value defined in your preprocessed markup.

You will need to have an AJAX call to a url that will return your message count.

This is the functionality to allow you to get the updated message count.

function add_message_count_js() {
    ?>
    <script type="text/javascript">
        //<![CDATA[
        var msg_count;
        function updateMessages() {
            jQuery.ajax({
                type: 'POST',
                url: '<?php echo admin_url('admin-ajax.php'); ?>',
                data: {"action": "view_message_count"},
                success: function(data) {
                    jQuery('#user-messages span').text("Unread Messages: "+data);
                }
            });
            return false;
        }
        setInterval('updateMessages()', 10000);
        //]]>
    </script>
    <?php
}
add_action('wp_head', 'add_message_count_js');

This will add the appropriate AJAX hooks.

add_action('wp_ajax_view_message_count', 'view_message_count');
add_action('wp_ajax_nopriv_view_message_count', 'view_message_count');
function view_message_count() {
    if (is_user_logged_in())
        echo messages_get_unread_count();

    die();
}

Both of these snippets should go in your functions.php file.

Upvotes: 0

hadvig
hadvig

Reputation: 1106

There are several steps, that you need to do: 1) Place element which contain unread message count. This should be adde to your template.

<div id="unread_messages"></div>

2) Add javascript code which will update your count value.You can add this to your template or you can print it from wp_head/wp_footer hooks

<script type="text/javascript">
  function update_unread_count() {
    jQuery('#unread_messages').load(
      '<?php echo admin_url('admin-ajax.php'); ?>', 
      { 'action': 'get_unread_message_count' } 
    );
  }

  jQuery(document).ready(function() {
    // update every 15 seconds, after page loaded
    setInterval('update_unread_count()', 15000); 
  });
</script>

3) Register ajax request handler. You should add this lines into your functions.php theme file

function my_get_unread_message_count() {
  echo messages_get_unread_count();
  die();
}
add_action('wp_ajax_get_unread_message_count', 'my_get_unread_message_count');

Something like that.

Upvotes: 0

lozoffoy
lozoffoy

Reputation: 11

somehow it..

function getMessages(){
    jQuery.ajax({
        url: '../url.php'
        dataType: 'html',
        success: function (data) {
        jQuery('#user-messages span').text("Unread Messages: " + data);
    }}
    )
}

../url.php code

<?php echo messages_get_unread_count(); ?>

Upvotes: 1

Related Questions