jQuery sometimes doesn't work with Ruby on Rails

Question

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.

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.

Here's my application.js. which loads the 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 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.

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).

What version of Rails are you on (don't forget important details in your questions)? Are you using Turbolinks? — MarsAtomic
– MarsAtomic, Commented Aug 20, 2017 at 6:28
I updated the version, Rails 5.1.3. I'm not using Turbolinks. Sorry and thanks =). — PrimeTimeTran
– PrimeTimeTran, Commented Aug 20, 2017 at 6:53
Correction, I wasn't originally using Turbolinks in my Gemfile but when I run bundle show it lists Turbo links as a dependency, I guess I am then turbolinks (5.0.1) turbolinks-source (5.0.3) — PrimeTimeTran
– PrimeTimeTran, Commented Aug 20, 2017 at 7:01

MarsAtomic · Accepted Answer · 2017-08-20 07:18:02Z

1

You're relying on a standard document.ready event to load your function:

$(document).ready(function() {

When you're using Turbolinks with Rails 5, you want to use the Turbolinks load function, like this:

$( 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.

answered Aug 20, 2017 at 7:18

MarsAtomic

10.7k5 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PrimeTimeTran Over a year ago

Mars as soon as you asked me about turbolinks earlier I implemented this change. However the behavior is still hit or miss. Here's a video showing. youtube.com/watch?v=bS-Rc9Qxvt0

PrimeTimeTran Over a year ago

I also find it strange that the comment button works every time, but the reply button doesn't, just giving you as much information as I can. Thanks for your help thus far.

Collectives™ on Stack Overflow

jQuery sometimes doesn't work with Ruby on Rails

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related