How do I make javascript change the element of specific element in rails

user_14336796 0
Viewed 56

I have a little bit of a problem with the id names for my rails app where I want javascript to disable/enable a field with the press of a button. I have a big index page where people can rate a bunch of pictures on the index page itself. For this I am using the @posts.each do |post| method. The user should then be able to rate the picture with a slider, and after the slider was used, the range should be disabled. If the user wants to change the rating it is possible to click on "CHANGE", which enables the slider again. Problem I have right now is with the enable function. I have a bunch of posts on the index page, and and all of the sliders and buttons have the same class names and ids. I have tried to give each slider and button a specific id with id:'ratingPost#{post.id}', but the problem then is that I cannot get javascript to know what is the postid that was just clicked. Can you help me here? Thank you very much! My code is here:

#posts_index.html.erb

<% @posts.each do |post| %> 
  ...
    <% if post.ratings.find_by(user_id: current_user.id) %>
      <%= form_for [post, post.ratings.find_by(user_id: current_user.id)]  do |f| %>
        <%= f.range_field :score, class:"form-control-range slider", id:"ratingPost", onMouseUp:"submit()", onTouchEnd:"submit()", :disabled => true, data: { source: post} %>
      <% end %>
    <% else %>
      <%= form_for [post, @rating]  do |f| %>
        <%= f.range_field :score, class:"form-control-range slider", id:"formControlRange", onMouseUp:"submit()", onTouchEnd:"submit()"%>
      <% end %>
    <% end %>
  ...
        <% if post.ratings.find_by(user_id: current_user.id) %>
          <h2><%= post.ratings.where(user_id: current_user.id).last.score %>%</h2>
          <button id="RatingChangeButton"><p>CHANGE</p></button>
        <% end %>
      </div>
    </div>
  </div>
<% end %>

<script>
  document.getElementById("RatingChangeButton").addEventListener("click", enableRating);
  function enableRating() {
    document.getElementById("ratingPost").disabled=false;
  }
</script>
ruby-on-rails html javascript
1 Answers

Ideally you should not have multiple elements with the same ID in your HTML, instead use class.

Now to your question, what you can do is store the id of the post in a data attribute for your buttons and rating fields, and access that id in the javascript function to identify the corresponding slider. Something like,

https://codepen.io/anujmiddha/pen/NWRwwLL

<p>Post 1: <input class="ratingPost" data-post-id="1" disabled></p>
<p>Post 2: <input class="ratingPost" data-post-id="2" disabled></p>

<p>
  <button class="RatingChangeButton" data-post-id="1" onClick="enableRating(this)">
    <p>CHANGE 1</p></button>
</p>

<p>
  <button class="RatingChangeButton" data-post-id="2" onClick="enableRating(this)">
    <p>CHANGE 2</p></button>
</p>

function enableRating(view) {
  let element = document.querySelector('[data-post-id="' + view.dataset.postId + '"],[class="RatingChangeButton"]');
  element.disabled = false;
  element.value = "enabled";
}
user_4933210
Related