Passing variable to controller through Ajax call

Question

Rail 5.2
datatables

In my views/books/index.html.slim, I am loading a partial, from another MVC, as follows:

 = render  partial: 'authors/index', :locals => {:author => @book.author}

In my views/authors/_index.html, I have the following:

.....    
table.table-striped.table-bordered.table-hover.nowrap#AuthorsIndex.display
.....

javascript:
  $('#AuthorsIndex').DataTable({
    ajax: '/authors',
    columns: [
      {title: 'Publish Date', data: 'created_at'},
      {title: 'Publisher', data: 'publisher'},
      {title: 'Title', data: 'title'},
    ]
  });

And, in my controllers/authors_controllers.rb, I have the following:

def index
  @authors = Author.where(author: "John Doe")
  render json: { data: @authors }
end

When I run it, the authors table displays properly. The problem, is that the author name is hard coded in the controller action. My _index partial, is receiving the author name, but how do I get it to the authors controller, as part of the Ajax call I am making? New to Ajax/Javascript.

3limin4t0r · Answer 1 · 2019-10-31T13:31:16.910

I don't have the necessary tools installed to test this, but the jQuery DataTable documentations says that you can provided custom data through the ajax.data option.

The ajax.data option provides the ability to add additional data to the request, or to modify the data object being submitted if required.

...

As an object, the ajax.data option is used to extend the data object that DataTables constructs internally to submit to the server. This provides an easy method of adding additional, static, parameters to the data to be sent to the server. For dynamically calculated values, use ajax.data as a function (see below).

The documentation also provides example scenarios, and goes further into detail about what can be provided.

$('#AuthorsIndex').DataTable({
  ajax: {
    url: '/authors',
    data: {author: '<%= j author %>'}
  },
  columns: [
    {title: 'Publish Date', data: 'created_at'},
    {title: 'Publisher',    data: 'publisher'},
    {title: 'Title',        data: 'title'}
  ]
});

Then in the controller:

def index
  @authors = Author.where(author: params[:author])
  render json: { data: @authors }
end

In most cases you want the front-end to conform to the back-end, not the other way around. Your current `index` action returns JSON, with a `data` attribute specifically for `DataTable` usage. You could simply `render json: @authors` if you add the option `ajax: { /* ... */ dataSrc: '' }` which says to uses the root of the response as data instead of using the default `data` attribute as data. See: https://datatables.net/reference/option/ajax.dataSrc — 3limin4t0r, Oct 31 '19 at 15:17

score 1 · Accepted Answer · answered Oct 31 '19 at 13:19

1

How about

#_index.html
javascript:
  $('#AuthorsIndex').DataTable({
    ajax: '/authors?author=<%= author %>',
    columns: [
      {title: 'Publish Date', data: 'created_at'},
      {title: 'Publisher', data: 'publisher'},
      {title: 'Title', data: 'title'},
    ]
  });

#authors_controllers.rb
def index
  @authors = Author.where(author: params[:author])
  render json: { data: @authors }
end

answered Oct 31 '19 at 13:19

sameera207

16,547
19
87
152

Note that inserting it like this can cause problems. JavaScript should be escaped with the [`j`](https://api.rubyonrails.org/classes/ActionView/Helpers/JavaScriptHelper.html#method-i-j) helper, otherwise an author that includes the `'` character corrupts your JavaScript. Furthermore, since you are inserting the value directly into the URL, you should also [encode special URL characters](https://ruby-doc.org/stdlib-2.6.5/libdoc/uri/rdoc/URI.html#method-c-encode_www_form_component). Thus resulting in something like `<%= j URI.encode_www_form_component(author) %>` – 3limin4t0r Oct 31 '19 at 15:07

Passing variable to controller through Ajax call

2 Answers2