modal forms using jquery and railse

Question

What's the best option to to a model/overlay type form (to create a post for example) using rails and jquery?

I have tried jquery ui dialog/jquery tools overlay etc, but there does not seem to be a good solution to handle..

1 - Validation errors, i.e. present the form with appropriate inline/flash validation errors

2 - the only way to handle these seems to be re-loading the dialog and some complicated javascripting, which i am not sure if it will degrade properly.

Just curious, what you have guys used, that is simple and unobstrusive?

Answer 1

It seems than your question is about two decisions:

1 - what approach to use for an ajaxed form?

2 - what tool or approach to use for a modal form?

I use jquery tools overlay for a modal form and RJS with UJS approach. This is a live example of update.js.haml with flash messages and inline errors:

$('#flash').children().slideUp();
$('#flash').html('#{escape_javascript(render 'layouts/partials/flash', :flash => flash)}').slideDown();
$('#flash').children().delay(flash_delay).slideUp();

- if @variant.errors.any?
  $('#data_form').html('#{escape_javascript(render(:partial => "form"))}');
- else
  ModalForm.close();
  $('ul.data_grid .list li[id="#{@variant.id}"]').replaceWith('#{escape_javascript(render :partial => "variant", :locals => { :variant => @variant })}');
  ModalForm.init();

I found that rendering form with error using partials is pretty simple and you can reuse your code. In the code above 2 application-wide javascript methods for modal form: close and init:

var ModalForm = {
    init: function(){
        $('a.show_modal').overlay({
            mask: {
                color: '#335f97',
                loadSpeed: 100,
                opacity: 0.5
            },
            closeOnClick: false,
            target: '#modal_form',
            fixed: false,
            left: 135,
            top: 0,

            onClose: function() {
                $('#data_form').empty();
            }
        });
    },

    close: function(){
        $('a.show_modal').each(function(){
            var ol = $(this).data("overlay");
            if(ol.isOpened()){
                ol.close();
            }
        });
    }
};
$(document).ready(function(){
    ModalForm.init();
});

There is only one issue with the code above: the modal form can be higher than visible part of screen (when overlay fixed) or higher than parent document (when overlay is not fixed) but it's not difficult to workaround it storing, adjusting and restoring original height of parent element.