The problem with jQuery colon

Question

Completely repeated my question:

Problem: loss of link to iFrame with Mozilla firefox 3.6 and 4.0

Additional Information: - The 64-bit and 32-bit versions work fine in Internet Explorer 8.

How to reproduce? In Mozilla: open the accordion editor menu. Click on the link "openen editor", in the editor fill in some random text, then click "bestand opslaan". Enter a name and click "Save." Editor content will be uploaded in HTML format.

Close the file save dialog by clicking it outside or on the specified buttons. Click the "bestand opslaan" button again and try saving your content to a file. You will not see anything.

The problem does not exist in IE8. Try opening it there.

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

iFrame.document is null 

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

Additional information: - I switched from a thick box to a colorbox to try to solve this problem, and because the thick box is not supported for a long time. - colorbox gives me the same problem, so I don’t think it is. - I tried googling for an iframe link error and it seems that I did not find anything. - tried to put the iframe code outside the div that the colorbox script is calling, it saves the link, but not when I return it inside this div.

Thanks: JohnP, who suggested opening a “hunt” on this.

Edit:

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

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

Answer 1

I can’t explain why it works for the first time for Firefox, but in Firefox the function used to get the iframe is different from IE: How to get the contents of the iframe body in Javascript? .

So, replace your JavaScript function "saveToFile" with 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 am replacing the Firebug function and it works for me.

Update: You can also use crossbrowser solution, which is simpler 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(); }