新しく作成したパーシャルを、コントローラー アクションの応答でレンダリングされるパーシャルの既存のリストに追加しようとしてcreate.js.erb
います。アイテムまでスクロールして、新しい追加を強調表示することで示すことができれば非常に便利です。クライアント側の JavaScript でスクロール部分のコツをつかみましたが、部分的なレンダリングの後に来るすべての効果がcreate.js.erb
実行されません。これが可能な例はたくさんありますが、なぜ私のものがうまくいかないのかわかりません。
初挑戦:create.js.erb
$('#allTab').removeClass('active');
$('#activeTab').addClass('active');
$('#completeTab').removeClass('active');
// TODO: Make sure that li below gets an id="campaign_####" before this render happens.
$('#activeTabList').append("<li><%= escape_javascript(render partial: 'fundraisers/fundraiser', locals: {f: @fundraiser, g: @group}) %></li>")
var number_li = $('#activeTabList li').length;
var $newcampaigndiv = $('#activeTabList li').last().children("panel");
$('#number_of_campaigns').text('Campaigns (' + number_li + ')');
$("body").animate({
scrollTop: $newcampaigndiv.offset().top
}, {
duration: 600,
queue: false
});
$('#activeTabList li').last().children("panel").effect('highlight');
2 回目の試行:create.js.erb
$('#allTab').removeClass('active');
$('#activeTab').addClass('active');
$('#completeTab').removeClass('active');
// TODO: Make sure that li below gets an id="campaign_####" before this render happens.
$.when($('#activeTabList').append("<li><%= escape_javascript(render partial: 'fundraisers/fundraiser', locals: {f: @fundraiser, g: @group}) %></li>")).done(function () {
var number_li = $('#activeTabList li').length;
var $newcampaigndiv = $('#activeTabList li').last().children("panel");
alert('gets here at least');
$('#number_of_campaigns').text('Campaigns (' + number_li + ')');
$("body").animate({
scrollTop: $newcampaigndiv.offset().top + $newcampaigndiv.height() / 4 - $(window).height() / 2
}, {
duration: 600,
queue: false
});
$('#activeTabList li').last().children("panel").effect('highlight');
});
dom を正しくトラバースしていないという事実を受け入れることに反対しているのではなく、この質問をするのをためらっていましたが、それを正しくするためにあらゆる種類の組み合わせを試してきました。
また:
パーシャルを囲むid を設定するためにさらにルビを埋め込もうとする<li>
と、アクション全体が壊れ、パーシャルがレンダリングされません。ここで何が欠けているのか分かりますか?