CODEWITHSUNDEEP
javascriptruby-on-rails
Colin Ramsay
Colin Ramsay

Reputation: 16476

Ruby on Rails with Unobtrusive JavaScript - Managing URLs

I'm using a modular system of JavaScript files when working in Rails - basically each view will have its own module in a .js file. My issue comes when I need a dynamic, Rails generated string within my JavaScript, for example translation strings and URLs.

Translations are nicely solved using babilu but I'm still stuck on the generation of URLs. I could write something that looked at the routes in the application and generate JavaScript methods which I could pass stuff like IDs of objects.

An alternative would be to pass in the already-generated URL to any functions I was calling, which sounds messy but could be the most flexible alternative.

Upvotes: 3

Views: 813

Answers (3)

UrLicht
UrLicht

Reputation: 949

Oldish question, but here's another way. The HTML 5 spec allows for custom data- attributes.

In your view:

<button id="myButton" data-url="<%= my_resource_path %>">Click me</button>

Then in your packaged js:

var myurl = $("#myButton").data("url");

See here also.

Upvotes: 3

Nico
Nico

Reputation: 931

I don't like this either. The ideal solution to me would be javascript templates. Imagine in the .js file you could do:

var users_path = '<%= users_path %>';

But that would mean the .js files would have to be regenerated in every request (well, one could use caching just like with rails html).

Anyway, what you can also do is put the dynamic stuff in data- attributes. So you can do for example

<%= select_tag :select_something, select_options, 'data-url' => users_url %>

And then read that attribute out in the javascript file. I prefer this over the solution suggested by Pointy.

Edit: Well actually someone implemented the dynamic .js file idea. Seems straight forward enough, just create a javascripts controller and link to its actions via javascript_include_tag: dynamic javascript files

Upvotes: 0

Pointy
Pointy

Reputation: 413826

I don't know that there's any truly pleasing way to do this, but one possibility is to have your server-side code write a small <script> block into the page to declare some variables that your packaged Javascript can discover and use.

<script>
  var pageGlobals = {
    interestingURL: <% ... url %>,
    ...
  };
</script>

I've done this to keep track of things like image subdirectories that are determined by customer "syndicate" affiliation. The Javascript code just knows that whenever it needs that for a URL, it can just go look in a global object and pick out a standardized variable.

In my experience there tend to be only a small number of such things to communicate to the canned Javascript, so the <script> block tends not to get out of hand. I've buried mine in a page template so I don't even have to think about it with new pages.

Upvotes: 3

Related Questions