CODEWITHSUNDEEP
ruby-on-rails
user5527042
user5527042

Reputation:

Ruby On Rails - Update Table with Jquery Get Request

I have an active jobs table that shows all of the active jobs. I am trying to add in search functionality on the table but my table data isn't rendering to the table. Here is the code I have so far.

assets/javascripts/jobs.js

$(document).ready(function(){
    $("#search").keypress(function(){
       $.ajax({
            type : 'get',
            url : "/jobs/"+$('#search').val()+"/search",    
            dataType : 'json',
            async : true,
            success : function(data) {

            }
          });
    });
});

My active_jobs.html.erb view renders a partial called _job.html.erb

<tr>
    <td><%= job.id %></td>
    <td><%= job.customer.name %></td>
    <td><%= job.customer.email %></td>
    <td><%= job.customer.phone_one %></td>
    <td><%= job.status %></td>
</tr>

My active_jobs.html.erb view 

<h1>Jobs</h1>
<input id="search" type="text" name="Search"><br>
<table id="jobs-table" class="table table-bordered">
    <tr>
        <th>ID</th> 
        <th>Name</th> 
        <th>Phone</th> 
        <th>Email</th> 
        <th>Status</th> 
    </tr>   
    <tbody>
        <%= render @jobs %>
    </tbody>

Here is my show.js.erb for rendering the response to the table (doesn't update the table correctly, does nothing.)

 $("<%= escape_javascript(render @jobs) %>").appendTo("#jobs-table");

My controller has a method called search

def search
    @jobs = Job.where(id: params[:keyword])
    respond_to do |format|
        format.html {redirect_to customers_url}
        format.js {render :action => "show"}
    end
end

Here is my console

Started GET "/jobs/2/search" for 10.0.2.2 at 2016-01-12 01:42:15 +0000
Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255

Processing by JobsController#search as JSON
Parameters: {"keyword"=>"2"}
Job Load (1.0ms)  SELECT "jobs".* FROM "jobs" WHERE "jobs"."id" = ?  [["id", 2]]
 Customer Load (0.9ms)  SELECT  "customers".* FROM "customers" WHERE "customers"."id" = ? LIMIT 1  [["id", 2]]
Rendered jobs/_job.html.erb (2.1ms)
Rendered jobs/show.js.erb (24.1ms)
Completed 200 OK in 89ms (Views: 86.6ms | ActiveRecord: 1.9ms)

All of the original data (on page load/refresh) loads just fine, but when I begin searching for an id via my get request, the table never updates or changes in any way. If you can please help with this issue I would sure appreciate it. Thanks in advance!

Upvotes: 0

Views: 324

Answers (2)

Richard Peck
Richard Peck

Reputation: 76774

Do the following:

#config/routes.rb
resources :jobs do
   get "search(/:keyword)", action: :show, on: :collection #-> url.com/jobs/search?keyword=query || url.com/jobs/search/:keyword
end

#app/assets/javascripts/application.js
$(document).on("keypress", "#search", function(e) {
   $.get("jobs/search", {keyword: $('#search').val()});
});

#app/controllers/jobs_controller.rb
class JobsController < ApplicationController
   def show
      if params[:keyword]
         @jobs = Job.where id: params[:keyword]
      else
         @job = Job.find params[:id]
      end

      respond_to do |format|
          format.js 
          format.html {redirect_to customers_url}
      end
   end
end

#app/views/jobs/show.js.erb
("<%=j render @jobs %>").appendTo("#jobs-table");

Upvotes: 0

Thomas Walpole
Thomas Walpole

Reputation: 49890

You're telling the ajax call to expect json as the return, but you're actually returning a JS script. Try:

$.ajax({
    type: 'get',
    url: '/jobs/' + $('#search').val() + '/search',
    dataType: 'script',
    async: true
});

Upvotes: 1

Related Questions