質問編集履歴
5
microposts_controller\.rbを追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -270,46 +270,6 @@
|
|
|
270
270
|
</a>
|
|
271
271
|
|
|
272
272
|
中略
|
|
273
|
-
|
|
274
|
-
<li id="micropost-377">
|
|
275
|
-
<button class="btn-old-micropost">
|
|
276
|
-
<span class="content">
|
|
277
|
-
ててて
|
|
278
|
-
|
|
279
|
-
</span>
|
|
280
|
-
<span class="timestamp">
|
|
281
|
-
Posted 3 days ago.
|
|
282
|
-
</span>
|
|
283
|
-
</button>
|
|
284
|
-
</li>
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
中略
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
<!-- <form class="new_micropost" id="new_micropost" enctype="multipart/form-data" action="/microposts" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="vvuS1FJiYVwCMOusHRscYXar2GxZDCMWhRbDkThP4ZyL9FOsoVrVXj5fl6WCZ4LCsLevKALMO33RCkdBJ8yWDQ==" />
|
|
291
|
-
|
|
292
|
-
<div class="field">
|
|
293
|
-
<textarea placeholder="Compose new micropost..." name="micropost[content]" id="micropost_content">
|
|
294
|
-
</textarea>
|
|
295
|
-
</div>
|
|
296
|
-
|
|
297
|
-
<input type="submit" name="commit" value="creat" class="btn-post" />
|
|
298
|
-
|
|
299
|
-
<span class="picture">
|
|
300
|
-
<input accept="image/jpeg.iamge/gif,image/png" type="file" name="micropost[picture]" id="micropost_picture" />
|
|
301
|
-
</span>
|
|
302
|
-
</form> -->
|
|
303
|
-
|
|
304
|
-
<!-- <script type="text/javascript">
|
|
305
|
-
$('#micropost_picture').bind('change', function() {
|
|
306
|
-
var size_in_megabytes = this.files[0].size/1024/1024;
|
|
307
|
-
if (size_in_megabytes > 5) {
|
|
308
|
-
alert('Maximum file size is 5MB. Please choose a smaller file.');
|
|
309
|
-
}
|
|
310
|
-
});
|
|
311
|
-
</script> -->
|
|
312
|
-
|
|
313
273
|
</section>
|
|
314
274
|
<div data-react-class="MessageBox" data-react-props="{}"></div>
|
|
315
275
|
</div>
|
|
@@ -350,4 +310,48 @@
|
|
|
350
310
|
console.error(this.props.url, status, err.toString());
|
|
351
311
|
```
|
|
352
312
|
|
|
353
|
-
よろしくお願いします。
|
|
313
|
+
よろしくお願いします。
|
|
314
|
+
|
|
315
|
+
###さらにさらに追記 1/17(2)
|
|
316
|
+
micropostsのcontrollerは下記のようになっています。
|
|
317
|
+
|
|
318
|
+
```
|
|
319
|
+
class MicropostsController < ApplicationController
|
|
320
|
+
before_action :logged_in_user, only: [:create, :destroy, :show]
|
|
321
|
+
before_action :set_micropost, only: [:destroy, :show]
|
|
322
|
+
|
|
323
|
+
def create
|
|
324
|
+
@micropost = current_user.microposts.build(micropost_params)
|
|
325
|
+
if @micropost.save
|
|
326
|
+
flash[:success] = "Micropost created!"
|
|
327
|
+
redirect_to home_path
|
|
328
|
+
else
|
|
329
|
+
@feed_items = []
|
|
330
|
+
render 'static_pages/home'
|
|
331
|
+
end
|
|
332
|
+
end
|
|
333
|
+
|
|
334
|
+
def destroy
|
|
335
|
+
@micropost.destroy
|
|
336
|
+
flash[:success] = "Micropost deleted"
|
|
337
|
+
redirect_to request.referrer || home_path
|
|
338
|
+
end
|
|
339
|
+
|
|
340
|
+
def show
|
|
341
|
+
messages = Micropost.find(params[:id])
|
|
342
|
+
render json: messages
|
|
343
|
+
end
|
|
344
|
+
|
|
345
|
+
private
|
|
346
|
+
|
|
347
|
+
def micropost_params
|
|
348
|
+
params.require(:micropost).permit(:content, :picture)
|
|
349
|
+
end
|
|
350
|
+
|
|
351
|
+
def set_micropost
|
|
352
|
+
@micropost = current_user.microposts.find_by(id: params[:id])
|
|
353
|
+
redirect_to home_path if @micropost.nil?
|
|
354
|
+
end
|
|
355
|
+
end
|
|
356
|
+
|
|
357
|
+
```
|
4
console\.logの確認結果を追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -23,11 +23,10 @@
|
|
|
23
23
|
Started POST "/microposts" for ::1 at 2017-01-15 17:20:21 +0900
|
|
24
24
|
Processing by MicropostsController#create as */*
|
|
25
25
|
Parameters: {"micropost"=>{"content"=>"POST"}}
|
|
26
|
-
User Load (0.2ms) SELECT "users".* FROM "users" WHERE
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
Redirected to http://localhost:3000/home
|
|
26
|
+
User Load (0.2ms) SELECT "users".* FROM "users" WHERE
|
|
27
|
+
|
|
28
|
+
中略
|
|
29
|
+
|
|
31
30
|
Completed 302 Found in 16ms (ActiveRecord: 9.5ms)
|
|
32
31
|
```
|
|
33
32
|
|
|
@@ -196,4 +195,159 @@
|
|
|
196
195
|
MessageItem内の{this.props.message.user}の部分に
|
|
197
196
|
データがうまく渡っていないのでしょうか。。。
|
|
198
197
|
|
|
199
|
-
とりとめのない追記で申し訳ありませんが、見ていただけると大変助かります。
|
|
198
|
+
とりとめのない追記で申し訳ありませんが、見ていただけると大変助かります。
|
|
199
|
+
|
|
200
|
+
###さらに追記 01/17
|
|
201
|
+
コメントにいただいたように、success:の中でconsole.log(message)を記載してchromeで確認をしました。
|
|
202
|
+
|
|
203
|
+
htmlが吐き出されているようで、かなり長いログになっていました。。
|
|
204
|
+
※あまりに長いので、一部省略しています。
|
|
205
|
+
|
|
206
|
+
```
|
|
207
|
+
<!DOCTYPE html>
|
|
208
|
+
<html>
|
|
209
|
+
<head>
|
|
210
|
+
<title>Ruby on Rails Tutorial Sample App</title>
|
|
211
|
+
<link rel="stylesheet" media="all" href="/assets/account_activations.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
|
|
212
|
+
|
|
213
|
+
中略
|
|
214
|
+
|
|
215
|
+
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
|
|
216
|
+
</script>
|
|
217
|
+
<![endif]-->
|
|
218
|
+
|
|
219
|
+
</head>
|
|
220
|
+
<body style="color: rgb(27, 29, 34)">
|
|
221
|
+
<header class="navbar navbar-inverse">
|
|
222
|
+
<div class="container" style="margin-top: 100px;">
|
|
223
|
+
<a id="logo" href="/home">sample app</a>
|
|
224
|
+
<nav>
|
|
225
|
+
<ul class="nav navbar-nav navbar-right">
|
|
226
|
+
<li><a href="/home">Home</a></li>
|
|
227
|
+
<li><a href="/help">Help</a></li>
|
|
228
|
+
<li><a href="/users">Users</a></li>
|
|
229
|
+
<li class="dropdown">
|
|
230
|
+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
231
|
+
Account <b class="caret"></b>
|
|
232
|
+
</a>
|
|
233
|
+
<ul class="dropdown-menu">
|
|
234
|
+
<li><a href="/users/103">Profile</a></li>
|
|
235
|
+
<li><a href="#">Settings</a></li>
|
|
236
|
+
<li class="divider"></li>
|
|
237
|
+
<li>
|
|
238
|
+
<a rel="nofollow" data-method="delete" href="/logout">Log out</a>
|
|
239
|
+
</li>
|
|
240
|
+
</ul>
|
|
241
|
+
</li>
|
|
242
|
+
</ul>
|
|
243
|
+
</nav>
|
|
244
|
+
</div>
|
|
245
|
+
</header>
|
|
246
|
+
|
|
247
|
+
<div class="landing">
|
|
248
|
+
<div class="alert alert-success">Micropost created!</div>
|
|
249
|
+
<div class="container">
|
|
250
|
+
<div class="row col-md-12">
|
|
251
|
+
<h1>
|
|
252
|
+
<section class="user_info">
|
|
253
|
+
<a href="/users/103"><img alt="example_sample@example.com" class="gravatar" src="https://secure.gravatar.com/avatar/1a51ab8ceafa101e9b36619b6c9b277d?s=80" /></a>
|
|
254
|
+
<h1>example_sample@example.com</h1>
|
|
255
|
+
<span><a href="/users/103">view my profile</a></span>
|
|
256
|
+
<span>84 microposts</span>
|
|
257
|
+
|
|
258
|
+
<div class="stats">
|
|
259
|
+
<a href="/users/103/following">
|
|
260
|
+
<a id="following" class="stat">
|
|
261
|
+
1
|
|
262
|
+
following
|
|
263
|
+
</a>
|
|
264
|
+
</a>
|
|
265
|
+
<a href="/users/103/followers">
|
|
266
|
+
<a id="followers" class="stat">
|
|
267
|
+
0
|
|
268
|
+
followers
|
|
269
|
+
</a>
|
|
270
|
+
</a>
|
|
271
|
+
|
|
272
|
+
中略
|
|
273
|
+
|
|
274
|
+
<li id="micropost-377">
|
|
275
|
+
<button class="btn-old-micropost">
|
|
276
|
+
<span class="content">
|
|
277
|
+
ててて
|
|
278
|
+
|
|
279
|
+
</span>
|
|
280
|
+
<span class="timestamp">
|
|
281
|
+
Posted 3 days ago.
|
|
282
|
+
</span>
|
|
283
|
+
</button>
|
|
284
|
+
</li>
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
中略
|
|
288
|
+
|
|
289
|
+
|
|
290
|
+
<!-- <form class="new_micropost" id="new_micropost" enctype="multipart/form-data" action="/microposts" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="vvuS1FJiYVwCMOusHRscYXar2GxZDCMWhRbDkThP4ZyL9FOsoVrVXj5fl6WCZ4LCsLevKALMO33RCkdBJ8yWDQ==" />
|
|
291
|
+
|
|
292
|
+
<div class="field">
|
|
293
|
+
<textarea placeholder="Compose new micropost..." name="micropost[content]" id="micropost_content">
|
|
294
|
+
</textarea>
|
|
295
|
+
</div>
|
|
296
|
+
|
|
297
|
+
<input type="submit" name="commit" value="creat" class="btn-post" />
|
|
298
|
+
|
|
299
|
+
<span class="picture">
|
|
300
|
+
<input accept="image/jpeg.iamge/gif,image/png" type="file" name="micropost[picture]" id="micropost_picture" />
|
|
301
|
+
</span>
|
|
302
|
+
</form> -->
|
|
303
|
+
|
|
304
|
+
<!-- <script type="text/javascript">
|
|
305
|
+
$('#micropost_picture').bind('change', function() {
|
|
306
|
+
var size_in_megabytes = this.files[0].size/1024/1024;
|
|
307
|
+
if (size_in_megabytes > 5) {
|
|
308
|
+
alert('Maximum file size is 5MB. Please choose a smaller file.');
|
|
309
|
+
}
|
|
310
|
+
});
|
|
311
|
+
</script> -->
|
|
312
|
+
|
|
313
|
+
</section>
|
|
314
|
+
<div data-react-class="MessageBox" data-react-props="{}"></div>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
317
|
+
</div>
|
|
318
|
+
|
|
319
|
+
<footer class="footer">
|
|
320
|
+
<small>
|
|
321
|
+
The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
|
|
322
|
+
by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
|
|
323
|
+
</small>
|
|
324
|
+
<nav>
|
|
325
|
+
<ul>
|
|
326
|
+
<li><a href="/about">About</a></li>
|
|
327
|
+
<li><a href="/contact">Contact</a></li>
|
|
328
|
+
<li><a href="http://news.railstutorial.org/">News</a></li>
|
|
329
|
+
</ul>
|
|
330
|
+
</nav>
|
|
331
|
+
</footer>
|
|
332
|
+
|
|
333
|
+
<pre class="debug_dump">--- !ruby/hash:ActionController::Parameters
|
|
334
|
+
controller: static_pages
|
|
335
|
+
action: home
|
|
336
|
+
</pre>
|
|
337
|
+
</div>
|
|
338
|
+
</body>
|
|
339
|
+
</html>
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
また、chromeのconsoleをみると、もう一つエラーが表示されていました。
|
|
343
|
+
|
|
344
|
+
```
|
|
345
|
+
micropost.self-560a548….js?body=1:19 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0"
|
|
346
|
+
```
|
|
347
|
+
コードの該当部分は、POSTのajax内のerror:、下記の部分のようです。
|
|
348
|
+
|
|
349
|
+
```
|
|
350
|
+
console.error(this.props.url, status, err.toString());
|
|
351
|
+
```
|
|
352
|
+
|
|
353
|
+
よろしくお願いします。
|
3
誤字修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
Completed 302 Found in 59ms (ActiveRecord: 5.5ms)
|
|
152
152
|
```
|
|
153
153
|
|
|
154
|
-
302が
|
|
154
|
+
302が返ってきているようなのですが、これが問題なのでしょうか、、
|
|
155
155
|
|
|
156
156
|
|
|
157
157
|
もう1点、MessageItemの動きを調べている時に気づいた点があったので記載します。
|
2
サーバーログと、新たに気付いた点を追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -132,4 +132,68 @@
|
|
|
132
132
|
}
|
|
133
133
|
});
|
|
134
134
|
```
|
|
135
|
-
必要な情報などあれば、いっていただけると助かります。
|
|
135
|
+
必要な情報などあれば、いっていただけると助かります。
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
###追記
|
|
139
|
+
|
|
140
|
+
編集依頼にいただいた内容ですが、handleMessageSubmitが実行された際には、下記のサーバーログが残っていました。
|
|
141
|
+
|
|
142
|
+
```
|
|
143
|
+
Started POST "/microposts" for ::1 at 2017-01-16 19:48:46 +0900
|
|
144
|
+
Processing by MicropostsController#create as */*
|
|
145
|
+
Parameters: {"micropost"=>{"content"=>"サンプル"}}
|
|
146
|
+
User Load (1.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 103]]
|
|
147
|
+
(0.5ms) begin transaction
|
|
148
|
+
SQL (3.0ms) INSERT INTO "microposts" ("content", "user_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["content", "サンプル"], ["user_id", 103], ["created_at", "2017-01-16 10:48:46.294594"], ["updated_at", "2017-01-16 10:48:46.294594"]]
|
|
149
|
+
(0.9ms) commit transaction
|
|
150
|
+
Redirected to http://localhost:3000/home
|
|
151
|
+
Completed 302 Found in 59ms (ActiveRecord: 5.5ms)
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
302が帰ってきているようなのですが、これは挙動できに問題となるのでしょうか、、
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
もう1点、MessageItemの動きを調べている時に気づいた点があったので記載します。
|
|
158
|
+
|
|
159
|
+
まず、MessageItemが呼び出されていないかも、と思ったので、MessageItemメソッドの中身を
|
|
160
|
+
```
|
|
161
|
+
var MessageItem = React.createClass ({
|
|
162
|
+
render: function() {
|
|
163
|
+
return (
|
|
164
|
+
<div className="message">
|
|
165
|
+
<h2 className="messageUser">{this.props.message.user}</h2>
|
|
166
|
+
</div>
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
});
|
|
170
|
+
```
|
|
171
|
+
上記から下記に書き換えてみました。
|
|
172
|
+
「サンプル」というテキストを追加しています。
|
|
173
|
+
```
|
|
174
|
+
var MessageItem = React.createClass ({
|
|
175
|
+
render: function() {
|
|
176
|
+
return (
|
|
177
|
+
<div className="message">
|
|
178
|
+
<h2 className="messageUser">サンプル{this.props.message.user}</h2>
|
|
179
|
+
</div>
|
|
180
|
+
);
|
|
181
|
+
}
|
|
182
|
+
});
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
その後、実際に動かしてみると、Postボタンをタップする前には
|
|
188
|
+
上記のスクショのようになっているところ、
|
|
189
|
+
Postボタンタップ後に下記のスクショのように
|
|
190
|
+
「サンプル」というテキストが表示されました。
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
これでMessageItemが呼び出されていることは分かったのですが、
|
|
195
|
+
投稿した内容が表示されないというのは
|
|
196
|
+
MessageItem内の{this.props.message.user}の部分に
|
|
197
|
+
データがうまく渡っていないのでしょうか。。。
|
|
198
|
+
|
|
199
|
+
とりとめのない追記で申し訳ありませんが、見ていただけると大変助かります。
|
1
分かりやすくアップデート
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Railsアプリ
|
|
1
|
+
Railsアプリ、reactでPOSTした内容を表示したい
|
body
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
このスクリーンショット内の、
|
|
15
|
+
このスクリーンショット内の、テキストフォームの「POST」というテキストを
|
|
16
16
|
POSTボタンがクリックされた後にテキストフォームの上あたりに表示したいのですが
|
|
17
17
|
POST成功後、表示する部分を実装できずにいます。
|
|
18
18
|
|