how to alert user when there are changes inside an object field

Question

how can i alert the user if there are any changes inside the object field

i''m trying to detect the changes on this div inside the object

if it's normal the code would be this:

<div id="HeaderNewMessageIcon" class="BrosixContactNewMessage" style="display:none;">
<a href="javascript:;" class="HeaderNewMessageIcon" title="Unread messages"></a>
</div>

but if there are changes it will look like this:

<div id="HeaderNewMessageIcon" class="BrosixContactNewMessage" style="display: block; ">
<a href="javascript:;" class="HeaderNewMessageIcon" title="Unread messages: 1"></a>
</div>

i want to alert the user if there are changes inside the object, either via alert or using an image.

is there any way for me to achieve this?

and another thing, i have no access to the code inside the object, i can only view it but not edit it.

So, those messages come from the server and are reflected in that div? Show us the code which does this! — Bergi, Oct 05 '12 at 15:21

score 0 · Answer 1 · edited May 23 '17 at 10:24

I believe there must be some JavaScript code which changing your html you can call your method from there. Other way you can use setInterval.

You can use jQuery plugin Mutation Events plugin for jQuery . see thread

    var a = document.getElementsByClassName('HeaderNewMessageIcon')[0];
var oldTitle = a.title;
setInterval(function(){
    if(a.title !== oldTitle){
          alert("Title change");  
        oldTitle = a.title;
    }
},100);

jsfiddle

score 0 · Answer 2 · answered Oct 05 '12 at 10:19

You have to detect the changes when throught user interaction such as click, mouseover, mousedown, etc... then you can attach a function to see if its attributes or anything inside it changes.

//detect inputs change
$('#HeaderNewMessageIcon').find(':input').change(function(){ alert(...)});

//detect attributes change
$('#HeaderNewMessageIcon').click(function(){
   detectChange(this);
});

As for detectChange to work, you must save the attributes when page just loaded

var attrs = $('#HeaderNewMessageIcon').get(0).attributes;

function detectChange(obj){
    //pseudo-code, you need to find a function on the web to commpare 2 objetcs
    if (obj.attributes === attrs){
        alert(...);
    }

    //the same comparison for the children elements $(obj).children()
}

how to alert user when there are changes inside an object field

2 Answers2