Monitoring the changes in <div> tag

Dear friend,

I need a suggestion for the following requirement:

I have a <div> tag as follows:
   <div id="test">
   </div>

  I used the link_to_remote and using that updated the response in the
<div>.

We have observe_fields for the <select> tags like using the "Onchange"
event and
can track the changes happening in the <select> tag.

Do we have the same kind of method for <div> tag to get track the
changes happening in the <div> tag.

I can also use the periodically_call_remote to achieve my requirement.
But it is not efficient. I should make a Ajax call only when there is
some updation happening in the <div> tag.

How is something changing in the div tag? Do you mean a change by the
call from the link_to_remote? If so then surely you already know it
is changing as you are doing it yourself. I must be missing
something.

Colin

Colin Law wrote:

We have observe_fields for the <select> tags like using the "Onchange"
event and
can track the changes happening in the <select> tag.

Do we have the same kind of method for <div> tag to get track the
changes happening in the <div> tag.

I can also use the periodically_call_remote to achieve my requirement.
But it is not efficient. I should make a Ajax call only when there is
some updation happening in the <div> tag.

How is something changing in the div tag? Do you mean a change by the
call from the link_to_remote? If so then surely you already know it
is changing as you are doing it yourself. I must be missing
something.

Colin

You misunderstood the concept. Ya the <div> is updated by using :update
in the link_to_remote. I want something like observe_field to monitor
the changes happening in the <div> tag. Because we can also use
:complete to get to know the changes happened in the <div>

But it is for only the particular session. Whereas in the observe_field,
it calls the appropriate action whenever changes happened in the
<select> tag. The ajax request will go for all the sessions.

Incase of more than one session currently using my application, the link
clicked in the particular session only will get to use of the :complete.

If any clarifications need revert back me.

Loganathan Ganesan wrote:

You misunderstood the concept. Ya the <div> is updated by using :update
in the link_to_remote. I want something like observe_field to monitor
the changes happening in the <div> tag. Because we can also use
:complete to get to know the changes happened in the <div>

But it is for only the particular session. Whereas in the observe_field,
it calls the appropriate action whenever changes happened in the
<select> tag. The ajax request will go for all the sessions.

Incase of more than one session currently using my application, the link
clicked in the particular session only will get to use of the :complete.

If any clarifications need revert back me.

I think you are misunderstanding how observe_fields works. It does not
monitor changes in the DOM, rather it attaches event listeners to each
individual form field.

Take a look at the list of events that are applicable to HTML elements.
Notice there is no "onchange" event:
http://www.w3schools.com/jsref/dom_obj_all.asp

The onchange event is applicable to controls (text boxes, popup lists,
checkboxes, etc.). The DOM itself doesn't change, rather it gets changed
as a result of some other event.

Robert Walker wrote:

Loganathan Ganesan wrote:

You misunderstood the concept. Ya the <div> is updated by using :update
in the link_to_remote. I want something like observe_field to monitor
the changes happening in the <div> tag. Because we can also use
:complete to get to know the changes happened in the <div>

But it is for only the particular session. Whereas in the observe_field,
it calls the appropriate action whenever changes happened in the
<select> tag. The ajax request will go for all the sessions.

Incase of more than one session currently using my application, the link
clicked in the particular session only will get to use of the :complete.

If any clarifications need revert back me.

I think you are misunderstanding how observe_fields works. It does not
monitor changes in the DOM, rather it attaches event listeners to each
individual form field.

Take a look at the list of events that are applicable to HTML elements.
Notice there is no "onchange" event:
http://www.w3schools.com/jsref/dom_obj_all.asp

The onchange event is applicable to controls (text boxes, popup lists,
checkboxes, etc.). The DOM itself doesn't change, rather it gets changed
as a result of some other event.

But my need is to monitor the <div> tag. If any updates happen in <div>,
I should make an Ajax Call. How can I do it?

Suggestions welcome..

Loganathan Ganesan wrote:

But my need is to monitor the <div> tag. If any updates happen in <div>,
I should make an Ajax Call. How can I do it?

I think you have your answer. You can't. It makes no sense based on how
this stuff works. You can't monitor a change in a div tag because there
is no event to monitor. You must instead monitor the event that caused
the div to change. If the div changes, it is in response to some action
(a click event, a load event, a mouse event, etc.). Figure out what
event is causing the div to change and do whatever you need to do then.

The only hack I can think about would be to have your own monitor with some dirty javascript based on a setInterval and compare the innerHTML of the div with a previous state.
But Robert’s answer is much safer.