Rails 3:棘手的...在模态之后刷新选择框而不重新加载整个页面

时间:2012-03-14 20:46:57

标签: jquery ajax ruby-on-rails-3 forms

我有一个新的非常棘手的问题,因为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")

是否实施了一个模式框,为用户提供“添加新帐户”的可能性(compte当然是另一种模式)。这是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
{
}

});
})   

我使用带有create.js.erb:

的js提交此请求
$(function () {
parent.$.fancybox.close();
})

到目前为止一切正常但回到父表单,我的选择框没有更新(我的意思是新创建的帐户没有显示在选择框中......)。

获取它的唯一方法是将此添加到create.js.erb:

parent.location.reload(true);

但问题是重新加载整个页面会丢失用户在触发模态框之前输入的数据......

我找不到办法做这个棘手的方法。是否可以仅重新加载页面的一部分(例如包含选择框的部分),但如果是,则如何刷新@variable?

还有另一种很酷的方式来实现我的目标吗?

非常感谢你的帮助。

2 个答案:

答案 0 :(得分:1)

这是对HTML的一个非常简单的改变,所以你不妨使用JS来做 - 特别是因为你已经使用了JS回调。添加类似

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

到你的回调函数应该为你做所有的基础知识。查看jQuery Docs了解更多详情 - 它们也是一个很好的一般参考。

干杯!

答案 1 :(得分:1)

大家好,感谢您的投入,帮助我找到了解决方案。

我已经解决了这个在fancybox的onClosed触发器中添加此Ajax调用的问题:

'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>'
);

完成任务!