Turbostreams not working after addition of stimulus in HTML
Published: 2021-10-23 17:09:38

I'm a newbie and this is my first post so apologies if anything is unclear - your help is hugely appreciated!

I'm working on a non-commercial site just to learn some Rails & Hotwire basics. Here's the recently uploaded Heroku live site if you're curious: [fodderlist.com](https://www.fodderlist.com/)

[Git repo](https://github.com/floraheathcote/fodderlist)

I have a Meal Plan page, which contains many Days, each with many Meals, each with many Meal Recipes.

Previously, I had the code below (without any Stimulus), which worked perfectly with turbostreams, with each bit rendering when I made changes without reloading the whole page.

Then... I added a Stimulus controller to show/hide the Meal Recipe (code bottom of page). The Stimulus Show/Hide bits work perfectly but just that one change means that now when I add a new MealRecipe or change portion quantities, the whole page is loaded and not just the turbo frame. Adding the divs for the Stimulus has broken turbolinks functionality. **Why is this ?!! Please help!** Thanks in advance.

##### _meal_recipe.html.erb (before Stimulus added)
```
<%= turbo_frame_tag("meal_recipe#{meal_recipe.id}") do %>

    <div class="row">
        <div class="col-1">
            <%= image_tag(meal_recipe.recipe.main_image, class: "rounded-circle", size: '60', style: 'object-fit: cover')  %> 
        </div>
        <div class="col-4">
            <h6><%= meal_recipe.recipe.name %></h6>
        </div>
    </div>

    <% if meal_plan.status=="draft" %>
        <%= render "meal_recipe_portion_info", leftover: leftover, meal_recipe: meal_recipe %>
    <% else %>
        <span class="badge bg-light text-dark">
            <%= pluralize(round_nicely(meal_recipe.portions), "portion") -%>
        </span>
    <% end %>

    <%= turbo_stream_from("meal_recipe_ingredients_list#{meal_recipe.id}") %>
    <%= turbo_frame_tag("meal_recipe_ingredients_list#{meal_recipe.id}") do %>

        
                <small class="text-muted"><br>
                        <% meal_recipe.meal_ingredients.includes(:ingredient).each do |meal_ingredient| %>
                            <%= render 'meal_ingredients/meal_ingredient', meal_ingredient: meal_ingredient, meal_plan: @meal_plan %>
                        <% end %>
                </small>

                <small> Add ingredient to this recipe: </small>
                <%= turbo_frame_tag "meal_ingredient_form_mealrecipe#{meal_recipe.id}" do %>
                    <%= render 'meal_ingredients/form',  url: meal_recipe_meal_ingredients_path(meal_recipe), meal_ingredient: @meal_ingredient, method: :post, id: "mealrecipe#{meal_recipe.id}mealingredient#{@meal_ingredient.id}" %>
                <% end %><br>
           
        </div>
    <% end %>
<% end %>
```



##### _meal_recipe.html.erb (after Stimulus added)
```
<%= turbo_frame_tag("meal_recipe#{meal_recipe.id}") do %>

    <div class="row">
        <div class="col-1">
            <%= image_tag(meal_recipe.recipe.main_image, class: "rounded-circle", size: '60', style: 'object-fit: cover')  %> 
        </div>
        <div class="col-4">
            <h6><%= meal_recipe.recipe.name %></h6>
        </div>
    </div>

    <% if meal_plan.status=="draft" %>
        <%= render "meal_recipe_portion_info", leftover: leftover, meal_recipe: meal_recipe %>
    <% else %>
        <span class="badge bg-light text-dark">
            <%= pluralize(round_nicely(meal_recipe.portions), "portion") -%>
        </span>
    <% end %>

    <%= turbo_stream_from("meal_recipe_ingredients_list#{meal_recipe.id}") %>
    <%= turbo_frame_tag("meal_recipe_ingredients_list#{meal_recipe.id}") do %>

        <div data-controller="toggle" data-toggle-visible-value="show" 
                                    data-toggle-hide-text="Hide ingredients" 
                                    data-toggle-show-text="Show/add ingredients"
                                    data-toggle-hide-on-load-value=true><br>
            
            <button type="button" class="btn btn-primary " 
                data-action="click->toggle#showhide"
                data-toggle-target="buttonText">
                Show/add ingredients
            </button><br>

            <div data-toggle-target="content">
                <small class="text-muted"><br>
                        <% meal_recipe.meal_ingredients.includes(:ingredient).each do |meal_ingredient| %>
                            <%= render 'meal_ingredients/meal_ingredient', meal_ingredient: meal_ingredient, meal_plan: @meal_plan %>
                        <% end %>
                </small>

                <small> Add ingredient to this recipe: </small>
                <%= turbo_frame_tag "meal_ingredient_form_mealrecipe#{meal_recipe.id}" do %>
                    <%= render 'meal_ingredients/form',  url: meal_recipe_meal_ingredients_path(meal_recipe), meal_ingredient: @meal_ingredient, method: :post, id: "mealrecipe#{meal_recipe.id}mealingredient#{@meal_ingredient.id}" %>
                <% end %><br>
            </div>
        </div>
    <% end %>
<% end %>
```