Wrong image url is passed for one form and correct to another form from partial in Rails 4

Question

I am using a partial that is rendered in two forms belonging to two different controllers as below:

update_user.html.erb

<%= form_with model: @user,
                            url: {
                              controller: :profile,
                              action: :update_user
                            },
                            method: :post,
                            local: true do |f| %>

                <%= render partial: 'shared/user_registration_fields', locals: { f: f, profile: @profile } %>

                <%= f.submit 'Confirm' %>

              <% end %>

new_user.html.erb

<%= form_for @user,
                   url: {
                     action: :register_user
                    },
                    method: :post,
                    local: true do |f| %>

                <%= render partial: 'shared/user_registration_fields', locals: { f: f, profile: @profile } %>

                <%= f.submit 'Confirm' %>

              <% end %>

One field in partial is as below:

partial.html.erb

<%= f.fields_for :profile, profile do |prform| %>
        <%= prform.label :date_of_birth, 'DOB' %><br />
        <%= prform.text_field :date_of_birth, { class: 'datepicker', title: "Date_of_birth", value: (f.object.date_of_birth.strftime("%d-%m-%Y") if f.object.date_of_birth.present?) } %>

The image is rendered using jquery as below:

$( ".datepicker" ).datepicker({
  showOn: "button",
  buttonImage: "assets/form_images/calendar.png",
  buttonImageOnly: true,
  buttonText: "Select date of birth",
  dateFormat: 'dd-mm-yy',
});

The first form is in the following path -> app/views/profile/update_user.html.erb The second form is in the following path -> app/views/login/new_user.html.erb The partial is in the following path -> app/views/shared/_partial.html.erb

Now the image assets/form_images/calendar.png is being shown in this file new_user.html.erb but not in this update_user.html.erb. When I checked the image url from browser, for new_user.html.erb it is assets/form_images/calendar.png which is correct but for update_user.html.erb it is profile/assets/form_images/calendar.png which is wrong. Why is it showing like this? What am I doing wrong here?

score 1 · Accepted Answer · answered Dec 18 '19 at 14:15

1

That is because, you are using profile nested attributes and rails is appending profile path. Rename your JS file by appending .erb like filename.js.erb and replace buttonImage code like below and try.

buttonImage: "<%= asset_path('form_images/calendar.png') %>";

answered Dec 18 '19 at 14:15

Praveen KJ

630
2
11
22

Oh ok. Got it! But why was the `asset_path` correct for `new_user` and not for `update_user`? Shouldn't it be wrong for both since I am using the same partial? – Lax_Sam Dec 21 '19 at 00:35
@Lax_Sam If you are still facing issues, try asset_path(Rails.root.join('app', 'assets', 'form_images', calendar.png').to_s) – Praveen KJ Dec 25 '19 at 09:32
No. Your answer solved my issue. My question was why was the image being shown only for `new_user` and not for `update_user` from the code in my question when both were being rendered from the same partial. – Lax_Sam Dec 27 '19 at 03:39
@Lax_Sam It doesn't matter if it's from partial or not. You are passing the image URL in JS. Try to use absolute path or asset_path so that it will be easy for rails to pickup the correct URL. Since it is from JS there are many possibilities so you don't have to worry about all that. – Praveen KJ Jan 02 '20 at 03:00

Wrong image url is passed for one form and correct to another form from partial in Rails 4

1 Answers1