I search trough internet, but I only find 'how to render partial after update' etc. For now I click on the image, page is refereshing and partial appear. But this refreshing part is... not good for me, so I wonder.. Can I render partial (or replace if I rendered one already) with Turbo?
Ruby version: 3.0.4 Rails version: 6.1.6
My view:
.container.flex.flex-col.mx-auto.w-full.py-16
.text-center
%h1.text-2xl.font-extrabold.text-gray-700.md:text-4xl
= t('pages.partners.title')
%p.mt-2.md:text-xl
= t('pages.partners.subtitle')
%h2.my-6.text-xl.font-extrabold.text-gray-700.md:text-2xl
= t('pages.partners.foreign_partners')
.grid.grid-cols-5.gap-x-4
= link_to partners_path(foreign_partner: '2'), class: 'border-2 border-black transform hover:-translate-y-1 hover:scale-110' do
.flex.h-full.w-full
= image_tag '/partners/logo2.png', size: '100x100', class: 'h-full w-full p-1 object-scale-down'
= link_to partners_path(foreign_partner: '1'), class: 'border-2 border-black transform hover:-translate-y-1 hover:scale-110' do
.flex.h-full.w-full
= image_tag '/partners/logo1.png', size: '100x100', class: 'h-full w-full p-1 object-scale-down'
= link_to partners_path(foreign_partner: '3'), class: 'border-2 border-black transform hover:-translate-y-1 hover:scale-110' do
.flex.h-full.w-full
= image_tag '/partners/logo3.png', size: '100x100', class: 'h-full w-full p-1 object-scale-down'
= link_to partners_path(foreign_partner: '4'), class: 'border-2 border-black transform hover:-translate-y-1 hover:scale-110' do
.flex.h-full.w-full
= image_tag '/partners/logo4.png', size: '100x100', class: 'h-full w-full p-1 object-scale-down',
-if params[:foreign_partner]
= render 'pages/partials/foreign_partners'
%h2.text-center.my-6.text-xl.font-extrabold.text-gray-700.md:text-2xl
= t('pages.partners.domestic_partners')
.grid.grid-cols-5.gap-x-4
%div
= link_to partners_path(domestic_partner: '5'), class: 'border-2 border-black transform hover:-translate-y-1 hover:scale-110' do
.flex.h-full.w-full
= image_tag '/partners/logo5.png', size: '100x100', class: 'h-full w-full p-1 object-scale-down'
= link_to partners_path(domestic_partner: '6'), class: 'border-2 border-black transform hover:-translate-y-1 hover:scale-110' do
.flex.h-full.w-full
= image_tag '/partners/logo6.png', size: '100x100', class: 'h-full w-full p-1 object-scale-down'
-if params[:domestic_partner]
= render 'pages/partials/domestic_partners'
My 'foreign partners' partial:
.flex.flex-col.border-2.mt-6.p-8.relative.sm:flex-row.md::flex-row.lg::flex-row.xl:flex-row.2xl:flex-row{ :role => "region", :'aria-label' => "#{t("pages.partners.partners.#{params[:foreign_partner]}.company_name")}" }
.absolute.right-0.top-0
= link_to 'X', partners_path, class: 'w-7 h-7 bg-gray-100 flex justify-center items-center hover:bg-gray-300', role: "button", 'aria-label': "#{t("a11y.close") + " " + t("pages.partners.partners.#{params[:foreign_partner]}.company_name")}"
.flex.flex-col.mr-2.w-full{class: 'sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2 2xl:w-1/2'}
.flex.justify-center.items-center.w-full.h-72
= image_tag "/partners/#{params[:foreign_partner]}-logo.png", size: '250x250', class: 'object-scale-down p-1', alt: "Logo #{t("pages.partners.partners.#{params[:foreign_partner]}.company_name")}"
%p.py-3.text-xl.font-extrabold
= t("pages.partners.partners.#{params[:foreign_partner]}.company_name")
.bg-gray-100.h-max.flex.items-center
= image_tag '/partners/link.ico', size: '25x25', alt: "#{t("a11y.link")}"
= link_to t("pages.partners.partners.#{params[:foreign_partner]}.website_link"), t("pages.partners.partners.#{params[:foreign_partner]}.website_link"), target: "_blank", class: 'ml-3 hover:text-primary-500'
.bg-gray-100.my-2.h-max.flex.items-center
= image_tag '/partners/email.ico', size: '25x25', alt: 'E-Mail:'
= mail_to t("pages.partners.partners.#{params[:foreign_partner]}.company_email"), t("pages.partners.partners.#{params[:foreign_partner]}.company_email"), class: 'ml-3 hover:text-primary-500'
.bg-gray-100.h-max.flex.items-center
= image_tag '/partners/phone.ico', size: '25x25', alt: "#{t("a11y.phone")}"
%span.ml-3= t("pages.partners.partners.#{params[:foreign_partner]}.company_phone_number")
.flex.flex-col.border-t-2.mt-3.w-full.sm:border-t-0.sm:border-l-2.sm:mt-0{class: 'sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2 2xl:w-1/2'}
.flex.flex-col.p-4.overflow-y-auto.h-96.md:p-8
%p.text-2xl.font-extrabold= t('pages.partners.about_company')
%p.mt-5.text-justify.overflow-y-auto= t("pages.partners.partners.#{params[:foreign_partner]}.content")
My 'domestic_partners' partial:
.flex.flex-col.border-2.mt-6.p-8.relative.sm:flex-row.md::flex-row.lg::flex-row.xl:flex-row.2xl:flex-row{ :role => "region", :'aria-label' => "#{t("pages.partners.partners.#{params[:domestic_partner]}.company_name")}" }
.absolute.right-0.top-0
= link_to 'X', partners_path, class: 'w-7 h-7 bg-gray-100 flex justify-center items-center hover:bg-gray-300', role: "button", 'aria-label': "#{t("a11y.close") + " " + t("pages.partners.partners.#{params[:domestic_partner]}.company_name")}"
.flex.flex-col.mr-2.w-full{class: 'sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2 2xl:w-1/2'}
.flex.justify-center.items-center.w-full.h-72
= image_tag "/partners/#{params[:domestic_partner]}-logo.png", size: '250x250', class: 'object-scale-down p-1', alt: "Logo #{t("pages.partners.partners.#{params[:domestic_partner]}.company_name")}"
%p.py-3.text-xl.font-extrabold
= t("pages.partners.partners.#{params[:domestic_partner]}.company_name")
.bg-gray-100.h-max.flex.items-center
= image_tag '/partners/link.ico', size: '25x25', alt: "#{t("a11y.link")}"
= link_to t("pages.partners.partners.#{params[:domestic_partner]}.website_link"), t("pages.partners.partners.#{params[:domestic_partner]}.website_link"), target: "_blank", class: 'ml-3 hover:text-primary-500'
.bg-gray-100.my-2.h-max.flex.items-center
= image_tag '/partners/email.ico', size: '25x25', alt: 'E-Mail:'
= mail_to t("pages.partners.partners.#{params[:domestic_partner]}.company_email"), t("pages.partners.partners.#{params[:domestic_partner]}.company_email"), class: 'ml-3 h hover:text-primary-500'
.bg-gray-100.h-max.flex.items-center
= image_tag '/partners/phone.ico', size: '25x25', alt: "#{t("a11y.phone")}"
%spna.ml-3= t("pages.partners.partners.#{params[:domestic_partner]}.company_phone_number")
.flex.flex-col.border-t-2.mt-3.w-full.sm:border-t-0.sm:border-l-2.sm:mt-0{class: 'sm:w-1/2 md:w-1/2 lg:w-1/2 xl:w-1/2 2xl:w-1/2'}
.flex.flex-col.p-4.overflow-y-auto.h-96.md:p-8
%p.text-2xl.font-extrabold= t('pages.partners.about_company')
%p.mt-5.text-justify.overflow-y-auto= t("pages.partners.partners.#{params[:domestic_partner]}.content")
controller:
def partners
set_meta_tags(title: t('navbar.partners'))
end
Ok, so I did it like this: In routes.rb I added this route:
post 'partners/:partner', to: 'pages#partners_partial', as: 'partners_partial'
In pages_controller.rb:
def partners
set_meta_tags(title: t('navbar.partners'))
end
def partners_partial
@parameter = params[:partner]
respond_to do |format|
format.turbo_stream
end
end
In partials I removed 'params[..._partner] and replace it with local variable 'parameter'.
Next i change 'partners_path', to "partners_partial_path(partner: 'string')" in partial and view.
And last part. I Added 'partners_partial.turbo_stream.haml' file in 'pages' directory.
-if @parameter == 'close'
= turbo_stream.replace 'partner' do
%div#partner
-else
= turbo_stream.replace 'partner' do
= render partial: 'pages/partials/foreign_partners', locals: {parameter: @parameter}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.