title: Rails 5 javascript for Ajax controlled partial is acting strangely & it can't initialize bootstrap-star-rating inputs as it should
body: <p>I am using <a href="https://github.com/kartik-v/bootstrap-star-rating" rel="nofollow noreferrer">this js library  (bootstrap-stars-rating)</a> to provide star ratings using jquery in my Rails 5 application</p>
  
  <p>It works well except that if I am calling it inside a partial that is renerdered by Ajax helper, it will not initialize the javascript code necessary to render the stars</p>
  
  <p>I tried to solve this by making a globally accessible function in my webpacker init file for that library like this:</p>
  
  <pre><code>import "bootstrap-star-rating";
  import "bootstrap-star-rating/css/star-rating.css";
  import "bootstrap-star-rating/js/star-rating.js";
  import "bootstrap-star-rating/themes/krajee-fas/theme.min.css";
  
  const rating_options = {
    size: 'xs',
    showCaption: false,
    step: 0.5,
    filledStar: '&lt;i class="fas fa-star"&gt;&lt;/i&gt;',
    emptyStar: '&lt;i class="far fa-star"&gt;&lt;/i&gt;',
    theme: 'krajee-fas',
    hoverOnClear: false
  }
  // initialize the star rating across the application
  const initStarRating = () =&gt; {
    document.addEventListener("turbolinks:load", () =&gt; {
      console.log('hey I was run');
      $(".bootstrap-rating").rating(rating_options);
    }, {passive: true});
  }
  
  // initialize specific star rating in a specific form for ajax 
  const initStarRatingForObj = (obj) =&gt; {
    {
      console.log(obj)
      console.log(obj.find(".bootstrap-rating"))
      obj.find(".bootstrap-rating").rating(rating_options);
    }
  }
  
  // binding the function so I can access it globally
  window.initStarRatingForObj = initStarRatingForObj
  
  export { initStarRating }
  </code></pre>
  
  <p>The problem is that if I call this function above in the js.erb file that renders the partial, passing the correct object to the function <code>initStarRatingForObj</code>, it will break &amp; give error that <strong><em>it can't find the <code>rating()</code></em></strong> function ((that one called in the initStarRating))</p>
  
  <p>This is very weird as the <code>rating()</code> function is already available &amp; working in that file, so how does it work in <code>initStarRating()</code> but not in the <code>initStarRatingForObj()</code> ?</p>
  
  <p>I have been looking into this for hours but it doesn't work, I hope someone can point out what the issue is.</p>
  
  <p>Note:
  The same partial is working well in the same page <strong><em>if it is not rendered</em></strong> by Ajax response</p>