Преобразование таблиц данных Javascript для использования Opal в приложении Rails
Я использую ajax-datatables-rails. Ниже приведен JS для моей таблицы данных. Я хочу преобразовать javascript в эквивалентный Opal.rb.
jQuery(document).ready(function() {
var table = $('#organizations-datatable');
var token = $('meta[name=csrf-token]').attr('content');
table.DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/organizations/datatable.json",
"type": 'POST',
"beforeSend": function (xhr) {
xhr.setRequestHeader('X-CSRF-Token', token)
}
},
"pagingType": "full_numbers",
"destroy": true,
"columns": [
{"data": "name"},
{"data": "desc"},
{"data": "industry"},
{"data": "tags"}
],
"iDisplayLength": 25
});
});
Он включает в себя добавление токена CSRF в запрос данных ajax.
Я хотел бы, чтобы весь наш javascript был написан как opal для удобочитаемости и т. д. Пожалуйста, не обсуждайте этот выбор, мне нужно только понять, как заставить это работать как Opalrb через opal/rails-ujs/opal-jquery
Приведенный ниже Opal не достигает того же, что и приведенный выше JS. Может ли кто-нибудь помочь мне понять, почему?
Element.expose :DataTable
Document.ready? do
token = Element['meta[name=csrf-token]'].attr('content');
settings = {
"processing": true,
"serverSide": true,
"ajax": {
"url": "/organizations/datatable.json",
"type": 'POST',
"beforeSend": lambda do
xhr = `new window.XMLHttpRequest()`
xhr.setRequestHeader('X-CSRF-Token', token)
end
},
"pagingType": "full_numbers",
"destroy": true,
"columns": [
{"data": "name"},
{"data": "desc"},
{"data": "industry"},
{"data": "tags"}
]
}
Element['#organizations-datatable'].DataTable(settings.to_n)
end
Что мне здесь не хватает? Почему этот Опал не годится?
Обновлено: вот как выглядит мой маршрут для этого, это гарантирует, что POST работает для этого:
Rails.application.routes.draw do
concern :with_datatable do
post 'datatable', on: :collection
end
resources :organizations, concerns: [:with_datatable]
end
Это мой связанный контроллер и код с данными, использующий драгоценный камень:
class OrganizationsController < ApplicationController
def index
@title = "Organizations"
@page_description = "Organization data warehouse"
@page_icon = "institution"
@organization = Organization.new
@load = {data_table: true}
@menu = Menu.new
respond_to do |format|
format.html
format.json { render json: OrganizationDatatable.new(params) }
end
end
def datatable
logger.ap "datatable params: #{params}"
respond_to do |format|
format.json { render json: OrganizationDatatable.new(params) }
end
end
def get_raw_records
Organization.all
end
def create
end
def edit
end
def destroy
end
def show
end
def update
end
def new
end
end
Вот данные
class OrganizationDatatable < AjaxDatatablesRails::ActiveRecord
extend Forwardable
include ActionView::Helpers::TextHelper
def_delegator :@view, :link_to
def view_columns
# Declare strings in this format: ModelName.column_name
# or in aliased_join_table.column_name format
@view_columns ||= {
# id: { source: "Organization.id" },
name: { source: "Organization.name",cond: :like, searchable: true, orderable: true },
desc: { source: "Organization.description",cond: :like, searchable: true, orderable: true },
industry: { source: "Organization.industry",cond: :like, searchable: true, orderable: true },
tags: { source: "Organization.tag_list", searchable: false, orderable: false }
}
end
def data
records.map do |record|
{
id: record.id,
name: record.name,
desc: truncate(record.description,length: 240, separator: ' '),
industry: record.industry,
tags: record.decorate.buttonize_tags,
DT_RowId: record.id
}
end
end
def get_raw_records
Organization.all
end
end
что именно не так работает? это может быть связано с beforeSend?
Таблица данных не заполняется. да. По сути, это 3 строки кода на JS и 5 на Opal. Я не вижу ошибки. Я не вижу никаких ошибок в консоли.
проблема не включена в вопрос, который вы разместили. Вам нужно добавить больше информации и лучше устранить эту проблему. В настоящее время вы предполагаете, что проблема заключается в этих 3 строках кода Opal, но у вас нет ни малейшего представления, пока вы не устраните ее правильно. Попробуйте создать простой пример Opal и посмотрите, работает ли он, затем попробуйте console.info с помощью Opal закодировать объект DataTable... и шаг за шагом добавляйте функциональные возможности, пока не увидите, что именно ломается, чтобы у вас было четкое представление о том, что происходит.. в противном случае мы могли бы просто попытаться угадать.
У вас есть скрытая ошибка, которую трудно устранить. Какие возможные ошибки в Javascript вызывают тихие ошибки?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я начну с указания на несколько ошибок в вашем коде,
Код в beforeSend является проблематичным, обратитесь к предоставление-метода-xhr, измените его на приведенный ниже код,
"beforeSend": lambda do |xhr|`xhr.setRequestHeader('X-CSRF-Token', token)`
заключите операторы xhr в ( ` ) обратными кавычками, как указано выше.
столбцы должны иметь двумерный массив, а не массив объектов,
"columns": [ ["data": "name"], ["data": "desc"], ["data": "industry"], ["data": "tags"] ]
Остальной код выглядит нормально.
Ниже приведен проверенный код,
Element.expose :DataTable
Document.ready? do
token = Element['meta[name=csrf-token]'].attr('content');
settings = {
"ajax": {
"url": "/data.json",
"type": 'POST',
"beforeSend": lambda do |xhr|
`xhr.setRequestHeader('X-CSRF-Token', token)`
end
},
"pagingType": "full_numbers",
"destroy": true,
"columns": [
["data": "Name"],
["data": "Position"],
["data": "Office"],
["data": "Extn."],
["data": "Start"],
["data": "Salary"]
]
}
Element['#organizations-datatable'].DataTable(settings.to_n)
end
Убедитесь, что у вас есть файл data.json в общей папке приложения rails и его содержимое выглядит следующим образом:
{
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
],
[
"Ashton Cox",
"Junior Technical Author",
"San Francisco",
"1562",
"2009/01/12",
"$86,000"
],
[
"Cedric Kelly",
"Senior Javascript Developer",
"Edinburgh",
"6224",
"2012/03/29",
"$433,060"
],
[
"Airi Satou",
"Accountant",
"Tokyo",
"5407",
"2008/11/28",
"$162,700"
],
[
"Brielle Williamson",
"Integration Specialist",
"New York",
"4804",
"2012/12/02",
"$372,000"
],
[
"Herrod Chandler",
"Sales Assistant",
"San Francisco",
"9608",
"2012/08/06",
"$137,500"
],
[
"Rhona Davidson",
"Integration Specialist",
"Tokyo",
"6200",
"2010/10/14",
"$327,900"
],
[
"Colleen Hurst",
"Javascript Developer",
"San Francisco",
"2360",
"2009/09/15",
"$205,500"
],
[
"Sonya Frost",
"Software Engineer",
"Edinburgh",
"1667",
"2008/12/13",
"$103,600"
],
[
"Jena Gaines",
"Office Manager",
"London",
"3814",
"2008/12/19",
"$90,560"
],
[
"Quinn Flynn",
"Support Lead",
"Edinburgh",
"9497",
"2013/03/03",
"$342,000"
],
[
"Charde Marshall",
"Regional Director",
"San Francisco",
"6741",
"2008/10/16",
"$470,600"
],
[
"Haley Kennedy",
"Senior Marketing Designer",
"London",
"3597",
"2012/12/18",
"$313,500"
],
[
"Tatyana Fitzpatrick",
"Regional Director",
"London",
"1965",
"2010/03/17",
"$385,750"
],
[
"Michael Silva",
"Marketing Designer",
"London",
"1581",
"2012/11/27",
"$198,500"
],
[
"Paul Byrd",
"Chief Financial Officer (CFO)",
"New York",
"3059",
"2010/06/09",
"$725,000"
],
[
"Gloria Little",
"Systems Administrator",
"New York",
"1721",
"2009/04/10",
"$237,500"
],
[
"Bradley Greer",
"Software Engineer",
"London",
"2558",
"2012/10/13",
"$132,000"
],
[
"Dai Rios",
"Personnel Lead",
"Edinburgh",
"2290",
"2012/09/26",
"$217,500"
],
[
"Jenette Caldwell",
"Development Lead",
"New York",
"1937",
"2011/09/03",
"$345,000"
],
[
"Yuri Berry",
"Chief Marketing Officer (CMO)",
"New York",
"6154",
"2009/06/25",
"$675,000"
],
[
"Caesar Vance",
"Pre-Sales Support",
"New York",
"8330",
"2011/12/12",
"$106,450"
],
[
"Doris Wilder",
"Sales Assistant",
"Sidney",
"3023",
"2010/09/20",
"$85,600"
],
[
"Angelica Ramos",
"Chief Executive Officer (CEO)",
"London",
"5797",
"2009/10/09",
"$1,200,000"
],
[
"Gavin Joyce",
"Developer",
"Edinburgh",
"8822",
"2010/12/22",
"$92,575"
],
[
"Jennifer Chang",
"Regional Director",
"Singapore",
"9239",
"2010/11/14",
"$357,650"
],
[
"Brenden Wagner",
"Software Engineer",
"San Francisco",
"1314",
"2011/06/07",
"$206,850"
],
[
"Fiona Green",
"Chief Operating Officer (COO)",
"San Francisco",
"2947",
"2010/03/11",
"$850,000"
],
[
"Shou Itou",
"Regional Marketing",
"Tokyo",
"8899",
"2011/08/14",
"$163,000"
],
[
"Michelle House",
"Integration Specialist",
"Sidney",
"2769",
"2011/06/02",
"$95,400"
],
[
"Suki Burks",
"Developer",
"London",
"6832",
"2009/10/22",
"$114,500"
],
[
"Prescott Bartlett",
"Technical Author",
"London",
"3606",
"2011/05/07",
"$145,000"
],
[
"Gavin Cortez",
"Team Leader",
"San Francisco",
"2860",
"2008/10/26",
"$235,500"
],
[
"Martena Mccray",
"Post-Sales support",
"Edinburgh",
"8240",
"2011/03/09",
"$324,050"
],
[
"Unity Butler",
"Marketing Designer",
"San Francisco",
"5384",
"2009/12/09",
"$85,675"
],
[
"Howard Hatfield",
"Office Manager",
"San Francisco",
"7031",
"2008/12/16",
"$164,500"
],
[
"Hope Fuentes",
"Secretary",
"San Francisco",
"6318",
"2010/02/12",
"$109,850"
],
[
"Vivian Harrell",
"Financial Controller",
"San Francisco",
"9422",
"2009/02/14",
"$452,500"
],
[
"Timothy Mooney",
"Office Manager",
"London",
"7580",
"2008/12/11",
"$136,200"
],
[
"Jackson Bradshaw",
"Director",
"New York",
"1042",
"2008/09/26",
"$645,750"
],
[
"Olivia Liang",
"Support Engineer",
"Singapore",
"2120",
"2011/02/03",
"$234,500"
],
[
"Bruno Nash",
"Software Engineer",
"London",
"6222",
"2011/05/03",
"$163,500"
],
[
"Sakura Yamamoto",
"Support Engineer",
"Tokyo",
"9383",
"2009/08/19",
"$139,575"
],
[
"Thor Walton",
"Developer",
"New York",
"8327",
"2013/08/11",
"$98,540"
],
[
"Finn Camacho",
"Support Engineer",
"San Francisco",
"2927",
"2009/07/07",
"$87,500"
],
[
"Serge Baldwin",
"Data Coordinator",
"Singapore",
"8352",
"2012/04/09",
"$138,575"
],
[
"Zenaida Frank",
"Software Engineer",
"New York",
"7439",
"2010/01/04",
"$125,250"
],
[
"Zorita Serrano",
"Software Engineer",
"San Francisco",
"4389",
"2012/06/01",
"$115,000"
],
[
"Jennifer Acosta",
"Junior Javascript Developer",
"Edinburgh",
"3431",
"2013/02/01",
"$75,650"
],
[
"Cara Stevens",
"Sales Assistant",
"New York",
"3990",
"2011/12/06",
"$145,600"
],
[
"Hermione Butler",
"Regional Director",
"London",
"1016",
"2011/03/21",
"$356,250"
],
[
"Lael Greer",
"Systems Administrator",
"London",
"6733",
"2009/02/27",
"$103,500"
],
[
"Jonas Alexander",
"Developer",
"San Francisco",
"8196",
"2010/07/14",
"$86,500"
],
[
"Shad Decker",
"Regional Director",
"Edinburgh",
"6373",
"2008/11/13",
"$183,000"
],
[
"Michael Bruce",
"Javascript Developer",
"Singapore",
"5384",
"2011/06/27",
"$183,000"
],
[
"Donna Snider",
"Customer Support",
"New York",
"4226",
"2011/01/25",
"$112,000"
]
]
}
добавить opal к Gemfile,
gem 'opal-rails'
gem 'opal-jquery'
application.js.rb содержимое,
require 'opal'
require 'jquery'
require 'opal-jquery'
require 'datatables.min'
require_tree '.'
добавить datatables.min.js файл в app/assets/javascripts папку
HTML,
<table id = "organizations-datatable" class = "display" style = "width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
ПРИМЕЧАНИЕ :- Если вы хотите, чтобы он работал с POST, вам нужно настроить config/routes.rb,
Добавьте следующую запись в route.rb для вашего файла json:
Для меня это было,
post '/data.json', :to => redirect('/data.json')
Для тебя это будет,
post '/organizations/datatable.json', :to => redirect('/organizations/datatable.json')
Полный код здесьhttps://gitlab.com/shoyebsheikh/opal-datatables
Решение Ajax datatables rails gem:
Вы можете добавить следующую строку к своим маршрутам, предполагая, что это источник данных,
post '/organizations/datatable.json', :to => redirect('/organizations/datatable.json')
Ваш контроллер должен быть таким,
class OrganizationsController < ApplicationController
def datatable
params["columns"] ||= { "0" => {"data" => "" } }
params["length"] ||= -1
respond_to do |format|
format.html
format.json { render json: OrganizationDatatable.new(params) }
end
end
end
И ваши данные следующим образом:
class OrganizationDatatable < AjaxDatatablesRails::ActiveRecord
def view_columns
# Declare strings in this format: ModelName.column_name
# or in aliased_join_table.column_name format
@view_columns ||= {
# id: { source: "Organization.id" },
name: { source: "Organization.name",cond: :like, searchable: true, orderable: true },
desc: { source: "Organization.description",cond: :like, searchable: true, orderable: true },
industry: { source: "Organization.industry",cond: :like, searchable: true, orderable: true },
tags: { source: "Organization.tag_list", searchable: false, orderable: false }
}
end
def data
records.map do |record|
{
# id: record.id,
name: record.name,
desc: truncate(record.description,length: 240, separator: ' '),
industry: record.industry,
tags: record.decorate.buttonize_tags,
DT_RowId: record.id
}
end
end
def get_raw_records
Organization.all
end
end
В твоем organizations.js.rb идет опаловый код,
Document.ready? do
token = Element['meta[name=csrf-token]'].attr('content');
settings = {
"ajax": {
"url": Element['#organizations-datatable'].data('source'),
"type": 'POST',
"beforeSend": lambda do |xhr|
`xhr.setRequestHeader('X-CSRF-Token', token)`
end
},
"pagingType": "full_numbers",
"destroy": true,
"columns": [
{"data": "name"},
{"data": "desc"},
{"data": "industry"},
{"data": "tags"}
]
}
Element['#organizations-datatable'].dataTable(settings.to_n)
end
И в html,
<table id = "organizations-datatable" data-source = "<%= organizations_index_path(format: :json) %>">
<thead>
<tr>
<th>Name</th>
<th>Desc</th>
<th>Industry</th>
<th>tags</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
organizations_index_path может быть organizations_path или в единственном числе, например organization_index_path или organization_path, в зависимости от имени вашего контроллера.
Пожалуйста, обратитесь к https://gitlab.com/shoyebsheikh/ajax-datatables-rails-with-opal для получения дополнительной информации.
Примечание:
- Использовал гем mysql2.
- Запустите миграцию и добавьте записи в таблицу из rails CLI или вручную в таблице.
- Если вы запускаете проект после установки всех зависимостей и выполнения миграции, посетите http://локальный: 3000/пользователь/индекс или http://локальный: 3000/hello_world/индекс.
POST требуется, чтобы избежать ошибки 414 Request-URI Too Large.
Все примеры, которые у меня есть для таблиц данных, используют GET, когда я использовал POST в этом примере, он не распознавал файл json.
Использование POST происходит от это и это... Я использую драгоценный камень ajax-datatables-rails, и для чего это стоит, у меня есть таблицы данных, хорошо работающие с POST с использованием javascript. Фактически, фрагмент javascript в OP отлично работает в Rails. datatable заполняется без проблем, даже с массивом объектов. Я буквально пытаюсь заставить Opal генерировать тот же результат.
Я пытаюсь понять это сейчас. Спасибо за ответ.
Я все еще застрял на этом. Я хотел наградить тебя, но это не решило проблему, которая меня сбивает с толку.
да. Я сделал это. Как я уже упоминал в OP, он прекрасно работает как Javascript OP. Я хочу понять, как заставить его работать как Opal.
@MichaelKMadison, это опал, и вы сказали мне, что требуется POST, поэтому я добавил код для работы с ajax POST. Вы видели мой отредактированный код?
Смотрите мои маршруты в редактировании, они охватывают POST и работают в javascript, но не для Opal. Я действительно озадачен этим.
Я не уверен, что вы спрашиваете, мои опаловые работы и заполняют таблицы данных.
Я оценю, и если да, я открою еще одну награду и дам вам. Я понятия не имею, что это значит для моей среды, если это не работает для меня.
Это не работает для меня. Можете ли вы опубликовать свой на Github. Я действительно хочу добраться до сути этого. Какую версию Opal вы используете и т. д.
Чувак. В целом большое спасибо. Как только я посмотрю на него, я назначу еще одну награду и награду для вас... сейчас собираюсь клонировать его.
Спасибо, Шойебх. Это совершенно безумие. Либо один из моих драгоценных камней, либо что-то еще в моей среде портит эту версию с данными. Что бы ни. (Может быть, rails_ujs? Я не знаю. Я обновлю это, когда узнаю.) Что я знаю точно, так это то, что вы решили эту проблему, и ваш репозиторий поможет мне сузить круг проблем, вызывающих проблему. За ваше усердие я даю вдвое больше первоначальной награды, поэтому вместо 50 я дам 100 (помимо потери первоначальных 50). Ты старался изо всех сил, чтобы помочь мне, и это должно быть вознаграждено. Большое вам спасибо. 100 баллов ваши после 24 часов ожидания.
О, я добавлю, что я также использовал более низкую версию рубина. Я обнулю переменную и выясню, что происходит. И на самом деле ваша реализация включает гем ajax-datatables-rails, но, насколько я вижу, может даже не использовать его. Я могу удалить его полностью, если это причина.
@MichaelKMadison да, вы можете вынуть гем ajax-datatables-rails, я включил его, потому что вы упомянули об этом в своем вопросе, но я понял, что вы также его не используете, но когда я попытался удалить этот гем, он выдал мне ошибку, поэтому я ушел это как есть, и да, мой код не использует его, рад, что мой код сработал для вас.
Гем ajax-datatables-rails успешно удален и отправлен в проект git gitlab.com/shoyebsheikh/opal-datatables
Shoyeb да, я использую гем ajax-datatables-rails, я добавлю для него свой код и дам вам еще 200 баллов, если вы сможете заставить их работать вместе (Opal и ajax-datatables-rails)
OK. Я добавил детали выше. Помогите мне с этим и заработайте еще 200 баллов
Ответ @MichaelKMadison обновлен, используется гем ajax-datatables-rails и добавлена ссылка на проект gitlab, попробуйте клонировать проект и внести соответствующие изменения в свой код.
Shoyeb, сама идея меня очень порадовала. Спасибо за ваше усердие, конечно, я рассмотрю и награжу, если это сработает.
вы отправили обновление в тот же репо? Эта ссылка ведет меня к старому репо, в котором нет драгоценного камня и не создана папка с данными или класс с данными.
хорошо, я вижу это под вашим пользователем на gitlab. Чтобы другие тоже нашли его — оно здесь: gitlab.com/shoyebsheikh/ajax-datatables-rails-with-opal
OK. Я заполнил таблицу пользователей, и она чертовски работает. Я действительно понятия не имею, что не так с моим, но он использует ajax-datatables-rails и Opal. Шиш. Я человек слова. Эти 200 баллов. твои. Я предполагаю, что вы оставите репо для других или достаточно хорошо опишете его выше.
Еще раз спасибо, мой друг. Вполне заслуженно.
@MichaelKMadison, да, я не удаляю эти два репозитория, оставляя их для изучения другими, я рад, что смог помочь, желаю, чтобы ваш проект заработал как можно скорее.
в чем разница между двумя результатами? Я советую вам установить
binding.pryи проверить значения всех переменных в вашем скриптеOpal