Edit view issues with hstore data

[tylerpolzin]

Hi Schneems, I know this is a pretty old piece of code you've written here, but it is the only thing I could find that fits my use case exactly. I'm fairly new to coding, and having an existing bit of code to go off of helped me a ton, so thanks for that! On to my issue...

I was able to add some test hstore data to my Products table (my version of data is details):

details: {"Color"=>"Black", "Origin"=>"Canada", "Material"=>"Steel", "Peggable"=>"Yes", "Test Field"=>"Test Description", "Includes Screws"=>"Yes"}

Now the problem is that when I go to the "Edit" view for the product, this is what I see: https://i.imgur.com/AkXmao0.png

Any idea what's going on here?

<div class="container attributeContainer" style="width:100%;">
  <table class="table table-bordered" id="IAItemSelectContainer">
    <thead></thead>
    <tbody class="body">
      <%= f.fields_for :details, @product.details do |d| %>
        <% @product.details.try(:each) do |key, value| %>
            <tr class="row">
              <td>
                <%= text_field_tag key, key, :class => 'text_field dynamicAttributeName' %>
              </td>
              <td>
                <%= d.text_field key, :class => 'text_field', :value => value %>
              </td>
              <td>
                <a herf='#' class='btn removeRow'>X</a>
              </td>
            </tr>
        <% end %>
      <%- end -%>
      <tr class='row attributeTemplate <%= 'hide' if @product.details.present? %>'>
        <td>
          <input class='text_field dynamicAttributeName' id='' name='' placeholder='New Attribute name' type='text' />
        </td>
        <td>
          <input class='text_field' id='bar' name='' placeholder='value' type='text'  />
        </td>
        <td>
          <a herf='#' class='btn removeRow'>X</a>
        </td>
      </tr>
    </tbody>
  </table>
  <%= link_to 'Add Attribute', '#', :class => 'btn addAttribute' %>
</div>

$(document).on("turbolinks:load", function() {
  $('.attributeContainer').on('keyup', '.dynamicAttributeName', function(event){
    var nameElem = $(this);
    var valueElem = nameElem.closest('.row').children('td').children('.text_field');
    var value = nameElem.val();
    valueElem.attr('id', 'product_details_'+value);
    valueElem.attr('name', 'product[details]['+value+']');
  });
  $('.attributeContainer').on('click', '.removeRow', function(){
    $(this).closest('.row').html('');
  });
  $('.addAttribute').on('click', function(e){
    e.preventDefault();
    var contents = "<tr class='row'>" + $('.attributeTemplate').html() + '</tr>';
    $('.body').append(contents);
  });
});

If it makes a difference, I have an index pointed at details
t.index ["details"], name: "index_products_on_details", using: :gin

All other views work just fine. It's only the Edit view that is throwing the extra code at me. Any help is appreciated!

[tylerpolzin]

I did a quick little monkey patch in the form of this JS:

  $('#builder').closest('.row').html('');
  $('#namespace').closest('.row').html('');
  $('#parent_builder').closest('.row').html('');
  $('#child_index').closest('.row').html('');

Would still like to know why it's happening!