Rails 3 - отображение форм с ошибками внутри modalbox - PullRequest
0 голосов
/ 13 апреля 2011

Я использую modalbox для модального окна для отправки форм, которые я изучил из этого Nettuts tutorial .Прямо сейчас это работает при создании нового клиента в моей модели просто отлично, даже когда есть ошибка в форме - это позволяет мне оставаться в модалбоксе до тех пор, пока ошибка не будет исправлена.Я хотел бы также использовать его для редактирования клиента.Для этого почти все работает, кроме случаев, когда форма редактирования клиента выдает ошибку.Вместо того чтобы оставаться в окне modalbox, как при добавлении нового клиента, оно обновляется на другой странице, чтобы заполнить форму.Вот что у меня есть для новой работающей клиентской функции:

На мой взгляд:

<%= link_to 'New Client', new_client_path, :id => 'newclient-link' %>

В моем ClientsController:

def create
@client = Client.new(params[:client])

respond_to do |format|
if @client.save
    format.js { render :redirect} #modal form redirection (redirect.js.erb)
    format.html { redirect_to(@clients, :notice => 'Client was successfully created.') }
    format.xml  { render :xml => @client, :status => :created, :location => @client }
  else
    format.html { render :new }
    format.js
    format.xml  { render :xml => @client.errors, :status => :unprocessable_entity }
  end
end
end  

Это вфайл application.js:

document.observe('dom:loaded', function() {
$('newclient-link').observe('click', function(event) {
    event.stop();
    Modalbox.show(this.href,
        {title: 'Add New Client',
        width: 500,
        afterLoad: function() {
            $('new_client').observe('submit', function(event) {
                event.stop();
                this.request();
            })
        }}
    );
});

})

И, наконец, это файл create.js.erb, который должен сохранять форму внутри модалбокса:

$('MB_content').update("<%= escape_javascript(render :partial => 'form') %>");
Modalbox.resizeToContent();
$('new_clients').observe('submit', function(event) {
event.stop();
this.request();
});

Теперь, вставив все это для репликации для метода редактирования, я продублировал jquery в файле application.js и заменил «newclient-link» на «editclient-link», чтобы он соответствовал идентификатору link_to в моей ссылке для редактированияи в значительной степени реплицировал код для метода create в контроллере и поместил его в метод update ... Однако, я думаю, что именно в этом проблема.Похоже, что решение должно быть простым и в контроллере, где должен вызываться ajax, чтобы позволить мне обновить форму в modalbox даже после выдачи ошибки, как это происходит с новой клиентской ссылкой.

Anyмысли?

Ответы [ 2 ]

0 голосов
/ 22 февраля 2013

Вы также можете проверить воздушную каплю: https://github.com/xirukitepe/airdrop

эта использует загрузочный модал.

0 голосов
/ 14 апреля 2011

Я решил свою проблему довольно просто, используя вместо этого fancybox:

http://fancybox.net/howto

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

 $(document).ready(function() {
$("a.myfancy").fancybox({
    'transitionIn'  :   'fade',
    'transitionOut' :   'fade',
    'speedIn'       :   200, 
    'speedOut'      :   200, 
    'overlayShow'   :   true,
    'type'          :   'iframe',
    'onClosed'      :   function () {
        parent.location.reload(true);
        ;} 
   });

 }); /* Close main fancybox script */  

Класс: .myfancy - это класс ссылки, которая открывает фрейм. Одна вещь, которую я хотел бы знать, как это сделать, - после закрытия окна и обновления страницы, я хотел бы выделить новую строку, которая была добавлена ​​в таблицу на несколько секунд, а затем исчезнуть. Кто-нибудь знает, как это сделать?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...