Search code examples
ruby-on-railsruby-on-rails-6turbolinksturbolinks-5turbo-rails

Turbo frame causes unexpected page layout


I currently used turbo-frame in a project which was using turbo-links, after I found that all the pages are disrupted by turbo-frames, such as the dropdown list became something looks like a input area (Sorry couldn't find the picture of that problem). But this was solved by replacing turbo-links with turbo-rails.

However, currently I found a new issue, there are some codes in the project looks like below:

def update
   ...
   if @student.update(update_params)
       redirect_to @student, notice: "update success!"
   else
       render :new, status: :unprocessable_entity
   end
end

The problem occurs when it enters the "else" block, my dropdown lists on that page will behave wrongly, and the some dropdown are in the side bar, which means it affects the whole style. I'm using boostrap 5 and ruby on rails 6.

There are not much solution I can find on google (There is one similar question asked but no solution for that, and I didn't use lazy load), so I don't really know how to handle this problem, I only tried something like reinstall turbo-rails but can't actually solve the issue.

[EDIT] Adding <script>data-turbo-eval=false</script> to application.html not working

[EDIT] Adding <%= javascript_pack_tag 'application', 'data-turbo-eval': false %> to application.html not working

[EDIT] Adding data-turbo-eval=false to script tags is not working


Solution

  • Solved my own problem, I added Turbo.session.drive=false to the "application.js" and it now works fine. But I still have no idea why it will work by disabling the turbo drive. The project used Turbolinks and as far as I know, Turbo drive is just an updated version of it, but there was no issues when Turbolinks was used. Would be nice if someone could explain that.