One of the functionalities on a page involves selecting values for CSS class attributes.
Within the rails application show view, there is a style block and a div that utilizes these styles:
<style>
#bg_<%= @promolayout.id %> {
background-color: <%= @background.first.background_color %>;
color: <%= @background.first.color %>;
border-radius: <%= @background.first.border_box_radius %>; }
</style>
<div class='grid-x grid-padding-x'>
<div class='cell small-3' id='bg_<%= @promolayout.id %>'>
[...]
</div>
<div class='cell small-3' id='bg_newrender'> </div>
</div>
Further down the page, there are form_with forms that allow for changing individual attribute values of CSS items through AJAX. The update process functions correctly. In the associated js file for rendering, there are two lines - one to display the new value with the form and the other to render a new version of the block with the updated attribute (resulting in a before-after view). The second line triggers:
$("#bg_newrender").html('<%=j (render 'promolayout') %>');
The promolayout partial also references the same CSS classes:
<style>
#bg_<%= @promocomponent.promolayout_id %> {
background-color: <%= @background.first.background_color %>;
color: <%= @background.first.color %>;
border-radius: <%= @background.first.border_box_radius %>;
}
</style>
As expected, the div with the id='bg_newrender' renders with the updated CSS attributes.
However, an unexpected behavior occurs where the initial div with
id='bg_<%= @promolayout.id %>'Both classes have the same name, but the target divs have different IDs.
The question remains - why is an object with a unique ID on the page also being rendered with updated class attributes?