How to pass model data to JavaScript (Rails)

Question

I have an MVC architecture I would like to maintain. In my view, I have a button that will cause the chessboard to be updated according to some row in the ChessPosition database. Currently, I am inputting the data (chess position) into a hidden span and then accessing the span in JavaScript. Obviously, this is jank. I would also have trouble updating the span for the next position if the button is clicked again. What's a good way of passing the model into JavaScript? In my controller, I load the model into a variable, can I use that in JavaScript? If so, how?

HTML:

<span id="tactic_info" style="visibility: hidden"><%=generate_tactic(@tactic_model) %></span>
<button id="tactic_generator">Generate Tactic</button>

helper:

module AppsHelper
  def generate_tactic(model)
    id = Random.new.rand(1..Tactic.all.size)
    t = model.find(id)
    @tactic = [t.fen, t.solution]
  end
end

JS:

let tactic, tg;
window.onload = function() {
    tactic = document.getElementById("tactic_info").textContent;
    tg = document.getElementById("tactic_generator");
    tg.onclick = function c() {
        console.log(tactic.split(',', 2));
    };
};

There are tons of ways - data attributes, using JSON instead of janky JS.erb requests (the server passes back the state of the board for each move which is the single should of truth and you just redraw it), inserting JSON as globals with script tags... — max
– max, Commented Feb 22, 2021 at 17:37
@RockwellRice I added some code you may find helpful in analyzing. I talked to someone else and they said I am basically doing the data attribute thing. — JTalbott
– JTalbott, Commented Feb 22, 2021 at 17:57

HCSully · Accepted Answer · 2021-02-22 22:05:50Z

A good option would be to use AJAX. Maybe google around a little about Ruby AJAX and repsond_to blocks.

You can send your data through javascript with a get request, or setup a link_to helper. For a get request, the url you send your data to, needs to macth up with a route you create.

Get Request Example:

In your click handler, $.get(/new_task) . . .

In the routes, get'/new_task' => 'taskcontroller#new'

Link_to Example:

<%= link_to 'New Task', new_task_path, remote: true %>

the 'remote: true' piece allows the request to be submitted via ajax to your controller and action. In this case, the controller would be TasksController and the action would be 'new'

Now, over in your Controller Action, you need to setup a respond_to block - this will allow you to pass data back in a particular format. That will be similar to this

def new
 . . .
 work with data your wish to gather/alter/pass back
 . . .

 respond_to do |format|
     format.html
     format.json
 end
end

The data returned from the respond_to block will be scoped to a partial that is named the same as your controller action. So for this example, you might have a Task folder, with a new.erb in it.

Implant your new partial, and it should refresh itself, when the data changes.

The manual pages can be a little dry to read over, but these two pages should be helpful

https://tadhao.medium.com/traditional-way-of-performing-ajax-operation-in-rails-with-javascript-jquery-54dae69ec3a1

https://apidock.com/rails/ActionController/MimeResponds/InstanceMethods/respond_to

Collectives™ on Stack Overflow

How to pass model data to JavaScript (Rails)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related