質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

734閲覧

jsで@list.idの場所へ飛び../lists/1のようにリンクを作りたい。

Haru_510

総合スコア14

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/12/05 14:22

先日rails 複数DBでのAjax検索で[object Object]と表示される
でajax検索を達成することができました、ありがとうございました。

##実装したいこと
今回はAjax検索で出た検索結果に対してリンクを作りたいと考えています。
現在このように検索が出てきてリストとしてでてくる状態です(asが移動したいlistです。日付のデータは上が締め切り、下が作成日です)
検索ページ
この時asをクリックするとlistのshowページへと飛びたいと考えています。
リストのidの4を出すことはできるのですが、このidにどのようにしてページ遷移させればよいかわかりません。

###ソースコード

view

1 2<input type="text" id="search_field" class="form-control" > 3<input type="submit" name="button1" value="検索" id="search" class="form-control" > 4 5<ul id="result" class="list"> 6</ul> 7

javascript

1<script> 2$(document).on('turbolinks:load', function(){ 3 $(document).on('click', '#search', function(e){ 4 e.preventDefault(); 5 var input = $.trim($('#search_field').val()); 6 $.ajax({ 7 url: './search', 8 type: 'GET', 9 data: {keyword:input}, 10 dataType: 'json' 11 }) 12 .done(function(data){ 13 $('#result').find('li').remove(); 14 var list = data[0] 15 var task = data[1] 16 if((list.length === 0) && (task.length === 0)){ 17 $('#result').append('<li class="search_info">' + '対象のToDoは見つかりません' + '</li>') 18 $('#result').append('<li class="search_info">' + '対象のToDoリストは見つかりません' + '</li>') 19 } else if((list.length > 0) || (task.length > 0)) { 20 $('#result').append('<li class="search_info">' + 'ToDoが' + task.length + '件ありました' + '</li>') 21 for(var i=0; i < task.length; i++){ 22 $('#result').append( 23 '<li class="tasks">' 24 + '<a href="#">' + task[i].title + '</a>' 25 + '<p>' + task[i].deadline + '</p>' 26 + '<p>' + task[i].id + '</p>' 27 + '<p class="create_time">' + task[i].created_at +'</p>' 28 + '</li>' 29 ) 30 } 31 32 $('#result').append('<li class="search_info">' + 'ToDoリストが' + list.length + '件ありました' + '</li>') 33 for(var j=0; j < list.length; j++){ 34 $('#result').append( 35 '<li class="lists">' 36 + '<a href="#">' + list[j].title +'</a>' 37 + '<p class="create_time">' + list[j].created_at +'</p>' 38 + '</li>' 39 ) 40 } 41 } 42 }) 43 }); 44}); 45</script>

controller

1 def search 2 @lists = List.where('title LIKE(?)', "%#{params[:keyword]}%"), Task.where('title LIKE(?)', "%#{params[:keyword]}%") 3 render json: @lists 4 end

##最後に
自分でも色々と調べ、jsで得るデータ自体をrailsのeach文でかければまだできそうな気もするのですが、jsからの渡し方もわからず力不足が目立ちjs全然分かりません...
何回も質問するのは気が引けますがどうか力を貸してもらえると嬉しいです。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

for文のhrefの中で+ '<a href="../lists/' + task[i].list_id + '">' + task[i].title + '</a>'
とすることで無理矢理感はありますが実装することができました!

投稿2018/12/12 22:45

Haru_510

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問