We Keep Coding

Rails - how put javascript variable into erb code

I've seen some similar question, but still don't know how achieve my goal.
I want to do that thing:
Display modal with products represented by divs.
User choose some products (I add .active class to chosen products)
Then I use jQuery to make array of chosen products ids.
In the end I want to create div for each product, which will be include some informations about this product from database. I'm using js .append() to do it. And here is a problem.
This code is in my script tag in proper view.
var chosen_products_array;
$('.product-to-choose').click(function() {
$(this).toggleClass("active");
$(this).find('i').toggleClass("visible");
});
$('#chosen-products-confirm').click(function() {
var chosen_products = $('.product-to-choose.active');
chosen_products_array = jQuery.makeArray( chosen_products );
});
$('#confirm').click(function() {
var textToInsert = '<div><h4>Products:</h4>';
$.each(chosen_products_array, function(count, item) {
var id = $(item).attr('id').substr(8); // id is product_number
textToInsert += '<div><li name="chosen-product"> <%= current_user.products.find(' + id +').name %></li></div>';
});
textToInsert += '</div>';
$('#div-example').append(textToInsert);
});
My controller create action:
def create
#meal = current_user.meals.build(meal_params)
if #meal.save
current_user.type_tags.each do |type_tag|
key = "type#{type_tag.id}"
if params[key]
#meal.type_tags << type_tag # zapis do bazy danych
end
end
flash[:success] = "Create new meal!"
redirect_to meals_path
else
#render 'meals/new'
end
end
This line generates error:
textToInsert += '<div><li name="chosen-product"> <%= current_user.products.find(' + id +').name %></li></div>';
Error:
Couldn't find Product with 'id'=+id+ [WHERE "products"."user_id" = ?]
I know there is a problem in passing js variables to rails erb, but how can I solve it in this case? I tried with gon too.
In my controller, I added:
gon.products = current_user.products
and then try
alert(gon.products)
it's ok - array of objects, but when I try
alert(gon.products.find(1))
it doesn't work.
Have you got any idea how can I put this javascript id variable to erb code? Or maybe is any different solution?

Probably the best would be to add a remote form (it may be hidden) that posts whatever you want (javascript values) and then it is handled by a controller. Then you can render it with js views.
This would probably be the most "rails-like" solution.
Here's some code:
In the routes:
resource :my_form, only: :create
In the view:
<%= form_tag(my_form_path, remote: true, method: :post) do %>
<%= hidden_field_tag :val %>
<% end %>
You alter the val dynamically by javascript, and submit the form whenever you want to.
Then, in the controller you have something like this:
respond_to :js
def create
# do something with params['val']
#my_val = params['val']
end
And you would also add create.js.erb view, where you could add some javascript that can use any of the instance variables created in the controller.
//create.js.erb
$('#someElement').html('<%= #my_val %>');
Let me stress if it is not clear, the form is remote (ajax), so it is sent in the background and the page is not reloaded.
When the browser receives the response, it may contain any javascript you decide to render (the contents of create.js.erb), and then the browser executes that javascript.
So, you can add there any jquery commands with arguments that you changed dynamically by rails, or you could also render html partials and replace any elements with them, like this:
//create.js.erb
$('#my_id').html('<%= j(render partial: 'my_form/_some_partial.html.erb', locals: { my_val: #my_val }) %>');
More details on Working with JavaScript in Rails
UPDATE
Another, inferior but simpler to implement solution would be to always render all products, but have them hidden initially, and then show them by jQuery on demand. You would just need to add appropriate css classes or data attributes to those products, as well as the links you use to select them.

The problem is that erb code is evaluated on the server before the browser even fetches the javascript file, so it doesn't make sense to use this way. It's recommended that you only use erb in your javascript for simple things like asset_path

I think first make your model visible to the browser as js variable(json object) . Some thing like below at the end of your view file(below is the haml syntax):
:javascript
var userProducts = #{#current_user.products.to_json};
Then use it in javascript expression

How to Render JS and Iterate Over Array With Rails Controller

