|
|
If you have been on Rails in the
past few months, you will know this programming environment is pretty
productive. I managed to get my old PHP financial feeds site re-implemented in
Ruby on Rails (RoR) in less than a week, whereas the original site tooks a
month to do, and certainly does not look as glitzy as the new one.
I did however hit a stumbling block today while using the
remote_function() method. This method is crucial to the implementation of
remote AJAX calls, which
allows for portions of your web page to be reloaded without having to reload
the whole page. The limitation with the current Rails version of remote_function() is that it does not support Javascript calls at all. What
does this mean ? Well, for most cases, it probably will not matter, as you
simply want to invoke a controller action directly. However, if you ever want
to do what I do, which is to perform an AJAX call to refresh my page partially whenever a selection is made
on a dropdown list, then things get rather difficult.
A typical use of remote_function() is:
remote_function(:update => 'myid', :url => { :controller => 'my_controller',
:action => 'do_something' })
which generates an AJAX call with the URL you specify expanded accordingly:
new Ajax.Updater('contents', '/my_controller/do_something', {asynchronous:true,
evalScripts:true})
Which means the URL is static and hardcoded at the point of generation. So, if
you have a dropdown list whose selection will not be known until much later,
how are you going to append it to the URL in order to pass the selection to
the my_controller controller ? You can't.
What you want to do is, instead of the hardcoded URL, pass in a Javascript
wrapper function call, which extracts the selection and appends it to the URL:
url = url_for(:controller => 'my_controller', :action => 'do_something')
remote_function(:update => 'myid', :url => "callMyController('dropdown', url)"
This is however not possible because remote_function() always does this to
anything you pass in for the URL:
function << "'#{url_for(options[:url])}'"
Which is no good because the generated AJAX call looks like this:
new Ajax.Updater('myid', 'callMyController('dropdown', '/my_controller/do_something')', {asynchronous:true,
evalScripts:true})
creating first of all a syntax error because the single quotes around the URL are neutralised by our embedded single quotes.
Secondly, even if we wash our Javascript call through the
escape_javascript()
function, the URL will then become:
new Ajax.Updater('myid', 'callMyController(\'dropdown\', \'/my_controller/do_something\')', {asynchronous:true,
evalScripts:true})
Cool, not bad. The page compiles and displays correctly. However, when we make
a selection on the dropdown list, Boom!.
Routing Error
Recognition failed for "/callMyController('myid','/my_controller/do_something')"
What has happened here is the Rails engine has treated the URL as a literal and passed it directly
to our server as is. No good.So, to fix the problem, we need to enhance the
above line of code in remote_function() to pass the Javascript wrapper call
un-interpreted, unquoted, and un-escaped to the AJAX declaration.
url = options[:url]
# only resolve into Rails path if not a Javascript function
unless options[:js_url]
url = "'" + url_for(options[:url]) + "'"
end
function << url
Perfect. Remember that we have defined a new :js_url option in order to
indicate to the remote_function() call that we do not want any interpretation
done on the value we passed in for the :url parameter. Now we can implement the whole solution for our dropdown list,
passing in the new :js_url parameter (highlighted in red):
<% items = Items.find_all %>
<%= select_tag(
:dropdown,
options_for_select(items),
:onchange => remote_function(
:update => 'myid',
:js_url =>
true,
:url => "callMyController('dropdown','"
+ url_for(:controller => 'my_controller', :action => 'do_something') + "')"
)
)
%><script>
function callMyController(id,url) {
var dropdown = document.getElementById(id);
var selected =
dropdown.options[dropdown.options.selectedIndex].value;
url = (url.match(/\?/) ? '&' : '?') + 'id=' +
escape(selected);
return url;
}
</script>
And the generated AJAX call is:
new Ajax.Updater('myid', callMyController('dropdown', '/my_controller/do_something'), {asynchronous:true,
evalScripts:true})
Nicely done !!
|
Home
Contact us
|
