JQuery colorbox - accessing element click from remote page

HI

We are using the JQuery Colorbox modal window plugin.

We are calling a colorbox to load a page to display in the modal window. Once the window has loaded we want to be able to detect a click / manipulate elements in the page that has loaded.

In the code example I am trying to get to work there is a <div> in the loaded page (logoutoptions.asp) called <div id="autologoutcancel">. This is what we are trying to detect a click on. But this is not working....

Can anyone point me in the right direction.

Thanks
Craig
// JavaScript Document
function AutoLogoutPrompt () {
	// Call colorbox with logoutoptions
	$.fn.colorbox({href:'logoutoptions.asp',transition:"elastic", width:"750", height:"520", initialWidth:"700", initialHeight:"480"}, function() {
																																										 		 // If autologoutcancel clicked yes then run AutoLogoutCancel
		 $("#autologoutcancel").click(function() {
					// Alert for testing purposes						   		
					alert("Logout cancelled");
		 });																																										
		
		 // If nothing clicked in 30 seconds then run AutoLogOut
		 setTimeout(AutoLogout,5000);	
	});
};

Open in new window

craig32768Asked:
Who is Participating?
 
StealthyDevConnect With a Mentor Commented:
Ok, i understand your requirement.

For this, you need to wait until the content of the page is loaded. Instead of loading it using this function, use the AJAX method to get all the content of the page and then put it a div.

Then call colorbox to show it in UI.

Now you can use this $("#autologoutcancel").click method !

Hope this helps.
0
 
StealthyDevCommented:
Do you want to activate the click event?
0
 
StealthyDevCommented:
Hi, after analysis, there is an event onComplete in colorbox.

You can use the below code.

Best Regards.

$.fn.colorbox({
	href:'logoutoptions.asp',
	transition:"elastic",
	width:"750",
	height:"520",
	initialWidth:"700",
	initialHeight:"480",
	onComplete: function(){
		$("#autologoutcancel").click(function() {
			// Alert for testing purposes						   		
			alert("Logout cancelled");
		});
		// If nothing clicked in 30 seconds then run AutoLogOut
		setTimeout(AutoLogout,5000);
	}
});

Open in new window

0
 
craig32768Author Commented:
That's great - thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.