Wednesday, October 10, 2007

escape_javascript goodness

I was trying to print some javascript in application .rhtml and wanted to use a link_to helper to print a link.
var user = <%= current_user.json_user_data %>;
$('welcome_p').innerHTML = "Welcome " + user.login + '! ( <%= link_to("Sign out", session_path(), :method => :delete, :class => "wlcmLnk")) -%> )';
This resulted in an error as link_to expanded to
$('welcome_p').innerHTML = "Welcome " + ud.login + '! ( <a href="/session" class="wlcmLnk" onclick="var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);f.submit();return false;">Sign out</a> )';

The single quotes are not escaped :(

But not to worry. escape_javascript will do the needful. It escapes carrier returns and single and double quotes.
$('welcome_p').innerHTML = "Welcome " + ud.login + '! ( <a href=\"/session\" class=\"wlcmLnk\" onclick=\"var f = document.createElement(\'form\'); f.style.display = \'none\'; this.parentNode.appendChild(f); f.method = \'POST\'; f.action = this.href;var m = document.createElement(\'input\'); m.setAttribute(\'type\', \'hidden\'); m.setAttribute(\'name\', \'_method\'); m.setAttribute(\'value\', \'delete\'); f.appendChild(m);f.submit();return false;\">Sign out</a> )';

Njoy!

Tuesday, October 9, 2007

(re)Positionable Modalbox 1.5.5.1 updates

Download :
modalbox.js

modalbox.css
(let me know if the above links don't work. I am still trying to figure out the best way to allow file downloads from blogspot).

A quick post to describe my changes to modalbox.js:

- (re)Positionable
A user can position Modalbox by specifying the CSS position properties (top, left, right, bottom)
as
Modalbox.show(content, {title: 'my positioned modalbox', top: '200px', left: '100px'});
and then ...
Modalbox.show(content, {title:'my re-positioned modalbox', top: '100px', right: '100px'});

If the CSS position properties are not specified, modalbox pops up in the default position.
If the left and right properties are not specified, the modalbox pops up in the horizontal center.

- enable_rjs
Modalbox treats any content returned by a http request to be html + script. However this craps out with Rails rjs. enable_rjs enables the rjs support so you can do (a bit contrived, but you get the idea)
respond_to do |format|
format.html {
...
}
format.js {
new_form = render_to_string(:partial => 'new', :layout => false)
render :update do |page|
page.call 'Modalbox._insertContent', new_form, { :top => '50px', :right => '100px'}.to_json
page.call 'Modalbox._putContent'
end
}
end
The invocation is
Modalbox.show(content, { enable_rjs: true});


- scroll bars disappear in IE 6
This is described in detail here


Please note that Modalbox behaves like a singleton class. So if you set an option for a content, you need to explicitly reset that option to disable it for subsequent content.
For e.g.
Modalbox.show('/some_rjs_action', {enable_rjs: true});
and then ...
Modalbox.show('/some_action_that_returns_html', {enable_rjs: false});

Let me know if you find any issues.

Njoy!