We help IT Professionals succeed at work.

Callback function on jquery facebox close (with tinymce)

Dave6969
Dave6969 asked
on
Medium Priority
3,997 Views
Last Modified: 2012-05-06
Hello Experts,

I've been googling this for a couple of days and drawn a blank with each solution I've discovered, although I gradually get nearer...

I'm trying to get tinymce working in a facebox. I've got a lot of the basics done, but I'm stuck on one thing. I need to fire up a callback function to close the current instance of tinymce at the same time as the facebox closes, otherwise when the box loads again there's no editor.

Now, I know I need to add the following two lines (variable encapsulated by $):

      tinyMCE.execCommand('mceAddControl', false, '$id_of_editarea$');
      tinyMCE.execCommand('mceFocus', false, '$id_of_editarea$');

I did think of getting rid of the Close image at the bottom of the facebox entirely and then adding a closing routine from an anchor actually in the page. But I soon realised that I also want the facebox to close when you click outside it, which is the default behaviour, and of course I wouldn't be able to fire up the routine if someone did that.

So, unless anyone has a better idea, I need to change facebox.js to make it close the instance of tinymce at the same time as it closes the facebox that contains it. This is where I've got into problems. I *think* the function should be called from line 146:

    close: function() {
      $(document).trigger('close.facebox')
      return false
    }

But all my attempts have failed. Of course, I won't be able to get the ID of the edit field, so I don't mind if it closes all instances of tinymce in the page and then I just open a new one on demand. But for the moment I'm stumped.

500 points as ever... :-)


Comment
Watch Question

Try this:

$(document).bind('close.facebox', function() {
	// close tinymce or whatever you need..
	alert("facebox closing");
});

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Excellent!

I was looking at the document binding process all wrong. 500 points elegantly earnt!

Author

Commented:
Whoops. I spoke too soon.

It does do the job for one facebox. However if I have more than one facebox in the page it opens the first I click on fine, and then the second. But then when I close the second it doesn;t remove the instance of tinymce, nor does it display the alert I put in for testing. However the first facebox link still functions fine, but when I close the "good" facebox it then removes the current instance of tinymce and then removes the one for the other facebox (displaying the alert for the current facebox as well as the previous one).  Unfortunately I need to get this working as the page could conceivably have dozens of popups.

Here's what I've done:

$(document).bind('close.facebox', function() {
    tinyMCE.execCommand('mceFocus', false, '$id_of_editarea$');                    
    tinyMCE.execCommand('mceRemoveControl', false, '$id_of_editarea$');  
    alert("removed $id_of_editarea$);
});

At the top of the script I also added:

      $(document).bind('reveal.facebox', function() {
            tinyMCE.execCommand('mceAddControl', false, '$id_of_editarea$');
      });


I suspect I've committed a schoolboy error ;-)
I am not familiar with tinyMCE.

In your code, the only problem I see is a missing ending double quotes. :

alert("removed $id_of_editarea$");

May that be the problem?

Author

Commented:
No, sorry that was a typo on my part.

The code itself looks good, and it works, so long as I only have one facebox link in the page. However immediately I start using any other facebox links it doesn't work. :-(

Author

Commented:
I found "a" solution in the end. I closed all instances at the start of the script, and then also bound closing the instances on facebox close. Not an elegant solution, as I'm doing it twice, but it works.

Thanks for your help.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.