Rails AJAX和Webpacker

Question

I am using 5.2 with webpacker. It's a simple restaurant app with reviews.

The reviews have a column content and rating. In my app/javascript/plugins I run a little script that creates a star rating on the form, which makes the input for rating look like stars,( https://github.com/antennaio/jquery-bar-rating ) which works fine.

However, I display the reviews and the review form on the restaurants show page and when submitting do an AJAX request which renders the following js - basically, it appends the new review to the list of reviews for this restaurant and then I refresh the whole form to get rid of the input. If the review does not get saved, I just refresh the form.

function refreshForm(innerHTML) {
  const newReviewForm = document.getElementById('new_review');
  newReviewForm.innerHTML = innerHTML;
}

function addReview(reviewHTML) {
  const reviews = document.getElementById('reviews');
  reviews.insertAdjacentHTML('beforeend', reviewHTML);
}

<% if @review.errors.any? %>
  refreshForm('<%# j render "reviews/form", restaurant: @restaurant, review: @review %>');
<% else %>
  addReview('<%= j render "reviews/show", review: @review %>');
  refreshForm('<%= j render "reviews/form", restaurant: @restaurant, review: Review.new %>');

<% end %>

This AJAX request also works as intended, but when the simple form gets refreshed, the input for rating is just a normal dropdown and not the stars from the plugin anymore. How can I call the script from app/javascript/plugin/init_star.js inside my AJAX js, which is inside the view folder?

I also tried to have the star script in a pack and call the <%= javascript_pack_tag> % only on the restaurants/show or even in the partial rendering the form (and refreshing it). I need to call the star function again and I don't know how to access it.

Answer 1

You could do a few different things. The simplest option is likely to duplicate your initialize code a bit and simply reinitialize the stars plugin in refreshForm taking care to destroy the existing one first. Something like this (taken from readme, may not be your initialization)

function refreshForm(innerHTML) {
  const newReviewForm = document.getElementById('new_review');
  newReviewForm.innerHTML = innerHTML;
  // destroy the existing one
  $('#example').barrating('destroy');
  // insert your custom initialization here
  $('#example').barrating({
    theme: 'fontawesome-stars'
  });
}

If you want to DRY this up and are looking for architecture advice, I would generally say that I trend towards making rails a pure JSON api backend and handle the frontend code entirely through your pack via webpacker.

No rendering of JS or html via ajax. This depends a bit on your own preferences and how the app is currently built though. Are you planning mobile apps for example? Going webpacker with a strong separation of an API and a frontend codebase will be helpful. Is this just a webapp? Maybe drop webpacker and lean into the more traditional Rails-y stuff like Turbolinks and what your are doing here with rendering html via ajax.