How to save DOM elements in the database?
Hi
I'm working on my very first "real" Rails project, and it might be a bit to advanced for a newbie like me. But here we go (sorry for the long and confusing rumble).
Goal: I want to save the position of small and draggable images ("props") in the database. With the help of jQuery UI the element is draggable and have an absolute position.
So far: I added a few rows in the database with the Rails console, and can display these "props" on the "stage" (using a view partial).
Set up: Each props belongs to a stage, and every stage can have multiple props. My models looks like this:
Stage model:
class Stage < ApplicationRecord
belongs_to :match
has_many :prop
end
Prop model:
class Prop < ApplicationRecord
belongs_to :stage
end
And the Stage controller:
def show
@match = Match.find(params[:match_id])
@stage = @match.stages.find(params[:id])
@props = @stage.prop.all
end
The Stage view (show.html.erb) renders a partial that displays the props.
<%= render partial: "props/design" %>
_design.html.erb
<% @props.each do |p| %>
img tag here
<% end %>
Questions:
- Should the New and Update action for props be in the Props controller or Stage controller? I think it should be the Props controller, but how does that works with the view partial (the save button is in the partial)
- When calling the New action, how can I run through the DOM and add each props? I think I need an array, but have no idea on how to do this.
Thanks!
Magnus
How are you planning saving the props? Would't they be on different places when you display them on different screens? Regarding the first question, the new and update action for an item (a prop in your case) should be in their corresponding controller (props_controller). I can't answer the second question :(
Hi Max
Thanks. Yes, there will be several props for each stage and the props are saved in a separate table.
A work-in-progress can be found here: https://damp-hamlet-14852.herokuapp.com/matches/3/stages/1
(if the drag and drop not working, reload the page).