модальные формы с использованием jquery и railse - PullRequest
Новая
       15

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

1 голос
/ 26 сентября 2010

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

Я пробовал наложение диалоговых окон jQuery UI / инструментов jquery и т. Д., Но, похоже, нет хорошего решения для обработки ..

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

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

Просто любопытно, что вы, ребята, использовали, это просто и ненавязчиво?

1 Ответ

2 голосов
/ 26 сентября 2010

Кажется, что ваш вопрос касается двух решений:

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

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

Я использую наложение инструментов jquery для модальной формы и 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 метода javascript для модальной формы: close и 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();
});

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

...