I have a button on a view that triggers a controller action, which runs a bunch of stuff and returns and array of strings (each string is formatted as a div ex; "Hello"). I then want to take this array and add each element to the page on which the button was clicked.
Controller Method:
def test
#id = params[:id]
if #id == 'run'
#res = Preflight.run
respond_to do |format|
format.js {render :js => 'run'}
end
else
render #id
end
end
run.js.erb File:
$('#header3').show();
$('#header2').hide();
<%= puts 'made it to the js file' %>
<% #res.each do |line| %>
$('#results').append(<%= line %>);
<% end %>
I know that #res is returning the array as intended, I'm unable to get the JS to trigger. Any ideas? It doesn't run the show/hide so I think the bug has to do with how I'm attempting to call the js file, but I'm unsure what I'm doing wrong here.

Do you use the remote: true option in your HTML, when you call the test action?

Remember that when you want to output a JS string you need to wrap it in quotes:
$('#results').append("<%= #res.join() %>");

How to assign and access a javascript variable in Rails using ajax

I'm using the gon gem for rails, which allows you to save variables defined in a controller action and use them in your JavaScript. It works fine when I use it in non-Ajax settings, however, I'm having an issue with using it successfully when doing Ajax requests.
The problem: Ruby variables I assign to gon variables in the controller action when making Ajax requests come out as 'undefined' in the JavaScript.
The objective: I want to trigger an Ajax request on my page, which:
1) hits an action in the controller, and assigns a Ruby variable to a gon variable.
2) it then renders a js.erb file which executes JavaScript, part of which needs to take the Ruby variable defined in step 1, and treat it as a js variable.
here's the example action in step 1:
def some_action
gon.my_ajax_var = {some: 'info'}
end
here's the example js.erb file it renders:
/some_action.js.erb
console.log('gon.my_ajax_var equals ' + gon.my_ajax_var) //this doesn't work! comes out as 'undefined' when I expected {some: 'info'}
Any thoughts on how I fix this? I took a look at the gon.watch page, but I was confused as to whether that relates to this problem I'm having and how to implement the correct solution. Additionally, if there's a better way to do this without gon, I'm open to that as well.
Thanks!

I ended up solving this by doing the following:
In my controller:
def some_action
#my_ajax_var = {some: 'info'}.to_json
end
In my corresponding view:
/some_action.js.erb
var my_ajax_var = <%= #my_ajax_var.html_safe %>
Would've been nice to have piggybacked off the gon gem, but this got the job done.

It's some time ago that I used erb templates, but I think you need to add tags in your erb-file.
/some_action.js.erb
console.log('gon.my_ajax_var equals ' + <%= gon.my_ajax_var %>)

How to stay DRY when using both Javascript and ERB templates (Rails)

I'm building a Rails app that uses Pusher to use web sockets to push updates to directly to the client. In javascript:
channel.bind('tweet-create', function(tweet){ //when a tweet is created, execute the following code:
$('#timeline').append("<div class='tweet'><div class='tweeter'>"+tweet.username+"</div>"+tweet.status+"</div>");
});
This is nasty mixing of code and presentation. So the natural solution would be to use a javascript template. Perhaps eco or mustache:
//store this somewhere convenient, perhaps in the view folder:
tweet_view = "<div class='tweet'><div class='tweeter'>{{tweet.username}}</div>{{tweet.status}}</div>"
channel.bind('tweet-create', function(tweet){ //when a tweet is created, execute the following code:
$('#timeline').append(Mustache.to_html(tweet_view, tweet)); //much cleaner
});
This is good and all, except, I'm repeating myself. The mustache template is 99% identical to the ERB templates I already have written to render HTML from the server. The intended output/purpose of the mustache and ERB templates are 100% the same: to turn a tweet object into tweet html.
What is the best way to eliminate this repetition?
UPDATE: Even though I answered my own question, I really want to see other ideas/solutions from other people--hence the bounty!

