Turbostreams not working after addition of stimulus in HTML

floraheathcote — Sat, 23 Oct 2021 17:09:38 +0000

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

Git repo

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 %>

DEV Community: floraheathcote

Turbostreams not working after addition of stimulus in HTML

_meal_recipe.html.erb (before Stimulus added)

_meal_recipe.html.erb (after Stimulus added)