Detecting click inside iframe OR javascript hook for after CKE has loaded

Hey,

Can you elaborate on what you’re wanting to achieve.

It’ll give me a better understanding of what options are available.

The code below will attach itself to each CKEDITOR field (if ran after CKEDITOR has initialised), then on an event (in this case ‘focus’) fire off whatever you tell it to do.

Sounds like what you’ve described.

for (var i in CKEDITOR.instances) {
	CKEDITOR.instances[i].on('focus', function(event) {
		alert( 'FOCUS '+ event.sender.name );
	});
}

Hi ovann86 –

Yes. Basically, we are using Progression JS (https://jquerycards.com/forms/date-time/progression-js/) to add tool tips to GF fields. Since the CKE input box is in an iframe, the progression.js code click capture does not appear to see the click. Or, since the CKE code takes a bit to load or instantiate, the normal $(document).ready() hook is firing before the CKE iframe has loaded, and I can’t seem to be able to capture click events inside the iframe.

(honestly, not sure how to best proceed. I don’t often work w/ iframes or least the ones we do work with are from other domains, so we don’t have control over content, clicks, etc, and didn’t have a lot of time to research and try out stuff, yesterday. would be happy for any suggestion) – thanks.

I’ll give the code a shot, this might be what I’m looking for. I scanned over the CKE docs, but didn’t see anything like this. Did I miss something?

Yea the CKE documentation is very heavy reading — very easy to overlook something.

I remember people saying not to use $(document).ready() with GF – I think it’s to account for the forms being hidden by default and to hook into ajax enabled multi-page forms.

I see I used the ‘gform_post_render’ event in this plugin, might be worth trying:

e.g.

jQuery(document).bind('gform_post_render', function($) {itsg_gf_wysiwyg_ckeditor_function(jQuery(this)); });

I like the look of progression.js – very cool. Always wondered what people used to make these sort of tooltips work. Although I’m not sure I would use a 100% bar – users would probably skip fields, do field 1 then 5 then back to 2 – and the bar wouldnt make much sense.

I’ll try to set it up in my test environment and see if I can get it working with the CKE though.

Hi ovann86 –

Thanks for the feedback. Yes, we are not using the 100% bar for that same reason.

Progression.js seems to work well and is simple. I have a fork of it that works better with GF. (https://github.com/adamplabarge/progression.js) It seems that it is no longer being developed by the author, thus forking and changing to suite your needs is best.

Thanks for the code example and letting me know what you are binding to. I’ll try this out later today or tomorrow.

Thanks,

I ended up with this solution. script enqueued 9999, though I think the real magic is the readystatechange check.

(function($) {

	document.onreadystatechange = function () {
		if (document.readyState === 'complete') {
			for (var i in CKEDITOR.instances) {
				CKEDITOR.instances[i].on('focus', function(e) {
					var target = $('#'+e.sender.name);
					$(target).trigger('click');
				});
			}
		}
	}

})(jQuery);

I’ve tweaked the progression.js in my own fork to work better with GF and to use the whole #field_x element instead of the input. That way if a user click on a title, description, or input, the progression.js is triggered. With the code above, e.sender.name gets the ID i’m looking for, and I just trigger a click which triggers progression.js to do its thing.

Thanks for the help.

Thanks for confirming you sorted it out and providing the working code.

I’m liking that progression.js — could make a good Gravity Forms plugin.