Callback function on jquery facebox close (with tinymce)

Posted on 2009-02-14
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() {
      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... :-)

Question by:Dave6969
    LVL 6

    Accepted Solution

    Try this:

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

    Open in new window


    Author Comment


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

    Author Comment

    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 ;-)
    LVL 6

    Expert Comment

    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 Comment

    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 Comment

    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.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    Suggested Solutions

    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now