All threads / Why are these partials rendering differently?

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Why are these partials rendering differently?

Chris Zempel asked in General

I’m doing a thing where I’m rendering table rows:

<%= render partial: "choices_table_row", collection: @images, as: :image %>

Then, inside that partial:

<tr id="image_<%= image.id %>">
  <td><%= image.name %></td>
  <td><%= image.file_filename %></td>
  <td><%= image.tag_list %></td>
  <td>
    <%= link_to "#", data: {behavior: "edit-image-button", url: "/artist/images/#{image.id}/form" } do %>
      <i class="bts bt-edit"></i>
    <% end %>
  </td>
  <td>
    <i class="bts bt-plus-circle clickable" data-behavior="create-selection-button">
      <%= form_for([:artist, @gallery, Selection.new], remote: true) do |f| %>
        <%= f.hidden_field :image_id, value: image.id %>
      <% end %>
    </i>
  </td>
</tr>

Then I've got some js running behind the scenes to submit the form inside the icon when said icon is clicked:

class PotentialSelection
  constructor: (item) ->
    @icon = $(item)
    @form = @icon.find('form')
    @setEvents()

  setEvents: =>
    @icon.on "click", @addToCollection

  addToCollection: =>
    console.log "wat"
    @form.submit()

ready = ->
  $("[data-behavior='create-selection-button']").each ->
    new PotentialSelection this
  #$("#current-selections-container").sortable(
    #update: ->
      #$.post $(this).data("order-url"), $(this).sortable('serialize')
  #)

$(document).ready ready
$(document).on 'page:load', ready
$(document).on 'ajax:complete', ready

It all works correctly except for the first one. What renders in the first partial is this:

<i class="bts bt-plus-circle clickable" data-behavior="create-selection-button">
      <input name="utf8" type="hidden" value="✓">
      <input value="4" type="hidden" name="selection[image_id]" id="selection_image_id">
</i>

When all the other ones have the full form inside of them:

<i class="bts bt-plus-circle clickable" data-behavior="create-selection-button">
      <form class="new_selection" id="new_selection" action="/artist/galleries/1/selections" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓">
        <input value="11" type="hidden" name="selection[image_id]" id="selection_image_id">
</form>    </i>

wat

I'm pretty sure an i tag isn't intended to be wrapped around a form. That's likely invalid HTML that the browser strips and replaces.

haha. even the text in here is italicized now after you said tag

Even when I put the form elsewhere, it's still not rendering the first one correctly. Also, when I try to click the pagination links at the bottom, I get a weird error. I think I'm not actually opening or closing a form properly somewhere

That was it! I forgot to add the do/end parts to a form tag further up, throwing everything off.

You fixed that too quickly for me to take a screenshot :(

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 38,311+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.