модальные формы с использованием jquery and railse

Question

Каков наилучший вариант для формы типа модели/наложения (для создания сообщения, например) с использованием рельсов и jquery?

Я попытался JQuery диалог щ/JQuery инструментов наложения и т.д., но не похоже, чтобы быть хорошим решением для обработки ..

1 - Ошибки проверки, т.е. представить форму с ошибками проверки соответствующих рядный/флэш

2 - единственный способ справиться с ними - это перезагрузка диалогового окна и некоторые сложные javascripting, которые я не уверен, что он будет ухудшаться должным образом.

Любопытно, что у вас есть ребята, которые просты и ненавязчивы?

Answer 1

Кажется, чем ваш вопрос о два решения:

1 - какой подход использовать для ajaxed форме?

2 - какой инструмент или подход использовать для модальной формы?

Я использую jquery tools overlay для модальной формы и RJS с подходом UJS. Это живой пример update.js.haml с флэш-сообщениями и встроенными ошибками:

$('#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(); 

Я обнаружил, что делает форму с ошибкой с использованием парциальных довольно просто и вы можете использовать свой код. В коде выше 2 приложения шириной яваскрипта методов формы модальной: близко и 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(); 
}); 

Существует только одна проблемы с вышеупомянутым кодом: модальная форма может быть выше, чем видимая часть экрана (когда наложение фиксированного) или выше родительского документа (когда оверлей не фиксирован), но нетрудно обходиться с его хранением, настройкой и восстановлением исходной высоты родительского элемента.