How to check table for new content, and then update browser tab title?

Question

I am working on a way to flash a browser tab when a new message appears in a table. I have the flashing of the tab part working, my only problem is that I can't seem to get it to flash when a message is received (which is the whole point of my exercise :) )

The newMessage() function is working fine, I just can't seem to get the notification() function to work.

My code is as follows:

function newMessage() 
     {
      var oldTitle = "Your Page";
      var msg = "New Message";

      var timeout = setInterval(function() 
      { 
        document.title = document.title == msg ? '' : msg;
      }, 1000);

      window.onmousemove = function() {
          clearInterval(timeout);
          document.title = oldTitle;
          window.onmousemove = null;
      };
     }

function notification()
     {
       var index = 2;

       var content = document.getElementById('refreshMessages').childNodes[index];

        var content = document.getElementById('refreshMessages').getElementByTagName("tr")[1];

        var knownContent = content.toString();

        updater.start();

        updater2.start();

        var newContent = document.getElementById('refreshMessages').childNodes[index];

        var newContent = document.getElementById('refreshMessages').getElementByTagName("tr")[1];

        if(knownContent != newContent.toString())
        {
           newMessage();
           knownContent = newContent;
        }
        else if(knownContent = newContent.toString())
          {
            alert("No need to flash title.");
          }
     }
     notification();

In the notification() function, I am trying to call the newMessage() function by comparing the strings at the appropiate cell in the table.

I put the alert() into the else if just to see if it would be called, but it does not happen. update.start() and update2.start() are carried out however, as I can see the messages appearing in the table.

I would be happier to use JavaScript but I am open to jQuery also.

My JavaScript is very very rusty so excuse me if I have made any silly mistakes!

Thanks,

Chuck

Answer 1

You have several mistakes in function notification(), see my comments:

function notification()
{
    var index = 2;

    //Why are you assigning value to "content" for twice?
    var content = document.getElementById('refreshMessages').childNodes[index];
    /*
    * function getElementByTagName is undefined, should be getElementsByTagName, 
    *  's' is missing. And [1] means the second one not the first one, make sure
    *  that's exactly what you want.
    */
    var content = document.getElementById('refreshMessages').getElementByTagName("tr")[1];

    /*
    * content is a tr dom object, content.toString() is something like "[object]".
    * If you want to get content inside a cell, you should use cell.innerHTML.
    * e.g. A table: 
    * <table id="refreshMessages">
    *     <tr><td>Hello world</td></tr>
    * </table>
    * var table = document.getElementById('refreshMessages');
    * var firstTr = table.getElementsByTagName("tr")[0];
    * var firstTd = firstTr.getElementsByTagName("td")[0];
    * alert(firstTd.innerHTML);      //alerts "Hello world"
    */
    var knownContent = content.toString();

    //I doubt these functions really get invoked cuz there's javascript error above.
    updater.start();

    updater2.start();

    //assigning twice, "getElementByTagName" is missing "s"
    var newContent = document.getElementById('refreshMessages').childNodes[index];
    var newContent = document.getElementById('refreshMessages').getElementByTagName("tr")[1];

    //Remove toString(), use innerHTML i metioned above.
    if(knownContent != newContent.toString())
    {
       newMessage();
       knownContent = newContent;
    }
    //You miss an "=" here, to judge a equals b, you should use "=="
    else if(knownContent = newContent.toString())
    {
        alert("No need to flash title.");
    }
}