jquery - Displaying object at xy position defined in Ruby on Rails model -
i working on trying pull x , y position model in ruby on rails , represent in html 5. position has been captured through jquery drag , drop, not able find information on how proceed.
to make more clear. have x-position , y-position variable set. need place interactable image on page @ location saved in method.
thanks , feel free let me know if there way more clear.
edit::
this controller table model (very new ror),
class tablescontroller < applicationcontroller before_action :set_table, only: [:show, :edit, :update, :destroy] skip_before_filter :verify_authenticity_token # /tables # /tables.json def index @tables = table.all end # /tables/1 # /tables/1.json def show end # /tables/new def new @table = table.new end # /tables/1/edit def edit end # post /tables # post /tables.json def create @table = table.new(table_params) respond_to |format| if @table.save format.html { redirect_to @table, notice: 'table created.' } format.json { render :show, status: :created, location: @table } format.js {render :json => @table} else format.html { render :new } format.json { render json: @table.errors, status: :unprocessable_entity } format.js {render :json =>@table.errors, status: :unprocessable_entity} end end end # patch/put /tables/1 # patch/put /tables/1.json def update respond_to |format| if @table.update(table_params) format.html { redirect_to @table, notice: 'table updated.' } format.json { render :show, status: :ok, location: @table } else format.html { render :edit } format.json { render json: @table.errors, status: :unprocessable_entity } end end end # delete /tables/1 # delete /tables/1.json def destroy @table.destroy respond_to |format| format.html { redirect_to tables_url, notice: 'table destroyed.' } format.json { head :no_content } end end private # use callbacks share common setup or constraints between actions. def set_table @table = table.find(params[:id]) end def table_params params.permit(:num_seats, :restaurant_id, :x_loc, :y_loc, :available) end end
edit #2::
i have tried both using variable in-line css styling suggested javascript making html 5 canvas. css styling 1 pulling image each iteration in each loop, not positioning correctly.
i have debugging statements showing getting info.
<script>document.write("<%=table.x_loc%>")</script>
gives correct information, however,
<img id = "pic" style = "left: <%=table.x_loc%>; top:<%=table.y_loc%>;" src="<%=asset_path( 'overheadtable.jpg')%>">
is not positioning image correctly.