Responds to Parent
In the pursuit of AJAX file uploads, I ran into the pattern of posting a form to a hidden IFRAME returning javascript control back to the parent page to display a progress bar, make visual effects, show a “uploading” graphic or basically do anything than the default blocking of the page until the upload is finished.
With Rails and RJS, I wanted an easy way to maintain my page update logic without having to worry (too much) about where that code was being executed. This follows the iframe remoting pattern.
Taking the pragmatic approach, we just create an IFRAME in our page to accept the form, target the form to the IFRAME, then in our controller’s form action, we return javascript to be evaluated in the parent window. Easy as that. Here’s the example:
Controller:
class Test < ActionController::Base
def main
end
def form_action
# Do stuff with params[:uploaded_file]
responds_to_parent do
render :update do |page|
page << “alert($(’stuff’).innerHTML)”
end
end
end
end
main.rhtml:
<html>
<body>
<div id="stuff">Here is some stuff</div>
<form target="frame" action="form_action">
<input type="file" name="uploaded_file"/>
<input type="submit"/>
</form>
<iframe id='frame' name="frame"></iframe>
</body>
</html>
All we did was wrap the render :update block with a responds_to_parent block. Now your RJS update executes in the parent window rather than in the IFRAME.
Tested environments:
- Safari 2.0.3
- Firefox 1.5.0
- IE 6
- Opera 8.52, 9b2 (Thanks Julio Cesar Ody for the fix!)
Extra:
[...] and it’s implementation as Ruby on Rails plugin here. Example of using: class TestController < ActionController::Base def upload_action [...]
I’m having problem with respond_to_parent plugin in Safari3. The page.replace_html(Element.update()) doesn’t work. It’s fine in Safari 2 but it crashes in Safari 3.
Seems to not be working in Safari 3, what is the problem here? Are you planning to upgrade with a fix to this? I get the following error
RJS error: TypeError: Value undefined (result of expression Element.update) is not object.
Many thanks
I will try to fix then when time permits, but that may be a while. I’ll happily apply any patches that fix this, so if you would like to investigate a little bit, I know many that will be grateful.
Hi Sean. Fabulous plugin that has enabled me to do all the client-side form error handling I wanted to do when uploading. However, as stated above, I have also run into problems with Safari 3. I provided a detailed example here. Please let me know if you need any more specific info. Cheers.
[...] lidar com o formulário no servidor, utilizaremos o plugin responds_to_parent: script/plugin install [...]
Is there a way to access both the parent and the iframe. So for example I could do some work in the iframe and still update the parent at the same time?
Thanks
Sorry, but the iframe is just a workaround and was intended to not be used as anything other than to make the browser behave asynchronously. So nope, just the parent is intended to be used. If you wish work with another iframe then include that in the parent frame.
The “Just give me the plugin.” isnt working, 404 error
Regards
Good catch Rafael. The link now heads on over to Google Code.
[...] http://sean.treadway.info/responds-to-parent/ [...]
[...] Responds to Parent - This may be another bit required to get multi-file uploads working: a way to send AJAX responses back from an IFRAME to its parent. [...]