Topic: Manipulating DOM Elements in the Parent Window from a Popup via RJS

Is this possible?  This is how I'm trying to do it and it doesn't work:

itemInput is the id of the element in the parent window to be updated

page.replace_html 'window.opener.itemInput',
           :url => { :controller => 'a_controller', :action => 'an_action' }

Last edited by pklingem (2007-01-11 13:49:35)

Re: Manipulating DOM Elements in the Parent Window from a Popup via RJS

Here is my latest idea, which still isn't working:

page.replace_html page.call("window.opener.document.getElementById", "itemInput"),
       :url => { :controller => 'a_controller', :action => 'an_action' }

Re: Manipulating DOM Elements in the Parent Window from a Popup via RJS

What's the javascript that that second attempt produces?  If you don't have it yet, you'll want the FireBug extension to Firefox - it lets you see JS being passed via AJAX.

Re: Manipulating DOM Elements in the Parent Window from a Popup via RJS

Here's my progress:

page << "itemInputDiv = opener.document.getElementById(\"itemInput\");"
page << "itemInputDiv.innerHTML = \"some random text\""

This correctly updates the div in the parent window with "some random text" (without quotes).  However, I cannot update the div with the result of a render, e.g.:

page << "itemInputDiv = opener.document.getElementById(\"itemInput\");"
component = render_component(:controller => 'wysiwyg',
                             :action => 'show',
                             :params => { :item_info => @params })
page << "itemInputDiv.innerHTML = \"#{component}\""

This RJS generates the following HTML:

try {
itemInputDiv = opener.document.getElementById("itemInput");
itemInputDiv.innerHTML = "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <script src="/javascripts/fckeditor/fckeditor.js?1167256250" type="text/javascript"></script>

    <script src="/javascripts/prototype.js?1156529785" type="text/javascript"></script>

    <script src="/javascripts/effects.js?1156529785" type="text/javascript"></script>

</head>
    <body>
        <h1>Problem Statement</h1>
    </body>
</html>"
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('itemInputDiv = opener.document.getElementById(\"itemInput\");\nitemInputDiv.innerHTML = \"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">\n<html>\n<head>\n    <script src=\"/javascripts/fckeditor/fckeditor.js?1167256250\" type=\"text/javascript\"></script>\n\n    <script src=\"/javascripts/prototype.js?1156529785\" type=\"text/javascript\"></script>\n\n    <script src=\"/javascripts/effects.js?1156529785\" type=\"text/javascript\"></script>\n\n</head>\n    <body>\n        <h1>Problem Statement</h1>\n\n    </body>\n</html>\"'); throw e }


I assume this is some sort of character escape problem, anyone have any ideas?

note: I do realize that I should be using partials here, however, for the moment this will have to do.

Thanks in advance.

Re: Manipulating DOM Elements in the Parent Window from a Popup via RJS

I think you're right - it's something with the double-quotes not being escaped.  Try this:

 page << "itemInputDiv = opener.document.getElementById(\"itemInput\");"
component = render_component(:controller => 'wysiwyg',
                              :action => 'show',
                              :params => { :item_info => @params })
page << "itemInputDiv.innerHTML = \"#{component.gsub('"', '\"')}\""

(notice the .gsub part)

Re: Manipulating DOM Elements in the Parent Window from a Popup via RJS

Danger,

that successfully escaped all of the quotes, but same result, do the carriage returns need to be escaped also?

Thanks for the help.

Re: Manipulating DOM Elements in the Parent Window from a Popup via RJS

Hmm, yeah - you might want to try escaping those too.

Re: Manipulating DOM Elements in the Parent Window from a Popup via RJS

I had the same problem, and solved it with a little workaround:

1) create a hidden div in the popup (<div id="hiddendiv" style="display: none;"></div>)
2) put this in the rjs:

page.replace_html 'hiddendiv', :partial => 'enter_buy' 
page << "contentdiv = opener.document.getElementById(\"content\");"
page << "contentdiv.innerHTML = $('hiddendiv').innerHTML"

It's not perfect, but a lot cleaner than a bunch of replaces on the string