Rails 3：トリッキーな1つ...モーダル後の選択ボックスをリフレッシュせずにページ全体をリロードする

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?'})%> 

あなたが見ることができるように、コントローラーの新しいアクションに変数があります。

ユーザーに「新しいアカウントを追加する」可能性を与えるためのモーダルボックスを実装していますか（compteはもちろん別のモデルです）。ここにJavascriptがあります。それは「... Ajouter」をユーザーが選択した場合だけチェックし、シンプルだし、YESの場合はcompteモデルに新しいレコードを作成するためのiframeを開く：

$(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するために、この1を追加することです：

parent.location.reload(true); 

しかし、問題は、ページ全体をリロードするには、ユーザがモーダルをトリガする前にinputedはずのデータを失うことになるということですボックス...

私はこのトリッキーな方法を見つけることができません。ページの一部だけをリロードすることは可能ですか（たとえば選択ボックスを含む部分）が可能ですか？はいの場合は@variableをリフレッシュする方法は？

また、私が後にしていることを達成するためのクールな方法がありますか？

ありがとうございました。

Answer 1

これはあなたのHTMLをかなり単純に変更したものです.JSコールバックを使用しているため、JSを使用することもできます。

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

をコールバック関数に追加すると、すべての基本が得られます。詳細については、jQuery Docsをご覧ください。これらのリファレンスも参考になります。

乾杯！

Answer 2

皆さん、ありがとうございました。皆さんのご意見をお寄せいただきありがとうございました。

私はfancyboxのonClosedトリガーに、このAjax呼び出しを追加し、このいずれかを解決してきました：

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

モーダルボックスが閉じているときにこの1つはnew.js.erbファイルを呼び出しています。このファイルでは、新しいコンパックのエントリを選択ボックスに挿入することができました。これは/new.js.erbです。

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

ミッションが達成されました！