Q&A
細かいですが大事です。jquary → jQuery です（スペルミス）>タイトル
Ruby on Rails でAjaxを使用して非同期のいいね!機能を作ろうとしていましたが、全く反応がなく諦めかけていました。
そこで、そもそもAjaxを使用できるのかと確認のため、簡単に試したのですが、そちらも反応が見れませんでした。
事前に何か設定をしたりする必要があるのでしょうか？
View
1Rails 5.2.1 2 3#index.html.erb 4 <button>もっと読む</button> 5 <div id="result"></div> 6 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 7 <script> 8 $(function(){ 9 $('button').click(function(){ 10 $('#result').load('more.html'); 11 }); 12 }); 13 </script> 14 15#more.html 16<p id="message">もっと読めた！</p>
これにより、もっと読むボタンを押すと、resultにmore.htmlの中身が代入され、表示されるはずです。
しかし、ボタンは現れるも、クリックしても反応が見れない状況です。
ありがとうございます。修正しました
確認されたブラウザが分かりませんが、jQueryのCDN利用されるのであればhttpsのものでもっと最新のものを使われてはいかがでしょうか。https://code.jquery.com/ 本件が確実に関係あるかどうかまでは分かりませんが。ブラウザ開発ツールのコンソールにエラーが出ていないかも確認してください。
ありがとうございます。<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>のように最新としましたが、同様反応が現れず。コンソールではエラーなどの反応はありません。
回答2件
0
まずスペルが間違っていますね。
js
1$(funtion(){ ⇒ $(function(){
下記の様なエラーが出ましたので、サーバー側でmore.htmlを~/more.htmlとアクセスできる位置に置いていれば読み込めるのではないでしょうか。
Started GET "/more.html" for ::1 at 2018-12-07 18:17:38 +0900 ActionController::RoutingError (No route matches [GET] "/more.html"):
投稿2018/12/07 09:31
総合スコア305
ご指摘ありがとうございます。修正して試してみたのですが、同様に反応がありません。別の回答であるように、私の現状はローカルサーバーで行っているから反応が見れないという事になるのでしょうか？
404.htmlやfavicon.icoなどが置いてあるフォルダ（public）にmore.htmlを置いてありますでしょうか？
```html
<button id="button">もっと読む</button>
<div id="result"></div>
```
```js
$(function () {
$('#button').click(function () {
$('#result').load("more.html");
});
});
```
上記の内容で、こちらでは確認できましたが如何でしょうか。
more.htmlはindex.html.erb.と同様のディレクトリに保存されていましたので、more.htmlをpublicに保存し直しました。ですが、現状変わらずです..。
お教え頂いたjsの部分はindex.html内に記載されています。そして、more.htmlには、<p id="message">もっと読めた！</p>がそのまま記載されています。そちらではそのようになっておりますでしょうか。
はい、その様になっています。
index.html.erbを全てお見せしていただけますか？
#index.html.erb
<div class="main">
<div class="container">
<% @posts.each do |post| %>
<div class="body">
<h4><%= link_to(post.title, "/posts/#{post.id}") %></h4>
<div class="img"><%= link_to( image_tag("/post_images/#{post.id}.jpg"), "/posts/#{post.id}")%></div>
<button>もっと読む</button>
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function () {
$('#button').click(function () {
$('#result').load("more.html", function () {
console.log("読み込みOK")
});
});
});
</script>
<% end %>
</div>
</div>
</div>
このようになりますが、いかがでしょうか？
今回の質問で特別な設定が必要無しにjsやjQueryは使用できるという認識になりましたが、私だけ全く反応がないのは不思議ですね。
<button>もっと読む</button>
を
<button id="button">もっと読む</button>
です
ありがとうございます。
変更しましたが、反応はありませんでした。
異常なほど全く反応がないのでやはり何か設定部分に問題がある可能性はありますか？
jsが読み込めてないのでは？
下記の様に動きを一つずつ確認すると良いですよ。
$(function () {
$('#button').click(function () {
console.log("test");
});
});
0
Ruby on Railsのことは良くわかりませんが、Ajaxという機能は通常サーバー上でなければ動かなかったと記憶しています。
load関数も同じだったと思います。
Mamp環境とかでテストするのが一番良いかと思います。
投稿2018/12/07 08:29
総合スコア118
Ruby on Rails自体はWebサーバーで動くのでそこは問題ではないと思います。
ご回答ありがとうございます。初めて知りました。一度本件自分で詳しく調べてみます。
あなたの回答
tips
プレビュー
