jquery thickbox reference problem

Question

Completely restated my question:

Problem: Losing reference to an iFrame with Mozilla firefox 3.6 and 4.0

More info: - Works fine in internet explorer 8 64-bit and 32-bit version.

How to reproduce? In Mozilla: Open the editor accordion menu. Click the 'editor openen' link, in the editor fill in some random text, then click 'bestand opslaan'. Fill in a name and click on 'save'. The content of the editor will be downloaded in HTML format.

Close the save file dialog box by clickin outside of it or on the specified buttons. Click on the 'bestand opslaan' button again and try to save your content to a file. You'll see nothing happening.

The problem isn't there in IE8. Try opening it in there.

Firebug tells me this the second time you open the save dialog:

iFrame.document is null

Example Link: http://www.newsletter.c-tz.nl/

More info: - switched from thickbox to colorbox to try and resolve this issue and because thickbox isn't supported for a long time now. - colorbox gives me the same problem so I don't think it is this. - tried googling for iframe reference error and like, found nothing. - tried putting the iframe code outside of the div that is called by the colorbox script, it retains it reference but not when I put it back inside that div.

Thanks to: JohnP who offered to open a 'hunt' on this.

Edit:

I thought maybe the saveFile.php file was causing trouble to the parent of the iframe but after removing it from the action variable in the editor.php script it still fails with the same error after you open the dialog for a second time.

Can someone maybe write a script that iterates through iframes by name and when the rignt iframe is found reference it to a var? I want to try it but don't know how..

It definitly seems to be the Ajax.js file which is messing things up. In internet explorer 8, when I click twice on the link that loads the textarea for the tinyMCE editor in a div, I lose the handler for that. I don't really know how the ajax script is working but I'm thinking about looking for another script and hope that doensn't f* things up. — C-TZ, Mar 20 '11 at 16:41
Well I deleted the script from the php page and inserted this nice jquery code: — C-TZ, Mar 21 '11 at 00:50
Well comments it seems don't display code seemingly because they aren't made for it. But the jquery code sticks with 11 lines and works wonders. Now I can open/close/open/close the thickbox, but still, after clicking the button which executes the jscript at the top of this question, it loses the reference variable to the iframe. $%)$*# very frustrating =] but atleast I have cleaner code! On to the solution. — C-TZ, Mar 21 '11 at 00:50
Good work in continuing to work on your problem and updating. It's more than what some people here do. You might want to clean up your question with the latest info in it, SO maintains a history so you don't have to worry about the old question — JohnP, Mar 21 '11 at 09:48
Thnx, I did update just now. I'm feeling like I'm getting closer to the source of the problem. It seems more and more like some sort of bug... Because the first time I get a reference, and the second time it's gone. It's weird, because the id's and code aren't changing in the meantime so in theory this kind of behaviour just shouldn't happen! I'm confused. Really need someone with more javascript knowledge. — C-TZ, Mar 21 '11 at 20:47
Can you put setup an example somewhere? I can start a bounty on this question if you do — JohnP, Mar 22 '11 at 04:33
Hi John, thanks for the help! I did as you requested. There's a link to the problem at the top of the question. Thnx again. — C-TZ, Mar 23 '11 at 12:30
I started a bounty, hopefully that will generate some interest. Will post if I find a solution — JohnP, Mar 23 '11 at 15:13
Thnx john, I've just been staring at the code hoping for some inspiration as to why it's not working. The code seems perfectly fine and there's no logical reason it shouldn't work the second time. It seems the bounty's working. More views =). — C-TZ, Mar 23 '11 at 16:15
Glad to help! I've been having a look myself. When you initially do a console.log on the iFrame variable, it's a window pointing to editor.php but once the save is done it loses that ref. What I also noticed was that you don't actually have to open the save dialog at all. If you do a console.log before you save it and then you try to save it the code will fail even on the first try. Could you be overwriting the reference at some place? — JohnP, Mar 23 '11 at 16:43
Well it runs the code as many times as you click the save button so I would say the second time it's "overwritten" by a new and same reference. But it isn't specificaly the editor.php, I could load a different file in the iframe and it would still give this behaviour. The iFrame var is pointing to the iframe and then I get the references inside it because I allready know what it's going to load. — C-TZ, Mar 23 '11 at 20:52
I think when you try to save it without the dialog, you'll get in trouble because it's located inside a display:none div so it's probably not going to work, but I'm not sure because I've never tried working with hidden elements before. I don't use extra php code, just the jquery piece to load the editor and the part to load the savebutton... So what you see is what you get with this code. It may be a bug with firefox. — C-TZ, Mar 23 '11 at 20:54

score 2 · Accepted Answer · edited May 23 '17 at 11:55

I can't explain why it's work the first time for Firefox, but in Firefox the function to used for get iframe is different of IE : How to get the body's content of an iframe in Javascript?.

So, replace your JavaScript function "saveToFile" to this :

function saveToFile() {
    var saveAsFileName = document.getElementById('saveAs_filename').value;
    var currentContent = tinyMCE.editors["editor_textarea"].getContent();
    var editorFileName = document.getElementById('editor_filename');

    var iFrameTag =  document.getElementById('saveAs_Iframe');
    var iFrame;
    if ( iFrameTag.contentDocument ) 
    { // FF
        iFrame = iFrameTag.contentDocument;
    }
    else if ( iFrame.contentWindow ) 
    { // IE
        iFrame = iFrameTag.contentWindow.document;
    }

    var inframeEditorFileName = iFrame.getElementById('editor_filename');
    var inframeEditorContent = iFrame.getElementById('editor_textarea');

    editorFileName.value = saveAsFileName;
    inframeEditorFileName.value = saveAsFileName;
    inframeEditorContent.value = currentContent;

    iFrame.editor_self.submit();
}

I replace the function with Firebug and it's works for me.

Update : You can also used a crossbrowser solution, more simple, thanks to jQuery :

function saveToFile() {
    var saveAsFileName = document.getElementById('saveAs_filename').value;
    var currentContent = tinyMCE.editors["editor_textarea"].getContent();
    var editorFileName = document.getElementById('editor_filename');
    editorFileName.value = saveAsFileName;

    $("#saveAs_Iframe").contents().find("#editor_filename").val(saveAsFileName)
    $("#saveAs_Iframe").contents().find("#editor_textarea").val(currentContent)
    $("#saveAs_Iframe").contents().find("form[name=editor_self]").submit();
}

It works! :O omg.. that is brilliant. I especially like the cross-broswer jquery code. Very nice. I didn't know that in firefox you had to use .contentDocument. Yes very strange it works the first time but not the second.. Maybe a deprecated function or something. I'll make sure the people at mozilla know about this. — C-TZ, Mar 25 '11 at 11:26

jquery thickbox reference problem

1 Answers1