Jquery - Trigger event in parent window with object context

**bar338** · Aug 15, 2012 07:16

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.

**bar338** · Aug 15, 2012 08:41

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.

User Tag List

Thread: Jquery - Trigger event in parent window with object context

Thread Tools

Display

Jquery - Trigger event in parent window with object context

Bookmarks

Bookmarks

Posting Permissions