21

I am developing an application which requires that user must be notified about some background events i.e. invitation from other user, reminder time out etc.

Whenever the event occurs the controller will be notified, and a small window should be displayed to the user.

How should I proceed to achieve this. Which technology / tool will help me. I am using jQuery, JSF 2.0 and Spring 3.0.

Amit
  • 13,134
  • 17
  • 77
  • 148

4 Answers4

28

this will give a notification similar to the stackoverflow

jQuery

$("#notification").fadeIn("slow").append('your message');
$(".dismiss").click(function(){
       $("#notification").fadeOut("slow");
});

HTML

<div id="notification" style="display: none;">
  <span class="dismiss"><a title="dismiss this notification">x</a></span>
</div>

CSS

#notification {
    position:fixed;
    top:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:normal;
    font-size:14px;
    font-weight:bold;
    color:white;
    background-color:#FF7800;
    padding:5px;
}
#notification span.dismiss {
    border:2px solid #FFF;
    padding:0 5px;
    cursor:pointer;
    float:right;
    margin-right:10px;
}
#notification a {
    color:white;
    text-decoration:none;
    font-weight:bold
}

Also take a look at mplungjan's answer on how to listen to server updates and message load

Community
  • 1
  • 1
Anupam
  • 7,966
  • 3
  • 41
  • 63
  • @ mplungjan thats great, but now i notice, the OP has asked for server-side help also – Anupam Jun 28 '11 at 11:09
  • so the script needs to poll the server. No biggie. setInterval and $.get() – mplungjan Jun 28 '11 at 11:37
  • yes i'll update my answer. By the way i was wondering is there any way we can implement this without using setInterval(), i mean event triggerd by some other logic? – Anupam Jun 28 '11 at 11:42
  • [Long poll](http://en.wikipedia.org/wiki/Push_technology#Long_polling) or [Comet](http://en.wikipedia.org/wiki/Comet_%28programming%29) – mplungjan Jun 28 '11 at 12:40
2

HTML:

<input type="button" id="pop" value="Submit"/>
<div id="popup">
  <div id="topbar"> TITLE..</div>
  <div id="content">Here is you content...</div>
  <input type="button" id="ok" value="OK"/>
</div>

CSS:

#popup { background:#ccc; -moz-border-radius: 10px; width:300px; height: 200px; padding: 5px; position: absolute; left: 50%; margin-left: -150px; z-index: 500; display:none }
#topbar { background:#ddd; -moz-border-radius: 10px; padding:5px; height:20px; line-height:20px }
#content { padding:5px; -moz-border-radius: 10px; text-align:center }
#ok { position: absolute; left: 140px; top: 180px }

JQUERY:

$(function(){
    $('#pop').click(function(){
        $('#popup').fadeIn().css('top',$(document).height()/2);
    });
    $('#ok').click(function(){
        $('#popup').fadeOut();
    });
});
mplungjan
  • 169,008
  • 28
  • 173
  • 236
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
  • 1
    Fixed the css ID popup - added a [fiddle](http://jsfiddle.net/mplungjan/mmANr/) subtracting the popup height is probably also a good idea – mplungjan Jun 28 '11 at 11:00
2

Using code from @Anu's suggestion - my fiddle, you can simply add a poll

$(document).ready(function() {
  $(".dismiss").click(function(){$("#notification").fadeOut("slow");});

  setInterval(function() {
    $.get("ping.jsp?userid=<%= userID %>",function(message) {
      if (message) $("#notification").fadeIn("slow").html(message);
    });
   ,10000);
})

the message could include a timestamp to see if you had notified earlier instead of sending an empty message if no notificati9on is needed

Alternatives: Long poll or Comet

mplungjan
  • 169,008
  • 28
  • 173
  • 236
1

Jquery ui dialog is what you are looking for. It will come in handy for you. Although there are lots of other plugin available. This is the simplest..

mplungjan
  • 169,008
  • 28
  • 173
  • 236
Abdul Kader
  • 5,781
  • 4
  • 22
  • 40