DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
floraheathcote
floraheathcote

Posted on

Turbostreams not working after addition of stimulus in HTML

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 %>
Enter fullscreen mode Exit fullscreen mode
_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 %>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