All threads / How to save DOM elements in the database?

Ask A Question

Notifications

You’re not receiving notifications from this thread.

How to save DOM elements in the database?

Magnus von Bromsen asked in Rails

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).

Join the discussion

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

Join 37,344+ 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.