YUI3 Uploader + Rails rjs

Question

I'm trying to use the YUI3 Uploader with a Rails 2.3.12 project. I've got it working up to the point of parsing the response after uploading. The response is an RJS file rendering a partial, to update an element on the page.

This RJS works as expected when run via normal non-flash uploads, and it works as expected with the SWFUpload plugin.

In Firefox, I get the error:

Error: missing } after property list
Source File: http://secure.symt.localhost:3000/training_videos/4/edit
Line: 0, Column: 204
Source Code:

try { __flash__toXML(YUI.applyTo("yui_3_4_0_2_1314649381592_1","SWF.eventHandler",["yuiswfyui_3_4_0_2_1314649381592_14",({data:"try {\nElement.replace(\"training_video_4_poster_current\", \"<div class=\\"current_file_name\\" id=\\"training_video_4_poster_current\\">Current poster: <a href=\\"https://symtools_development.s3.amazonaws.com/system/symt_development/training_videos/posters/4/original/logo with spaces.JPG?1314649390\\" target=\\"new\\">logo with spaces.JPG</a> &mdash; <a href=\\"#\\" onclick=\\"if (confirm('Are you sure?')) { new Ajax.Request('/attachments/delete/training_video/4/poster', {asynchronous:true, evalScripts:true, method:'delete', parameters:'authenticity_token=' + encodeURIComponent('zzoL7fhstIy16isJGUdNQJ7ab4TNN+lMlOfJcBVabfo=')}); }; return false;\\">[delete this file]</a></div>\");\nElement.replace(\"ajax-flash-container\", \"\n<div id='ajax-flash-container' style='display:none'>\n\n\t\n\t\t<div id='info-message-container'>\n\t\t<div class=\\"flash info\\">\n\t\t\t<div class=\\"info-icon\\">i</div>\n\t\t\t<div class=\\"message-contents\\">\n\t\t\t\t<ul>\n\t\t\t\t\t<li>File uploaded.</li>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t\t<div class=\\"clear\\">&nbsp;</div>\n\t\t</div>\n\t</div>\n\t\n</div>\n<script type='text/javascript'>\n  setDoMessages();\n</script>\n\n\");\n} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.replace(\\"training_video_4_poster_current\\", \\"<div class=\\\\"current_file_name\\\\" id=\\\\"training_video_4_poster_current\\\\">Current poster: <a href=\\\\"https://symtools_development.s3.amazonaws.com/system/symt_development/training_videos/posters/4/original/logo with spaces.JPG?1314649390\\\\" target=\\\\"new\\\\">logo with spaces.JPG</a> &mdash; <a href=\\\\"#\\\\" onclick=\\\\"if (confirm(\'Are you sure?\')) { new Ajax.Request(\'/attachments/delete/training_video/4/poster\', {asynchronous:true, evalScripts:true, method:\'delete\', parameters:\'authenticity_token=\' + encodeURIComponent(\'zzoL7fhstIy16isJGUdNQJ7ab4TNN+lMlOfJcBVabfo=\')}); }; return false;\\\\">[delete this file]</a></div>\\");\nElement.replace(\\"ajax-flash-container\\", \\"\\n<div id=\'ajax-flash-container\' style=\'display:none\'>\\n\\n\\t\\n\\t\\t<div id=\'info-message-container\'>\\n\\t\\t<div class=\\\\"flash info\\\\">\\n\\t\\t\\t<div class=\\\\"info-icon\\\\">i</div>\\n\\t\\t\\t<div class=\\\\"message-contents\\\\">\\n\\t\\t\\t\\t<ul>\\n\\t\\t\\t\\t\\t<li>File uploaded.</li>\\n\\t\\t\\t\\t</ul>\\n\\t\\t\\t</div>\\n\\t\\t\\t<div class=\\\\"clear\\\\">&nbsp;</div>\\n\\t\\t</div>\\n\\t</div>\\n\\t\\n</div>\\n<script type=\'text/javascript\'>\\n  setDoMessages();\\n</script>\\n\\n\\");'); throw e }",type:"uploadcompletedata",id:"file0"})])) ; } catch (e) { "<undefined/>"; }

Chrome gives me:

Uncaught SyntaxError: Unexpected token ILLEGAL

Any ideas?

Answer 1

Solved, sort of. I abandoned RJS for these actions, and instead wrote an ERB template that outputs the desired javascript.

The RJS helpers coupled with the YUI Uploader's JS-wrapping-and-escaping were mangling things - now I'm just rendering exactly what I need.