Unexplained behaviour with AJAX request including CSS classes - html

Question

A page has a function to choose some values for CSS class attributes.
The rails application show view has a style block and a div using those 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>
Lower in the page are form_with forms to change individual attributes values of CSS items via AJAX. The process updates as expected. The relevant js file for the rendering has two lines, one to display the new value with the form, the other to render (what was expected) a new version of the block with the new attribute (thus creating a before-after view). The second line invokes:
$("#bg_newrender").html('<%=j (render 'promolayout') %>');
the promolayout partial invokes 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>
and the div with the id='bg_newrender' renders with the updated CSS attributes as expected.
What was not expected was that the initial div with id='bg_<%= #promolayout.id %>' also renders with the new CSS attributes.
The classes have the same name, but the target div has different IDs.
Why is a differently IDed object on the page also being rendered with the updated class attributes?

Answer 1

If you want to add styling dynamically to a single element instead use inline styling.
Usually we frown upon the style attribute as the rule of thumb is to separate content and presentation. But if you are dynamically generating an inline CSS tag with ERB the separation of concerns went out the window a long time ago and your really just making a mess out of your view.
In your Rails app you'll want to write a helper or builder class that creates the div tag with a style attribute.
Which would look something like:
module PromoHelper
def promo_component_tag(promo, **opts, &block)
options = opts.reverse_merge(
class: 'promo-box', # or whatever
style: hash_to_inline_style({
background_color: promo.background_color,
border_box_radius : promo.border_box_radius,
color: promo.color
})
)
content_tag :div, options, &block
end
private
def hash_to_inline_style(hash)
hash.map do |k,v|
"#{k.to_s.dasherize}: #{v};"
end.join
end
end
This is an extremely simplified example and will need to be adapted to your use case.
And you then call it in your view:
<% #promotions.each do |p| %>
<%= promo_component_tag(promo) do %>
# ...
<% end %>
<% end %>
When it comes to handling the actual user interaction you can either submit the form and have Rails re-render the view and replace the contents in the DOM or you can use element.style or jQuery.css to change the styling optimistically on the fly and just send the AJAX call in the background to update the database values. The latter will give a much snappier feel and ties in nicely if you want to let users preview the change.