www.webdeveloper.com
Results 1 to 10 of 10

Thread: Using jQuery to watch for changes

Hybrid View

  1. #1
    Join Date
    Mar 2006
    Posts
    73

    Question Using jQuery to watch for changes

    Good day, all,

    I am trying to understand a fundamental feature of jQuery but, so far, cannot find any specific examples despite my Google-fu.

    My problem:

    There exists a set of scripts and Ajax calls that modify and change some elements on a page I need to update. I cannot touch or change these scripts; they are undocumented and the individual who built them is unavailable. All I am free to do is build scripts that watch the elements on the Web page and, when they change, do something.

    It's the "when they change" part that mystifies me.

    I'm trying to watch a div (let's call it id="dr_someUniqueDiv") and, when it becomes visible do "x" and when it becomes invisible do "y". My problem is that I do not know how to attach such a monitoring script to div#dr_someUniqueDiv or trigger my subsequent actions when it flips between display:block and display:none.

    I am stuck using jQuery 1.3.2.

    I know that .bind() or .live() is probably what I need, but both require knowing what event handler to use. I've gone through the API documentation and cannot find an event handler that pays attention to the properties of an object and fires "true" when they change. My plan is to watch for the visibility condition on div#dr_someUniqueDiv and, when it changes, perform some evaluations and then fire the changes I need.

    Can someone provide me with a general approach?

    Here is the pseudo-code of what I am attempting:

    Code:
    <div id="dr_someUniqueDiv">
    	Hello, world.
    </div>
    
    <script type="text/javascript">
    	$(function(){
    		$('div#dr_someUniqueDiv').whenThisChanges(function(){
    			if ($(this).isVisible()) {
    				// Do something
    			}
    		});
    	});
    </script>

  2. #2
    Join Date
    Nov 2010
    Posts
    1,036
    It's possible, but tricky and jQuery won't help you much. HTML elements don't have change events, so you can:
    Listen for a DOMAttrModified event but Chrome, safari and lesser IE don't support it
    Listen for a propertychange event but that's only IE
    Set a mutation observer but that has its own cross-browser dramas and is fairly new

    and then of course you have to make sure that the element exists at the time you're setting any of those things

    is there some user action that shows/hides the div? the way I've gotten around it in the past is just to put a listener on the button that hides the div, and do a check there to see if it is shown or hidden.

  3. #3
    Join Date
    Mar 2006
    Posts
    73
    Hmmm... Frustrating.

    There's no monitoring function in jQuery, then? Okay ... I'm going to have to see what I can do about getting a workaround.

    If anyone else can think of a solution, please post it; you would really make my day!

    Yours,
    Dave

  4. #4
    Join Date
    Mar 2013
    Posts
    3
    Can you explain after what action your div gets hidden/visible? For example, if you click on this element, and it hides, you can use:

    $(element).on("click", function(){
    //if visible, do something
    });

    Or search your scripts for any jQuery Code that hide elements, for example, search for the keywords "css, hide, show, fadeOut, fadeIn, attr, etc.", you should find the correct function this way and insert a callback.

    Another thing would be deleting parts of the script, until you are left with the function that hides your element. It's an annoying thing to do, but sometimes it helped me out finding certain functions in scripts.


    Hope this helps!

  5. #5
    Join Date
    Mar 2006
    Posts
    73
    You have been very helpful, xatm; I appreciate it!

    The issue is this: we had someone who is no longer available create a very cool set of code and get it approved for wide use. But it was minified and undocumented. Since it is a major library we can't just go in and modify it. We'd have to clone it and reverse-engineer the code to find the on-click instructions and, right now, that's not feasible.

    In the future, we're going to re-create the whole thing (documented this time) and not have this problem. For now, I was just hoping I could create an entirely external script that could monitor the page for changes and go from there.

    Thank you, though, for your answers; I do appreciate it!

    Yours,
    Dave

  6. #6
    Join Date
    Mar 2013
    Posts
    3
    Not a problem!

    So either the user has to actively do something, in order to execute the function that hides the element in your script, or it somewhat gets executed automatically without any user action, right?

    If the user has to do something, like i said for example click on something, to execute the function from your scripts that hide the element, you can listen for those clicks in the code of my previous posts, and then check if xxx is hidden or not, independently from your script functions.

    If your function gets executed automatically, for example after the dom is loaded, you can insert a script at the bottom that checks if the element is visible.

    If your function gets executed automatically without any user input, after a certain time, you can make a loop that checks if the element is visible every xxx seconds, its not the most elegant way to do that, but maybe it suffices for your cause!

  7. #7
    Join Date
    Mar 2006
    Posts
    73
    It's a strange scenario.

    We have this script which we cannot touch or modify that intercepts clicks and interprets them before performing one of several actions on the page. It's complicated enough that attaching new clicks to the existing user interface leads to confusion depending on when things get executed. And, as mentioned before, I cannot chain my commands to the existing links since I am not allowed to edit those scripts.

    As a result, we have to watch for the resulting actions on the page which arise from a user's actions.

    What we eventually did was insert a click-monitoring piece of code that would supersede some of the ensuing activity. That seems to have worked for the time being. It creates spaghetti-code, layering functions on top of functions, but it was all we were left with in the end.

    Again, thank you very much for your time and assistance; I truly appreciate it.

    Yours,
    Dave

  8. #8
    Join Date
    Mar 2009
    Posts
    467
    It might be wholly inappropriate for your purposes, but this is a simplified version of something I did once for a similar situation that I dug up from memory. I just threw this together so it may have syntax or logical errors in it. In any event hopefully it can be of some use to you.

    Code:
    //args (1) array of element ids you want to monitor (2) CSS property to be checked, and
    //(3) function to which the report is sent to
    
    function reporter(idArray, CSSproperty, reportTo){
        var x = {};
        x.id =[];
        x.ref = [];
        x.report = reportTo;
        x.prop = CSSproperty;
    
        var i, len;
        //get actual refs to speed things along
        x.id = idArray;
        len = x.id.length;
        for(i = 0; i < len; i++){
    	x.ref[i] = document.getElementById(x.id[i]);
        }
    
        //scan and record the settings of all the elements you are interested in
        //record values in an object that is returned from the function
        x.scan = function(){
    	var i, summary, len = x.ref.length;
    	summary = {};
    	for(i = 0; i < len; i++){ 
    	    summary[x.id[i]] = x.ref[i]['style'][x.prop];
    	}
    	x.report(summary);
        }
    
        //try to insure that the function that does something to the page has 
        //completed before doing the scan. 25ms was an arbitrary choice
        x.run = function(){
    	setTimeout(x.scan, 25);
        }
    
        //attach to window.onclick, if it exists
        var fn = window.onclick;
        if(typeof(fn) == 'function'){
    	window.onclick = function(a,b,c,d,e){ //hope it doesn't need 6 or more args
    	    fn(a,b,c,d,e);
    	    x.run();
    	}
        }
        else{
    	window.onclick = function(){
    	    x.run();
    	}
        }
    
        return x;
    }
    
    /*==============that's the reporter.  To use an example, lets say we have have 3 elements
    and we want to monitor the status of each one in regards to its 'display' CSS property
    whenever the user clicks on the screen.  The id's are El1, El2, and El3.  We also need a
    function as the 3rd arg to send it to--it could log it or send it off via AJAX or socket,
    but we'll just do this:
    function report(obj){
       var i;
       for(i in obj){
        alert(i + ":  " + obj[i]);
        }
    }
    
    If --and make sure the reporter function doesn't run until the page is loaded and all (if any)
    elements have been created dynamically-- we do this, you should be provided with a snapshot
    every time the screen is clicked.
    
    var whatever = reporter(['El1','El2','El3'],'display',report);
    */

  9. #9
    Join Date
    Mar 2006
    Posts
    73
    Wow.

    Let me just say "Thank You"!

    I'll go over this in my spare time and suss out its contours and functions. I truly appreciate this! Thank you very much!

    Yours,
    Sylvan

  10. #10
    Join Date
    Mar 2009
    Posts
    467
    Hi--

    One thing about the code as well that you should know if you don't already is that the 'style' object of an element usually reflects only the "inline" style of the element. The snapshots won't necessarily reflect any real values unless and until those qualities have been set by inline HTML CSS or until the js changes them.

    If you want to have a complete picture from the beginning you might use the jQuery.css thing to get the current setting for each element. That will only require minor modification of the code.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles