I have a Rails 5.1.3 application (a Facebook clone to be more precise.) When the page initially loads, I fire an anonymous function
to grab all of the "comment" and "reply" buttons. These buttons are responsible for revealing the comment/reply forms.
我有一个Rails 5.1.3应用程序(Facebook克隆更精确。)当页面最初加载时,我触发一个匿名函数来获取所有“评论”和“回复”按钮。这些按钮负责显示评论/回复表格。
The problem I'm having is this, when I use pagination to grab additional posts with ajax, I fire the exact same functions again, this time named updatebuttons()
, however, sometimes it works, sometimes it doesn't.
我遇到的问题是,当我使用分页来获取带有ajax的其他帖子时,我再次触发完全相同的函数,这次命名为updatebuttons(),但是,有时它会起作用,有时它不会。
Here's my application.js. which loads the initial buttons on $(document).ready(function(( {...})
这是我的application.js。它在$(document).ready(function(({...})上加载初始按钮
$(function() {
if ($(".search")) {
tabs = $("li.tab").toArray();
tabs.forEach(function(item) {
item.addEventListener("click", function(e) {
tab = $($(e.target)).parents("li").attr("data-panel");
$("ul#list li").not(".hidden").toggleClass("hidden");
$("." + tab).toggleClass("hidden");
})
})
}
// initial grab of comment buttons for revealing comment forms on posts
$("div.post").on("click", ".js-comment-button", (e) => {
console.log("grabbed comment buttons")
e.preventDefault();
form = $(e.target).parents(".post").children(".js-post-comment-form").removeClass("hidden").addClass("active");
form.find("input.input").focus();
input = form.find("input.input");
input.on("focusout", function() {
form.addClass("hidden").removeClass("active");
})
})
// initial grab of reply buttons for comments
$("div.comment-body").on("click", "a[id*='js-reply-comment']", (e) => {
console.log("grabbed reply buttons")
e.preventDefault()
$($(e.target)).parent(".comment-likes").siblings(".replies").toggleClass("hidden")
$($(e.target)).parent(".comment-likes").siblings(".js-reply-comment").toggleClass("hidden").find("input").focus();
})
// close document.ready
})
Here's my pagination code which fires when the user has gotten to the bottom of the page.
这是我的分页代码,当用户到达页面底部时会触发该代码。
$(document).ready(function() {
$(window).on('scroll', function() {
const more_posts_url = $('.pagination span.next a[rel="next"]').attr('href');
if (more_posts_url && ($(window).scrollTop() > ($(document).height() - $(window).height() - 60))) {
$('.pagination').html('<img id="loading" src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />');
// Updates posts with infinite pagination
$.getScript(more_posts_url)
.done(function(){
console.log("updating buttons!")
// comment form button
$("div.post").on("click", ".js-comment-button", (e) => {
console.log("comment button updated and clicked")
e.preventDefault();
form = $(e.target).parents(".post").children(".js-post-comment-form").removeClass("hidden").addClass("active");
form.find("input.input").focus();
input = form.find("input.input");
input.on("focusout", function() {
form.addClass("hidden").removeClass("active");
})
})
// reply to comment button
$("div.comment-body").on("click", "a[id*='js-reply-comment']", (e) => {
console.log("reply button updated and clicked")
e.preventDefault()
$($(e.target)).parent(".comment-likes").siblings(".replies").toggleClass("hidden");
$($(e.target)).parent(".comment-likes").siblings(".js-reply-comment").toggleClass("hidden").find("input").focus();
})
})
.fail(function() {
$("#loading").hide();
})
}
return;
// close #infinite scrolling
});
// close document ready
});
Additional documentation: here's a YouTube video demonstrating the behavior.
附加文档:这是一段演示行为的YouTube视频。
I know this may not be the best way to implement the desired behavior but I'm just trying to get it working before making it cleaner. I am also looking for a better implementation of grabbing new buttons (e.g. the ones updated via AJAX).
我知道这可能不是实现所需行为的最佳方式,但我只是想让它变得更清洁。我也在寻找更好的抓取新按钮的实现(例如通过AJAX更新的按钮)。
1 个解决方案
#1
1
You're relying on a standard document.ready
event to load your function:
您依靠标准的document.ready事件来加载您的函数:
$(document).ready(function() {
When you're using Turbolinks with Rails 5, you want to use the Turbolinks load
function, like this:
当你使用Turbolinks和Rails 5时,你想使用Turbolinks加载函数,如下所示:
$( document ).on('turbolinks:load', function() {
// your code here
})
The alternative is to get rid of Turbolinks entirely, but it really does speed up script heavy page loads.
另一种方法是完全摆脱Turbolinks,但它确实加速了脚本繁重的页面加载。
#1
1
You're relying on a standard document.ready
event to load your function:
您依靠标准的document.ready事件来加载您的函数:
$(document).ready(function() {
When you're using Turbolinks with Rails 5, you want to use the Turbolinks load
function, like this:
当你使用Turbolinks和Rails 5时,你想使用Turbolinks加载函数,如下所示:
$( document ).on('turbolinks:load', function() {
// your code here
})
The alternative is to get rid of Turbolinks entirely, but it really does speed up script heavy page loads.
另一种方法是完全摆脱Turbolinks,但它确实加速了脚本繁重的页面加载。