Home>
I want to implement a search function using jQuery

I'm trying to implement task search using jQuery within a task management service created in Rails.
However, when I enter characters in the form, an unintended action is called and it does not work.

I tried to find out, but I couldn't find a solution, so I would appreciate it if you could tell me.

What I tried

Code review of task.js
Check if js is working using console.log () → It is not working anywhere
Confirm using alert → Cannot confirm

code

index.html.erb

          <table>            <thead>              <tr>                <th>                     task name                   </th>                <th>                     Person in charge                   </th>                <th>                     Due date                     <i></i>                </th>                <th>Processing</th>              </tr>            </thead>            <tbody>            <tr>              <td>                <input type = "text" name = "title">              </td>              <td>                <select name = "to_user_id">                  <option value selected>-</option>                  <option value = "#"></option>                </select>              </td>              <td>                <input type = "form" value name = "due_date">              </td>            </tr>            <% @ tasks.each do | task |%>              <tr>                <td>                                          <% = link_to task.task_name, task_path (task.task_name)%>                                      </td>                <td>                                        <span>sample name</span>                </td>                <td>                    Start at<% = task.created_at.strftime ('% Y-% m-% d')%>                                      </td>                <td>                  <% = link_to edit_task_path (task), class: "btn btn-primary ajax-link tip" do%>                    <i></i>                  <% end%>                  <% = link_to task_path (task), method:: delete, data: {confirm: "Are you sure I want to delete?<br><strong># {task.task_name}</strong>", cancel:'Cancel' , commit:'delete'},

 title:'Confirm Delete', class: "btn btn-danger tip" do%>                  <i></i>                  <% end%>                     record                   </td>              </tr>            <% end%>            </tbody>          </table>                                   

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>      <td>                         ${task.task_name}                     </td>      <td>                    <span>sample name</span>      </td>      <td>                      <p>Start at ${task.created_at.strftime ('% Y-% m-% d')}</p>        </td>      <td>                      <i></i>                     <strong>${task.task_name}</strong>"data-cancel =" Cancel "data-commit =" Delete "title =" Confirm deletion "rel =" nofollow "data-method =" delete "href ="/tasks/${task.task_users_id} ">          <i></i>                       record         </td>    </tr>`
      )
    });
  })
});

search.json.jbuilder

json.array! @tasks do | task |
  json.name task.task_name
end

tasks_controller.rb

class TasksController

I look forward to working with you.

  • Answer # 1

    All javascript filesjavascriptsPlease move to.
    Originally, the folder called javascript is not used, so it should be okay to delete it after moving.

  • Answer # 2

    You can do it in any way, but are you introducing jQuery itself?

    If you haven't done so, it won't work by default ...

    I think it would be good to introduce it with reference to such articles.

Related articles