Explore our sites

Stack Exchange
tour help
Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a div <div id="Country">India</div> . I want to execute some code (say JavaScript function) whenever the div value changes. How can I listen to changes on the div value? Do i need to use Jquery for this?

share|improve this question
 
You need javascript to do that (jQuery if you want). –  kmas 16 hours ago
 
div value changes refers innerHTML. –  Kawinesh SK 16 hours ago
 
The "best" current way to handle this would probably be to tap into whatever changes the div contents and listen to that source. –  user2864740 16 hours ago
 
Anyway, perhaps a dup. of stackoverflow.com/questions/2457043/… or stackoverflow.com/questions/648996/… or stackoverflow.com/questions/12421491/… –  user2864740 16 hours ago
add comment

6 Answers

up vote 1 down vote

an easy jquery solution is to use a custom event and trigger it yourself when you change the DOM:

$("#country").html('Germany').trigger('CountryChanged');


$('#country').on('CountryChanged', function(event, data) {
   //contentchanged
});
share|improve this answer
 
+1 As I would try to hook into the source, as opposed to reacting to the DOM changes. The DOM observers (old and new style) are not well-enough supported, although there are various [jQuery] plugins to try and make the support usable/consistent .. –  user2864740 16 hours ago
add comment
up vote 0 down vote

Same question: https://groups.google.com/forum/#!topic/prototype-scriptaculous/WtU5IS6gdxY

jquery just make your live easy! all you can do with jquery, you can also do with normal javascript!

share|improve this answer
 
@crackerodks Thanks for the link but I don't find the answer in the link you gave. Do u know how to achieve this in JQuery or javascript> –  Stunner 16 hours ago
 
Ok... here we go: $(document.body).select('div').each(function(el){ el.observe("element:update", onchange_function); }) from: jsbin.com/ayiku –  Cracker0dks 16 hours ago
 
In your case: $("#Country").observe("element:update", function() { //Change happend }); }); –  Cracker0dks 16 hours ago
 
$.observe is not standard, but is provided by a plugin (which plugin is being referred to in this case?) –  user2864740 16 hours ago
 
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. –  Greg Whitaker 9 hours ago
add comment
up vote 0 down vote

You can listen to events triggered by the MutationObserver DOM API : https://developer.mozilla.org/en/docs/Web/API/MutationObserver

share|improve this answer
 
Sure .. unfortunately look at the "Compatibility" chart .. –  user2864740 16 hours ago
add comment
up vote 0 down vote

Try this Demo, It's in Cracker0dks's link http://jsbin.com/ayiku and this is the code http://jsbin.com/ayiku/1/edit

share|improve this answer
add comment
up vote 0 down vote

I have prepared a small demo for you. Its a little crude but I am sure You can improve it ;).

Happy Coding :)

<!DOCTYPE html>
<html>

    <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>


    $(document).ready(function(){

    $("#ChangeText").click(function(){
        var value = $("#DivText").val();
        $("#Country").text(value);
    });

    $('#Country').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    if (event.type == 'DOMNodeInserted') {
        alert('Content added! Current content:' + '\n\n' + this.innerHTML);
    } else {
        alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
    }
    });
});
    </script>
    </head>

    <body >
    <input type="text" id="DivText" />
    <button id="ChangeText"> Change Div Text </button> <br /> <br />
        <div id="Country">India</div>   

    </body>
</html>
share|improve this answer
add comment
up vote 0 down vote

Try this within script tag: 

$(document).ready(function(){

var new_country1 = "";
var new_country2 = "";
var func_flag = 0;
    $('#Country').bind('DOMNodeInserted DOMNodeRemoved', function(event) {      

    if (event.type == 'DOMNodeInserted') {
        new_country1 = this.innerHTML;  
        if(new_country1 != new_country2 && func_flag == 1) {
            country_changed_function();
        }                   
    } else {
        new_country2 = this.innerHTML;
    }

    func_flag = 1;  

    });
});

function country_changed_function(){
    alert('country changed.');
}

Here "country_changed_function" is function trigger on country div innerHTML got changed.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.