By default, the new.html.erb needs to show the content of public question partial. When clicking on the buttons, the button needs to show its associated contents dynamically (public question partial for public question button and private question partial for private question button). The parials will do get and post request. However, when I click onto buttons, it shows "Content missing". What can I do to fix this error? I need to use turbo, no JS.
app/views/questions/new.html.erb
<div class="w-full">
<%= turbo_frame_tag "questions-container" do %>
<div class="container mx-auto mb-10">
<div class="mx-5 lg:mx-40">
<div class="w-full flex">
<div class="flex border border-black flex-col">
<div class="flex w-full flex-col">
<div class="tab flex w-full">
<div class="flex w-1/2 justify-center items-center tablinks first">
<%= image_tag('globe.png', alt: 'Public Question', class: 'w-6 h-6 gray-icon') %>
<%= image_tag('globe.png', alt: 'Public Question', class: 'w-6 h-6 colored-icon') %>
<%= link_to "Public Question", questions_path(status: "public_question"), class: "px-2", data: { turbo_frame: 'questions-container' } %>
</div>
<div class="flex w-1/2 justify-center items-center tablinks second">
<%= image_tag('lock.png', alt: 'Private Question', class: 'w-6 h-6 gray-icon') %>
<%= image_tag('lock.png', alt: 'Private Question', class: 'w-6 h-6 colored-icon') %>
<%= link_to "Private Question", questions_path(status: "private_question"), class: "px-2", data: { turbo_frame: 'questions-container' } %>
</div>
</div>
</div>
<div id="questions-container">
<%= turbo_frame_tag "public-question" do %>
<%= render "public_question" %>
<% end %>
</div>
</div>
</div>
</div>
</div>
<% end %>
</div>
app/views/questions/_public_question.html.erb
<div id="To-Me" class="tabcontent w-full flex">
<div class="flex w-full flex-col">
<div class="flex w-full flex-col">
<div class="flex flex-col">
<div class="flex space-x-3 w-full items-center">
<div class="flex h-10 w-10">
<%= image_tag('profile.png', alt: 'Profile Image' , class: 'w-full' ) %>
</div>
<div class="flex flex-col space-y-1">
<div class="flex space-x-2 items-center">
<%= render "users/current_user" %>
</div>
<div class="font-roboto text-sm font-normal offset-color">
<%= current_user.designation.name %>, <%= current_user.department.name %>, <%= current_user.zone.name %>
</div>
</div>
</div>
<div class="flex pt-3">
<input type="hidden" name="question[is_private]" value="false">
<input type="content" id="content" name="question[content]"
class="w-full font-roboto font-normal text-lg h-20" placeholder="What is your Question?" required />
</div>
<div class="flex py-4 space-x-2 w-full">
<% if @question.attached_image.attached? %>
<%= image_tag @question.attached_image, alt: "Uploaded Image" , class: "w-full" %>
<% end %>
</div>
</div>
<div class="flex border border-black p-4 border-b w-full">
<div class="flex space-x-10 w-1/2">
<div
class="font-roboto font-normal text-xl border border-blue px-5 py-2 rounded-full m-1 text-blue flex space-x-2 justify-center items-center">
<button>
Add topics
</button>
</div>
</div>
<div class="flex space-x-1 justify-end w-1/2 items-center">
<button
class="flex items-center font-roboto font-normal text-xl border border-gray px-5 py-2 rounded-full m-1 text-gray">
<%= image_tag("upload-2.png", class: "w-6 h-6" , alt: "Bronze Contributor" ) %>
<span class="ml-2">Upload Image</span>
</button>
</div>
</div>
<div class="flex w-full border border-black p-4 border-b">
<div class="flex w-full space-x-3 items-center">
<button class="flex font-roboto text-base">
Tag Someone
</button>
<div class="flex space-x-2">
<div class="flex items-center font-roboto font-bold text-base">
<%= image_tag("person-add.png", alt: "Add Person" , class: "w-6 h-6" ) %>
<span class="ml-2">Add a person</span>
<input class="hidden" type="file" />
</div>
</div>
<p class="mr-2 py-2 text-gray italic font-roboto text-sm text-right">
*Optional
</p>
</div>
</div>
</div>
<div class="flex bg-custom-gray-2 justify-center items-center border p-4 mt-4 w-full">
<button type="submit" class="w-full px-4 rounded inline-flex items-center justify-center">
Post Question
</button>
</form>
</div>
</div>
</div>
app/views/questions/_private_question.html.erb
<div id="By-Me" class="tabcontent w-full flex">
<div class="flex w-full flex-col">
<div class="flex flex-col">
<div class="flex space-x-3 w-full items-center">
<div class="flex h-10 w-10">
<%= image_tag('profile.png', alt: 'Profile Image' , class: 'w-full' ) %>
</div>
<div class="flex flex-col space-y-1">
<div class="flex space-x-2 items-center">
<%= render "users/current_user" %>
</div>
<div class="font-roboto text-sm font-normal offset-color">
<%= current_user.designation.name %>, <%= current_user.department.name %>, <%= current_user.zone.name %>
</div>
</div>
</div>
<div class="flex pt-3">
<input type="hidden" name="question[is_private]" value="true">
<input type="content" id="content" name="question[content]" class="w-full font-roboto font-normal text-lg h-20"
placeholder="What is your Question?" required />
</div>
<div class="flex py-4 space-x-2 w-full">
<% if @question.attached_image.attached? %>
<%= image_tag @question.attached_image, alt: "Uploaded Image" , class: "w-full" %>
<% end %>
</div>
</div>
<div class="flex border border-black p-4 border-b w-full">
<div class="flex space-x-10 w-1/2">
<div
class="font-roboto font-normal text-xl border border-blue px-5 py-2 rounded-full m-1 text-blue flex space-x-2 justify-center items-center">
<button>
Add topics
</button>
</div>
</div>
<div class="flex space-x-1 justify-end w-1/2 items-center">
<button
class="flex items-center font-roboto font-normal text-xl border border-gray px-5 py-2 rounded-full m-1 text-gray">
<%= image_tag("upload-2.png", class: "w-6 h-6" , alt: "Bronze Contributor" ) %>
<span class="ml-2">Upload Image</span>
</button>
</div>
</div>
<div class="flex w-full border border-black p-4 border-b">
<div class="flex w-full space-x-3 items-center">
<div class="flex space-x-2">
<div class="flex items-center font-roboto text-base">
<p>Ask this question privately to:</p>
</div>
<div class="flex items-center space-x-2">
<div
class="flex items-center justify-center text-xl font-roboto bg-custom-gray border border-none rounded-full cursor-pointer">
<%= image_tag("person-add.png", alt: "Add Person" , class: "w-6 h-6" ) %>
<span class="ml-2">Add a person</span>
<input class="hidden" type="file" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex bg-custom-gray-2 justify-center items-center border p-4 mt-4 w-full">
<button type="submit" class="w-full px-4 rounded inline-flex items-center justify-center">
Post Question
</button>
</form>
</div>
</div>
app/controllers/questions_controller.rb
def new
@question = Question.new
respond_to do |format|
format.html
format.turbo_stream do
if params[:status] == "public_question"
render turbo_stream: turbo_stream.replace(
:questions_container,
partial: 'questions/public_question',
locals: { question: @question }
)
elsif params[:status] == "private_question"
render turbo_stream: turbo_stream.replace(
:questions_container,
partial: 'questions/private_question',
locals: { question: @question }
)
end
end
end
config/routes.rb
# Question and Answer routes
resources :questions, concerns: :likable do
get 'favorite', on: :member
resources :answers, shallow: true, concerns: :likable
end
