Rails 3: хитрый ... обновить поле выбора после модальной, не перезагружая всю страницу

Question

У меня новый очень сложный вопрос, который сводит меня с ума уже 3 дня ... Может быть, кто-нибудь может мне помочь с этим.

У меня есть вид с окном выбора (для пользователя, чтобы выбрать учетную запись): вот часть вида:

div id="boxplot">
<div id="box1">
Sur quel compte?<br />
<div id="banque"><%= render 'banque', :f => f %></div><br /><br />
Combien?<br />
<%= f.text_field :montant %>
</div>

Тогда вот частичное:

<%= f.select(:debit, @in.collect {|p| [p.nom, p.numero]} + ['Ajouter...'], {:include_blank => 'Sur quel compte?'})%>

Как вы видите, у меня в контроллере есть новое действие:

def new
@journal = Journal.new
@in = Compte.where(:categorie => "Actif")

Реализовано модальное окно, чтобы дать пользователю возможность "добавить новую учетную запись" (конечно, другая модель). Вот этот Javascript. Это просто, просто проверьте, выбрал ли пользователь «Ajouter ...», и если да, откройте iframe, чтобы создать новую запись в compte модели:

$(function () {
$('#banque').change(function() 
{
$a = $('#journal_debit').val();
if ($a == "Ajouter...") {
$.fancybox({
        'width': '70%',
        'height': '70%',
        'autoScale': false,
        'transitionIn': 'fade',
        'transitionOut': 'fade',
        'type': 'iframe',
        'scrolling': 'no',
        'padding': 45,
        'showCloseButton': true,
        'title': "Ajouter un nouveau compte" ,
        'titleShow': true,
        'titlePosition': 'over' ,
        'onComplete': function() { 
        $("#fancybox-title").css({'top':'0px', 'bottom':'auto'}); 
        },
        'href': '/comptes/modal/'
    });
}
else
{
}

});
})   

Я отправляю этот запрос с помощью js с create.js.erb:

$(function () {
parent.$.fancybox.close();
})

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

Единственный способ получить это - добавить этот файл в файл create.js.erb:

parent.location.reload(true);

Но проблема в том, что перезагрузка всей страницы приведет к потере данных, которые пользователь мог бы ввести до запуска модального окна ...

Я не могу найти способ сделать это хитрым. Можно ли перезагрузить только часть страницы (например, часть, содержащую поле выбора), но если да, как обновить @variable?

Или есть еще один крутой способ добиться того, чего я добиваюсь?

Большое спасибо за вашу помощь.

Answer 1

Привет всем и спасибо за ваш вклад, он мне очень помог в поиске решения.

Я решил эту проблему, добавив этот вызов Ajax в триггер onClosed для fancybox:

'onClosed': function() {$.getScript("/entrees/new.js"); },

Итак, этот файл вызывает файл new.js.erb, когда модальное окно закрыто.В этом файле мне удалось вставить новую запись compte в поле выбора.Это /new.js.erb

$('#journal_debit > option:last-child').before(
'<option value="<%= @in.last.numero %>"><%= @in.last.nom %></option>'
);

Миссия выполнена!

Answer 2

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

$('#select-box-id').append(
    '<option value="<%= @company.id %>"><%= @company.name %></option>'
);

для вашей функции обратного вызова должна сделать все основные для вас. Посмотрите jQuery Docs для более подробной информации - они также являются хорошим общим справочником.

Ура!