How do I make a message box like StackOverflow's?

Question

I'm more or less aiming for the below, using the tutorial at http://roshanbh.com.np/2008/07/top-floating-message-box-using-jquery.html, however, I'd like to take it one step further.

My bar will more or less work like SO's does when you have responses to a question. The idea is that mine will display something along the lines of "The issue XYZ has just been assigned to you. View it here." And only display it until the user dismisses it or clicks the "here" link and it not display that instance of it again.

There's also the probability that more than 1 issue could be assigned to a user within the space of a few minutes, however, I don't want another message to show until the first has been dismissed.

I'm also curious as to how to go about actually making the messages appear - ideally, I'd like the Database to be queried automatically every 5 minutes for example or even (if it's possible) have a message show the instant it's assigned to a user.

For the application itself I'm using MVC, and for this particular feature I'm guessing jQuery would be the best tool for the job.

The thing I'm struggling most with however is where to begin with any of this or where to start. Could someone point me in the right direction?

Answer 1

For the "How to display a message on screen without refreshing", it can be easily done with JSON requests. For instance:

[Authorize]
public class IssuesController : Controller
{
    public ActionResult GetIssues()
    {
        return Json(getIssuesFromDatabase());
    }
}

You can return a string, or more complex objects from a Json function. Then:

<script type="text/javascript">
        function checkForIssues() {
            $.getJSON('/Issues/GetIssues/', {},
              function(data) {
                  if (data != 'NoData') {
                      $('#topBar').html(data); //put your returned data 
                      $('#topBar').show();
                  }
              });
        }

        $(document).ready(function() {
            // Run our checkForIssues() function every 60secs
            setInterval(checkForIssues, 60000);
        });
</script>

"topbar" being the id of your hidden top bar written in html =) for instance:

<div style="display:none;" id="topBar" class="issueClass" ><div>

edit: answer to your second comment

let's assume that your getIssuesFromDatabase() function returns an object that has several properties, such as: ID, Title The Json function automatically transforms this into a standard object for jquery. Then, you should put this in your javascript function:

    function checkForIssues() {
        $.getJSON('/Issues/GetIssues/', {},
          function(data) {
              if (data != 'NoData') {
                  var msg = "The issue "+ data.Title + " has been assigned to you.";
                  $('#topBar').html(msg); //put your returned data 
                  $('#topBar').show();
              }
          });
    }

Answer 2

If you are unsure with Json then don't be its this simple...

Add this into your controller

public JsonResult TopBarResult()
{
    var myName = new MyName {Name = "Richard should appear!"};
    return Json(myName);
}

have a strongly typed view data class

public class MyName
{
 public string Name { get; set; }
}

add this to your master page or partial view

<script type="text/javascript">
    function checkForIssues() {
     $.getJSON("/Home/TopBarResult", null, 
               function(data) { ListData(data); });
    }

    function ListData(data) {
     if (data.length != 0) {
      $('#topBar').show();
      $('#topBar').html(data.Name);
     }
    };


    $(document).ready(function() {
     setInterval(checkForIssues, 2000);
    });
</script>

<div style="display: none; background-color: #555;" id="topBar">
</div>

Note that Json returned is also strongly typed so you can simply use it in this way

data.Name