##jQueryを使用した検索機能を実装したい
Railsで作成したタスク管理サービス内で、タスク検索をjQueryを使用して実装しようと思っています。
ですが、フォームに文字を入力すると意図しないアクションが呼び出されてしまい動きません。
調べてみたのですが、解決に至らなかったのでご教示いただけると幸いです。
##試したこと
task.jsのコード見直し
console.log()を使用してjsが動いているか確認→どこにおいても動いていない
alertを使用して確認→確認できず
##コード
index.html.erb
<div class="table-responsive mt-3"> <table class="table table-bordered bg-light"> <thead class="bg-primary"> <tr> <th> <a href="#" class="ajax-link text-light">タスク名</a> </th> <th> <a href="#" class="ajax-link text-light">担当者</a> </th> <th> <a href="#" class="ajax-link text-light">期日</a> <i class="fa fa-fw fa-angle-down text-light"></i> </th> <th class="text-light">処理</th> </tr> </thead> <tbody id="result"> <tr> <td> <input id="search" type="text" name="title" class="w-100 h-100 ajax-filter ajax-filter-input"> </td> <td> <select class="w-100 h-100 ajax-filter ajax-filter-select" name="to_user_id" > <option value selected>--</option> <option value="#"></option> </select> </td> <td> <input type="form" value name="due_date" class="w-100 h-100 ajax-filter ajax-filter-input" > </td> </tr> <% @tasks.each do |task| %> <tr class="tasks_column-data"> <td> <div class="td-border-div mytask-priority-5"> <%= link_to task.task_name, task_path(task.task_name) %> </div> </td> <td> <img src="#" class="plofile-icon ml-1 mr-1"> <span class="plofile-name-cover">sample name</span> </td> <td> <div class="sub-project-name"> <%= task.created_at.strftime('%Y-%m-%d') %>に開始 </div> </td> <td class="text-nowrap"> <%= link_to edit_task_path(task), class: "btn btn-primary ajax-link tip" do %> <i class="fa fa-fw fa-edit"></i> <% end %> <%= link_to task_path(task), method: :delete, data: { confirm: "削除してよいですか? <br> <strong>#{task.task_name}</strong>", cancel: 'キャンセル', commit: '削除'}, title: '削除の確認', class: "btn btn-danger tip" do %> <i class="fa fa-fw fa-trash"></i> <% end %> <a href="#" class="btn btn-primary ajax-link tip-right" data-title="記録">記録</a> </td> </tr> <% end %> </tbody> </table> </div> </div> </div> </div> </div>
task.js
$(document).on('keyup', '#search', function(e){ e.preventDefault(); var input = $.trim($(this).val()); console.log(input) $.ajax({ url: '/tasks/search', type: 'GET', data: ('keyword=' + input), processData: false, contentType: false, dataType: 'json' }) .done(function(data){ console.log(data); $('tr.tasks_column-data').remove(); $(data).each(function(index, task){ $('#result').append( `<tr class="tasks_column-data"> <td> <div class="td-border-div mytask-priority-5"> <a href="/tasks/${task.task_name}" %>${task.task_name}</a> </div> </td> <td> <img src="#" class="plofile-icon ml-1 mr-1"> <span class="plofile-name-cover">sample name</span> </td> <td> <div class="sub-project-name"> <p>${task.created_at.strftime('%Y-%m-%d')}に開始</p> </div> </td> <td class="text-nowrap"> <a class="btn btn-primary ajax-link tip" href="/tasks/${task}/edit"> <i class="fa fa-fw fa-edit"></i> </a> <a data-confirm="削除してよいですか <br> <strong>${ task.task_name }</strong>" data-cancel="キャンセル" data-commit="削除" title="削除の確認" class="btn btn-danger tip" rel="nofollow" data-method="delete" href="/tasks/${ task.task_users_id}"> <i class="fa fa-fw fa-trash"></i> </a> <a href="#" class="btn btn-primary ajax-link tip-right" data-title="記録">記録</a> </td> </tr>` ) }); }) });
search.json.jbuilder
json.array! @tasks do |task| json.name task.task_name end
tasks_controller.rb
class TasksController < ApplicationController def index @tasks = Task.all end def new @task = Task.new end def destory @task = Task.find(params[:id]) @task.destroy redirect_to tasks_path end def edit @tasks = Task.find(params[:id]) end def update @task = Task.find(task_params) end def search @tasks = Task.where("task_name LIKE ?", "%#{params[:keyword]}%") respond_to do |format| format.html format.json { render json: @tasks } end end private def task_params params.require(:task).permit(:task_name, :cont_memo) end end
よろしくお願い致します。
回答4件
あなたの回答
tips
プレビュー