imo the easiest way to do this would involve using AJAX to update the page when a new tweet is created. This would require creating two files, the first being a standard html.erb file and the second being a js.erb file. The html.erb will be the standard form which can iterate through and display all the tweets after they are pulled from the database. The js.erb file will be your simple javascript to append a new tweet upon creation, i.e.:
$('#timeline').append("<div class='tweet'><div class='tweeter'><%= tweet.username %></div><%= tweet.status %></div>")
In your form for the new tweet you would need to add:
:remote => true
which will enable AJAX. Then in the create action you need to add code like this:
def create
...Processing logic...
respond_to do |format|
format.html { redirect_to tweets_path }
format.js
end
end
In this instance, if you post a tweet with an AJAX enabled form, it would respond to the call by running whatever code is in create.js.erb (which would be the $('#timeline').append code from above). Otherwise it will redirect to wherever you want to send it (in this case 'Index' for tweets). This is imo the DRYest and clearest way to accomplish what you are trying to do.

Thus far, the best solution I found was Isotope.
It lets you write templates using Javascript which can be rendered by both the client and server.

I would render all tweets with Javascript. Instead of rendering the HTML on the server, set the initial data up as JS in the head of your page. When the page loads, render the Tweets with JS.
In your head:
%head
:javascript
window.existingTweets = [{'status' : 'my tweet', 'username' : 'glasner'}];
In a JS file:
$.fn.timeline = function() {
this.extend({
template: "<div class='tweet'><div class='tweeter'>{{tweet.username}}</div>{{tweet.status}}</div>",
push: function(hash){
// have to refer to timeline with global variable
var tweet = Mustache.to_html(timeline.template, hash)
timeline.append(tweet);
}
});
window.timeline = this;
channel.bind('tweet-create', this.push);
// I use Underscore, but you can loop through however you want
_.each(existingTweets,function(hash) {
timeline.push(hash);
});
return this
};
$(document).ready(function() {
$('#timeline').timeline();
});

I haven't tried this, but this just occurred to me as a possible solution:
In your view create a hidden div which contains an example template (I'm using HAML here for brevity):
#tweet-prototype{:style => "display:none"}
= render :partial => Tweet.prototype
Your tweet partial can render a tweet as you do now.
.tweet
.tweeter
= tweet.username
.status
= tweet.status
When creating a tweet prototype you set the fields you want to the js-template replacement syntax, you could definitely dry this up, but I'm including it here in full for example purposes.
# tweet.rb
def self.prototype
Tweet.new{:username => "${tweet.username}", :status => "${tweet.status}"}
end
On the client you'd do something like:
var template = new Template($('#tweet-prototype').html());
template.evaluate(.. your tweet json..);
The last part will be dependent on how you're doing your templating, but it'd be something like that.
As previously stated, I haven't tried this technique, and it's not going to let you do stuff like loops or conditional formatting directly in the template, but you can get around that with some creativity I'm sure.
This isn't that far off what you're looking to do using Isotope, and in a lot of ways is inferior, but it's definitely a simpler solution. Personally I like haml, and try to write as much of my mark up in that as possible, so this would be a better solution for me personally.
I hope this helps!

To be able to share the template between the javascript and rails with a mustache template there is smt_rails: https://github.com/railsware/smt_rails ("Shared mustache templates for rails 3") and also Poirot: https://github.com/olivernn/poirot.

Why is the proper "respond_to" format not getting called?

I'm having a bit of an odd issue. Really too odd to type out, but here goes. Basically I have a controller that refuses to "respond_to" using javascript unless I assign my "chart.generate_xml" to a variable before the "respond_to" block like so:
#xml = #chart.generate_xml(#begin_date,#end_date,1.hour)
respond_to do |format|
format.html
format.js{
render :update do |page|
page.insert_html :bottom, "chart-div", #xml
#page.insert_html :bottom, "chart-div", #chart.generate_xml(#begin_date,#end_date,1.hour)
end
}
If I remove the upper "#xml= …" portion and go with the lower "page.insert", the "format.js" section doesn't get called. And if I try to force the format with "request.format = :js", I get the javascript returned as text. I'm not doing anything special here in that method call, so I'm not sure why it would choose to respond any differently.
FWIW, the method that triggers this controller action is using JS to do so, so I'm confused as to why "format.js" isn't always getting called. Thoughts?
Best.

It could be an issue in your config/routes.rb file, as this can mess with the format.
Could you post this file and the header of the results from curl/wget?