More on modal dialogs in rails

Note: The RichText blog has moved to www.ricroberts.com

Almost a year ago (blimey!), I posted about modal dialogs. For various reasons, the part of the application about which I wrote ended up being done a bit differently to how I described. I've recently had a lot more time to work on rails and the other day, I came across a different reason to use modal windows.

The Xilinus Prototype Window Library is now at version 1.3, and has some nice additions since I last used it. There is also a link to a rails helper for launching windows and dialogs, which although doesn't fully support all of the options, is a good point to build from.

Now, to finally answer Michael Kovacs's question from that original post, I found it handy to make use of the callbacks (onOK & onCancel for dialogs and closeCallback for windows) when dealing with ajax.

For example, suppose you want the user to impart some information in one of your modal dialogs. And then you would like to save this information and cause an update to a portion of the page from which you launched the dialog, as a result of what the user did...

One solution is, in the callback function, to interrogate the contents of the dialog for what the user entered (using prototype, say) and then call a remote_function to save the info to a database. This remote_function could then use rjs to update the original page.

The erb in your view to launch the dialog might look a bit like this...

<%=
url = (url_for :controller => 'my_controller', :action => 'dialog_action')
link_to_prototype_dialog(
"link text here", 
{
  #content
  :url=>url,
  :options=>{:method=>'get'}
}, 
'confirm', #dialog-kind
{ 
  # dialog options
  :className=>"alphacube",
  :width=>680,
  :height=>220,
  :onOk="function(win)
  {
    val1 = $F('val1');
    val2 = $F('val2');" +
    remote_function(
      :url => {:controller=>'my_controller', :action=>'do_something'},
      :with => "'val1=' + val1 + '&val2=' + val2",
      :complete => "$('spinner').hide();",
      :before => "$('spinner').show();") + 
    ";
    return true;  // remember to return true to allow the dialog to close
  }"
}
%>

Note that in order to get this to work properly I had to tweak the rails helper to slightly to correctly format the generated javascript, but you get the general idea.

UPDATE: you might also want to try RedBox modal dialogs.