Question

When you view the edit page for a case, if another user edits it and then you submit your changes, FogBugz warns you that the case has been changed and does't commit your edit. This is good to prevent some mistakes, but it would be much better if I was notified real-time when someone had made a change, while I'm viewing the case.

Answer 1

You can do this with the following BugMonkey script:

name:          Case Updated Notification
description:   Shows a notification when the case you are looking has been updated.
author:        Tyler Hicks-Wright
version:       1.0.0.2

js:

/*
If you update this, please also update http://fogbugz.stackexchange.com/questions/7973
Change Log:
   v1.0.0.3 - Rock: The Info object now waits after showing, so we need to check the latest bug event earlier
   v1.0.0.2 - Rock: Updated to work with jQuery 1.6 (strict JSON parsing)
   v1.0.0.1 - Dane: Don't try to poll on the new bug creation page.
   v1.0.0.0 - Tyler: First implementation
*/
var updateInterval = null;
var ixBugEventLatest = null;
var ourUpdate = false;
function checkForUpdates(ixBug)
{
    $.ajax({
        type: "GET",
        url: "bugData.asp",
        dataType: "text",
        cache: false,
        data: { sRequest: "bugs", sBugs: ixBug, sOutputType: "json", sActionToken: g_ActionTokens.getToken("loadBug") },
        success: function(data) {
            if (data === "") return; 
            data = eval('(' + data + ')');
            var bug = data[ixBug];
            if(!ixBugEventLatest || $('#bugevent_'+bug.ixBugEventLatest).length > 0)
            {
                ixBugEventLatest = bug.ixBugEventLatest;
            }
            else if(bug.ixBugEventLatest != ixBugEventLatest)
            {
                var link = $('div.ixBug div a').attr('href');
                if($('.ghostFontBig:visible').length == 0)
                {
                    Info.show('This case has updates. Reload');
                    $('#loadingBar').html('This case has updates. <a href="'+link+'">Reload</a>');
                    ourUpdate = true;
                }
            }

            if($('#bugevent_'+bug.ixBugEventLatest).length > 0)
            {
                ixBugEventLatest = bug.ixBugEventLatest;
                if(ourUpdate)
                {
                    Info.hide();
                    ourUpdate = false;
                }
            }
        }
    });
}
if ($('div.ixBug').length == 1)
{
    var ixBug = $('div.ixBug div a').text();
    if (ixBug.length > 0)
    {
        checkForUpdates(ixBug);
        updateInterval = setInterval(function() { checkForUpdates(ixBug); }, 10000);
    }
}

This will drop a yellow notification pane down when the case has been updated while you were looking at it. Enjoy!

Answer 2

Here are a couple additions to the script:

Up by the Project, Area, and Milestone, add a little control to disable the auto-update on that page if necessary. Sometimes I leave a case open all day for reference, and I don't need that extra little server ping every 10 seconds, especially if I have Fiddler open for some good old-fashioned web debugging.

The old version calls the API immediately at page load to get the latest event ID. This is wasteful since the data already exists in the page markup. Maybe an infinitesimal speed-up, but perhaps worth it when you think about how many bugs you might view in the course of a day.

name:         Case Updated Notification
description:  Shows a notification when the case you are looking has been updated.
author:       Tyler Hicks-Wright
version:      1.0.0.5

js:

/*
If you update this, please also update http://fogbugz.stackexchange.com/questions/8823
Change Log:
   v1.0.0.5 - Michel: Version 8.7 broke Reload link, added css.
   v1.0.0.4 - David:  Parse latest event out of form value, don't have to check the API at time 0.
   v1.0.0.3 - David:  Add control over the auto-update functionality.
   v1.0.0.2 - Rock:   Updated to work with jQuery 1.6 (strict JSON parsing).
   v1.0.0.1 - Dane:   Don't try to poll on the new bug creation page.
   v1.0.0.0 - Tyler:  First implementation.
*/
var updating = true;
var updateInterval = null;
var ixBugEventLatest = null;
var ourUpdate = false;
function checkForUpdates(ixBug)
{
  if (!updating)
    return;
  $.ajax({
    type: "GET",
    url: "bugData.asp",
    dataType: "text",
    cache: false,
    data: { sRequest: "bugs", sBugs: ixBug, sOutputType: "json",
            sActionToken: g_ActionTokens.getToken("loadBug")},
    success: function(data) {
      if (data === "") return;
      data = eval('(' + data + ')');
      var bug = data[ixBug];
      if (bug.ixBugEventLatest != ixBugEventLatest) {
        var link = $('div.ixBug div a').attr('href');
        if ($('.ghostFontBig:visible').length == 0) {
          Info.show('This case has updates. Reload');
          $('#loadingBar').html($('#loadingBar').html()
            .replace('Reload', '<a href="' + link + '">Reload</a>'));
          ourUpdate = true;
        }
      }
      if ($('#bugevent_' + bug.ixBugEventLatest).length > 0) {
        ixBugEventLatest = bug.ixBugEventLatest;
        if (ourUpdate) {
          Info.hide();
          ourUpdate = false;
        }
      }
    }
  });
}
if ($('div.ixBug').length == 1) {
  var ixBug = $('div.ixBug div a').text();
  ixBugEventLatest = $("input[name='ixBugEventLatest']").val();
  if (ixBug.length > 0) {
    updateInterval = setInterval(function() { checkForUpdates(ixBug); }, 10000);
    $('div.subtitle').append('<span class="autoUpdate"> | Auto Update: <a href="javascript:;" title="Enable/disable auto updating for this page">On</a></span>');
    $('div.subtitle a').click(function() {
      updating = !updating;
      $(this).text(updating ? 'On' : 'Off');
    });
  }
}


css:

#bugviewContainer .top .subtitle .autoUpdate { color: #68615E; }