Sinatra+DataMapper+JQueryを使った実験として付箋アプリを作っている
- JQueryのDroppableを使ってドロップした付箋をremoveで非表示にできるが
- データベースから削除する方法がわからない
- 付箋のidの取得方法はわかったけど
1 require "rubygems"
2 require "sinatra"
3 require "dm-core"
4 require "dm-timestamps"
5 require "dm-validations"
6
7 DataMapper.setup(:default, ENV['DATABASE_URL'] || "sqlite3://#{Dir.pwd}/post_me.sqlite3")
8
9 class PostMe
10 include DataMapper::Resource
11
12 property :id, Integer, :serial => true
13 property :body, Text, :nullable => false
14 property :created_at, DateTime
15
16 validates_present :body
17 validates_length :body, :max => 200
18 end
19
20 DataMapper.auto_upgrade!
21
22 get '/' do
23 @posts = PostMe.all
24 erb :index
25 end
26
27 post '/' do
28 @post = PostMe.new(:body => params[:post_body])
29 if @post.save
30 redirect '/'
31 else
32 redirect '/'
33 end
34 end
35
36 __END__
37 @@layout
38
39 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
40 <html>
41 <head>
42 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
43 <title>Post Metitle>
44 <style type="text/css" media="screen">
45 body { background:#eed;}
46 #new_post { float:left;}
47 .draggable { width:150px; height:80px; position:absolute; padding:3px 3px 3px 3px; color:#fff;}
48 #droppable { float:right; width:200px; height:120px; background:#999;}
49 #drop_text { color:#fff; padding-left:10px;}
50 #highlight { background:#b55;}
51 style>
52 <script type="text/javascript" src="javascripts/jquery-1.3.2.min.js">script>
53 <script type="text/javascript" src="javascripts/jquery-ui-1.7.1.custom.min.js">script>
54 <script type="text/javascript" charset="utf-8">
55 $(function() {
56 $(".draggable").draggable({ });
57 $("#droppable").droppable({
58 drop: function(event, ui) {
59 $(ui.draggable).hide();
60 var id = ui.draggable.attr("id").split('_')[1]
61 var ok = confirm("Item " + id + " delete?")
62 if (ok) { $(ui.draggable).remove(); }
63 else { $(ui.draggable).show(); }
64
65 // <% p response.ok? %>
66 }
67 });
68 $("#p_<%= @posts.last.id %>").effect("shake", { times: 4 }, 100)
69 });
70 script>
71 head>
72 <body>
73 <%= yield %>
74 body>
75 html>
76
77 @@index
78 <div id="new_post">
79 <form action="/" method="POST" accept-charset="utf-8">
80 <textarea name="post_body" rows="6" cols="25">textarea>
81 <p><input type="submit" value="Save">p>
82 form>
83 div>
84 <div id="droppable">
85 <p id='drop_text'>Trashp>
86 div>
87 <div id="posts">
88 <% @posts.each do |entry| %>
89 <div class="draggable" id="p_<%= entry.id %>" style="top:<%= 150+rand(20)*25 %>px; left:<%= 50+rand(40)*20 %>px; background:#<%= 500+rand(299) %>;"><%= entry.body.gsub(/\n/, "
") %>div>
90 <% end %>
91 div>
92 <p><%= @posts.length %>p>
93 <%= @posts.last.id %>
No comments:
Post a Comment