javascript - jQuery sometimes doesn't work(Ruby on Rails) -
i have rails 5.1.3 application(a facebook clone more precise.) when page loads, fire anonymous function
grab of "comment" & "reply" buttons. these buttons responsible revealing comment/reply forms.
the problem i'm having this, when use pagination grab additional posts ajax, fire exact same functions again, this time named updatebuttons()
, however, works, doesn't.
here's application.js. loads initial buttons on $(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 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 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 pagination code fires when user has gotten bottom of 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 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 , 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 comment button $("div.comment-body").on("click", "a[id*='js-reply-comment']", (e) => { console.log("reply button updated , 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 youtube video demonstrating behavior.
i know may not best way implement desired behavior i'm trying working before making cleaner. thoughts on how fix highly appreciated! better implementation of grabbing new buttons(the ones updated via ajax appreciated), can't ask much. in advance help!
sincerely, loi
you're relying on standard document.ready
event load function:
$(document).ready(function() {
when you're using turbolinks rails 5, want use turbolinks load
function, this:
$( document ).on('turbolinks:load', function() { // code here })
the alternative rid of turbolinks entirely, speed script heavy page loads.
Comments
Post a Comment