SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery - Trigger event in parent window with object context

    I'm working on some code to sychronize some UI across multiple tabs (all opened using window.open to maintain communication). I have it mostly working but have run into a road block when it comes to executing code in my callback. When i use 'this' in my callback the context is wrong because it says it can't find a method. Any suggestions on how to accomplish this functionality?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <title>Cross Window Test</title>
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>
        
        <script type="text/javascript">
    var CrossWindow = function(){
    
    };
    
    CrossWindow.prototype.triggerEvent = function(window, event){
    	if (window && (typeof window == "object") && !window.closed) {
    		$("body",window.document).trigger(event);
    	} 
    	return false;
    };
    
    CrossWindow.prototype.someFunction = function(){
    	alert("some function");
    };
    
    CrossWindow.prototype.callBack = function(){
    	alert("Call Back Hit");
    	this.someFunction();
    };
    
    
    $(document).ready(function() {
    	var crossWindow = new CrossWindow();
    	$("body",window.document).bind("customEvent", crossWindow.callBack); //Bind to current window
    	
    	var newTab = null;
    	$("#openWindow").bind("click",function(){ //Duplicate the same page in a new Tab
    		var today = new Date();
    		newTab = window.open(document.URL, today.getTime());
    	});
    	
    	$("#customEvent").bind("click",function(){
    		if(newTab != null){
    			crossWindow.triggerEvent(newTab, "customEvent"); //Trigger event, which was bound at its ready, in another window
    		}else{
    			alert("No Child Windows");
    		}
    	});
    });
    </script>
      </head>
      <body>
    	<button id="openWindow">Open Window</button>
        <button id="customEvent">Custom Event</button>
      </body>
    </html>
    Keep in mind that this is a dumb-down version of the actual object in order to concentrate on the specific problem I am having.
    Follow Me On Twitter: BryceRay

  2. #2
    SitePoint Addict
    Join Date
    May 2008
    Location
    Missouri, USA
    Posts
    273
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At this point I'd also be willing to settle for just getting events to trigger in a child window (without object context). The main difference from this code and what is above is I moved the callback out of the object.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <title>Cross Window Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
    var CrossWindow = function(){
    	console.log("Constructor");
    };
    
    CrossWindow.prototype.triggerEvent = function(win, event){
    	if (win && (typeof win == "object") && !win.closed) {
    		console.log("Triggering "+event+" in window "+win.name);
    		$("body",win.document).trigger(event);
    		console.log("Event Triggered");
    	} 
    	return false;
    };
    
    CrossWindow.prototype.Subscribe = function(event, fn) {
        return $(this).bind(event, $.proxy(function(event, context) {
          context = context != null ? context : this;
          return $.proxy(fn, context)(event);
        }, this));
      };
    
      
    callBack = function(){
    	console.log("Callback Function Triggered");
    	someFunction();
    };
    
    $(document).ready(function() {
    	if(!window.name){
    		window.name = "Root Window";
    	}
    
    	console.log("Rendering Window: "+window.name);
    	var crossWindow = new CrossWindow();
    	$("body").bind("customEvent", callBack); //Bind to current window
    	console.dir( jQuery('body').data('events') );
    	
    	var newTab;
    	$("#openWindow").bind("click",function(){ //Duplicate the same page in a new Tab
    		var today = new Date();
    		newTab = window.open(document.URL, today.getTime());
    		console.log("Opening Window: "+newTab.name);
    	});
    	
    	$("#customEvent").bind("click",function(){
    		if(newTab != null){
    			crossWindow.triggerEvent(newTab, "customEvent"); //Trigger event, which was bound at its ready, in another window
    		}else{
    			alert("No Child Windows");
    		}
    	});
    });
    </script>
      </head>
      <body>
    	<button id="openWindow">Open Window</button>
        <button id="customEvent">Custom Event</button>
      </body>
    </html>
    You can load this in a browser, click the 'open a window' button. Then go back the original window and hit the 'custom query' button. The expected behavior is it for the child window's call back function to be triggered. However, the trigger does not seem to be hitting.
    Follow Me On Twitter: BryceRay


Bookmarks

Posting Permissions

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