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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

StealthyDevCommented:
Do you want to activate the click event?
0
StealthyDevCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.