3

I have a div

<div id="test" class="test">From 0 to 0</div>

Then there is a function that replace the content of the div

function divChange(aArg)
{

var sText = "From" + aArg[0] + "to" + aArg[1];


$("#test").html(sText);
}

And I have no control over this function nor the html. Can I somehow get the text of the div after it has been changed using javascript (I run greasemonkey over the site). Note that the content of the div can be different or the same as before changing.

Update: Sorry I forgot to mention something. First I start a searching, then there will be a asynchronous function running, after it get the all data (the time depend on the database it use) then it will call to this one. So what I want is getting the data after the div is changed not right away after searching or else the result won't be correct.

Simple logic: 1. I start calling a function I don't have control over 2. It will run in an unknown time. 3. After it finishes, it will call a function to change a div's content. 4. I want to capture the content at this moment.

jcp0908
  • 53
  • 7
  • 1
    Its still unclear what you are wanting. Do you need the content *before* the script you don't control changes it, or the content *after* or something else? – Anthony Jun 05 '15 at 09:23
  • If the div contents change due to ajax call, you should use an event listener to grab the contents once it changes. – Anthony Jun 05 '15 at 09:26
  • Sorry I haven't slept for quite some times. Let me explain it again: I start calling a function I don't have control over, it will run in an unknown time. After it finishes, it will call a function to change a div's content. I want to capture the content at this moment. – jcp0908 Jun 05 '15 at 09:28
  • @Anthony How can I do that? The content could be very much the same. If you can help me please at a answer. Thanks in advance. – jcp0908 Jun 05 '15 at 09:32
  • 1
    I provided an answer based on MutationObserver docs, but be warned, I was just tinkering with it and you will probably want to read over the documentation to get it working just right. – Anthony Jun 05 '15 at 10:22
  • Yes of course that's the first thing to do. – jcp0908 Jun 05 '15 at 10:34

6 Answers6

2

The most basic way would be to continuously poll:

var lastValue;
setInterval(function() {
  var curValue = $('#test').html();
  if(lastValue !== curValue) {
    lastValue = curValue;
    // Do whatever it is you want to do with the new value here.
  }
});

A better way, assuming this function is being called in some sort of asynchronous search function somewhere, would be to replace some function in the chain with an extended version of itself:

oldDivChange = divChange;
divChange = function(aArgs, callback) {
  oldDivChange(aArgs);

  var newValue = $('#test').html();
  callback(newValue);
};
rrowland
  • 2,734
  • 2
  • 17
  • 32
  • For the first solution. The content could be the same (from 0 to 0) so you won't be able to compare lastValue !== curValue. For the 2nd solution, I tried but the var newValue = $('#test').html(); will get the result before the searching is completed. – jcp0908 Jun 05 '15 at 09:35
  • We must have been answering at the same time. I like the second solution thought, I hadn't thought of that. – pdp2 Jun 05 '15 at 09:36
  • check out mutation observers. Very low overhead, since they are listening instead of polling, and no concerns about scope or encapsulation (or tracking down source function that is changing the element, though +1 for just going for the throat). – Anthony Jun 05 '15 at 10:25
1

You should be able to use a MutationObserver object, like:

// select the target node
var target = document.querySelector('#test');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {

        // output the new contents of the element to browser console
        if(mutation.type === 'characterData') {
             console.log(mutation.target);
        } else {
             console.log(mutation.target.innerHTML);
        }
  });    
});

// configuration of the observer:
var config = { childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);
Anthony
  • 36,459
  • 25
  • 97
  • 163
  • This one is so promising. But I'll have to deal with the asynchronous above first. – jcp0908 Jun 05 '15 at 10:31
  • This listens for any changes to the element itself, so it doesn't matter if it's changed by async request or some one-off function or whatever, because the observer won't get triggered until the actual mutation has occurred. – Anthony Jun 05 '15 at 10:34
0

You could just call again the 

$("#test").html();
Sim1
  • 534
  • 4
  • 24
0

You should be able to get the contents of the div using getElementById with innerHTML or innerText e.g.

document.getElementById('test').innerHTML;
//or
document.getElementById('test').innerText;

The difference between the two is explained here. I'd recommend using innerHTML rather than innerText though if you've not got control over what browsers your users are using, as innerHTML is W3C compliant.

Community
  • 1
  • 1
Steve
  • 329
  • 1
  • 9
0

You can use

var $content = $("#text");

in your $content variable you can access any property of div test.

ajinkya Jahagirdar
  • 65
  • 1
  • 1
  • 12
0

If you have no control over the 'divChange' function then you are limited in what you can do but there is a work around. If you did have control over that function you could emit a custom event when the content changes and listen to it in your code but seen as you can't do that you will need to try something like this:

var text = $('#test').text(),
    intervalId = setInterval(function(){
        var newText = $('#test').text();

        if (newText !== text){
            // do something with the new value and make sure you clear the interval
            clearInterval(intervalId);
        }
    }, 500);
pdp2
  • 121
  • 2
  • 8