Passing data from javascript into .erb - javascript

I want to know if this is possible. I have a bit of javascript code that renders a page based on information from my Rails 2.3.17 application. This code is inherited and not my own. The problem is that I am trying to get data from the server about an object that I do not know about during run time. Basically I am trying to do this:
var record_id = 73;
if(<%= DataTable.find(record_id).value_of_record.nil? %>{
...
}else{
...
where the record_id is what I want to pass into the .erb selection at run time with javascript. Is this possible. And if not, is there any way I can call the information from javascript to get the id of the record passed inside the .erb file? The id is currently being stored in the html document.

As MrYoshiji said, you can use ruby instead so do something like this:
var record_id = <%= record_id = 5 %>;
if(<%= DataTable.find(record_id).value_of_record.nil? %>{
...
}else{
...
Initialising a variable in ruby returns the value so it will become just var record_id = 73; and the ruby variable is now available to the find method.

Related

Passing a local variable into another view's JS - Rails

Is there a way to grab / fetch a variable inside js between two different views? Say I have an index view with does:
<% foo.each do |foo| %>
<%= link_to 'bar', bar_path %>
<% end %>
Then in bar I want to add some jQuery to a specific element with foo.id selector:
$('div#<%= foo.id %>').fadeOut(); // I know the interpolation wouldn't work here
I know I can pass foo.id to bar with my path or send it via the locals hash, but how would I "grab" it with jQuery?
You can easily pass variables to JS using a gem called gon.
gem "gon"
All you have to do is add this gem to you Gemfile and then you can call gon inside any controller like this:
class PaymentsController < ApplicationController
def new
...
gon.controller = "payments"
gon.action = "new"
gon.message = "Hello World!"
...
end
end
And now, at any javascript (in following case, coffeescript) you can:
$ ->
# Check if it is the target controller and action
if gon? && gon.controller is "payments" && gon.action is "new"
alert gon.message
Is there a way to grab / fetch a variable inside js between two
different views
Not without hacking.
JS is an client-side technology, meaning it loads in the browser, not on the server. This is famous for causing so many issues for developers trying to bind to dynamically-named objects, much like what you're trying to do.
There are several ways around this. I'll go through them for you:
Class
The first way is to use a broader identifier, such as element type or class.
You're currently trying to select foo.id, which means you're going to have to pass that data directly to JS somehow. Inefficient.
A much better way would be to use something like this:
$("a.bar").on("click", function(e){
$(this).fadeOut();
});
--
URL
According to this resource, there are no inbuilt ways to pull query strings from JS: How to get the value from the GET parameters?
You may be able to do something like this:
$(document).ready(function(){
foo = window.location.search.substring(1); //Considering you have http://url.com/your/foo/id
$("#" + foo).fadeOut();
});
--
ERB
There is a final alternative, although this only works if you don't precompile your JS (which I'm not sure is actually feasible any more). That is to use ERB directly in your JS, rather like what you've done in the question.
Whilst this works for dynamic references (such as paths), I don't think it can pull data from a controller. Unless, of course, you put the script directly in your view - which goes against the conventions of MVC.
#app/views/bar/show.html.erb
<script>
// your code here
</script>
I think you need to create a js.erb file and in that pass a variable defined in your controller action.
The code insde js.erb would look like this :
<% fields_html = render "fields", :entity => #model %>
$("#fields-list").html("<%= escape_javascript fields_html %>")
Here fields is a partial I have created. :entity is basically passing of the variable value. #model is the variable defined inside controller action. fields-list is the id of the field I want to load using jquery.

calling ruby methods with arguments inside ERB?

I am storing a response in javascript variable. This is inside a .html.erb file.
var file = response.data.files[0];
I first made a call using
var f = "<%=link_onedrive%>"
This successfully calls a method link_onedrive
Then I made this call
var f = "<%=link_onedrive(%>file<%=)%>"
It throws an error
wrong number of arguments (0 for 1)
My question is how to make a ruby method call with argument from a erb.
edited
here's my link_onedrive
def link_onedrive(file)
uri = URI.parse("https://api.onedrive.com/v1.0")
http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = true
req = Net::HTTP::Post.new("https://api.onedrive.com/v1.0/drive/items/file.link/action.createLink)
req.content_type = "application/json"
req.body = '{"type" : "view"}'
response = http.request(req)
arr = JSON.parse(response.body)
arr["link"]["webUrl"]
end
ok... first you need to realise how erb works.
At the end of a controller action: Rails parses the erb and runs all the ruby first and uses it to generate some html+js code... at this point, the bit that says <%= link_onedrive %> gets completely overwritten by the result of calling the link_onedrive method... it's not there in the html anymore.
This html+js then gets sent to the browser and the browser (on the client's machine) runs the js that has already been created at this point.
You can't call the ruby from the javascript, because by that stage, there is no ruby left... just javascript.
If you want to call ruby methods from your javascript - you probably need to set up an ajax-post that posts to a controller that runs the ruby, and then returns a result that the javascript does something with.
or we need to help you rewrite the two bits of code... to get what you actually want some other way (but to do that we probably need to see what link_onedrive actually does)

In my asp.net-mvc file, how can I move my javascript to a seperate js file?

I have a bunch of javascript inside my view and its getting quite large so I want to move it to a separate js file. The one issue I have is that I have this line:
var tags = <%= new JavaScriptSerializer().Serialize(Model.Tags) %>;
which I obviously can't just copy over since it has the server side asp.net-mvc tags. What is the recommended way to deal with that:
Keep this one function inside the aspx page and have the javascript from the seperate js file call that function?
Other??
What you could do is have a JavaScript object contain all the information you get from the controller and pass it through a javascript function which is located in the external javascript file. You can also pass other information through the options variable.
Example:
var options = {
tags: <%= new JavaScriptSerializer().Serialize(Model.Tags) %>
};
initPage(options);
Usage:
function initPage(options) {
console.log(options.tags);
}
This depends a lot on the way you want to use it and the level of repeating.
Some thoughts:
The tags are static. Then I guess then don't really need to be in the model. So you can move them into a new Controller action which outputs the scipt. You can call this action in the <script> part of your view.
The tags are changing very frequently (maybe even at every page load). Then there is no gain in moving this in a separate script file.
If you set up your javascript file with proper closures, you can expose a property (or better yet, a parameter to the object/method) with which to pass that information along when you call that function.
Your Javascript would need to be something like this:
var JsFile = (function() {
var tags;
// list all of your methods here.
return {
var setTags = function(_tags) {
tags = _tags;
}
};
})();

logic in rails controller vs in javascript (.js.erb)

I have a large "data" active record object whose info I filter based on what the user clicks on a page, then I display that filtered data to the user. I was wondering where the best place to put the data-filtering logic is. Right now I do the filtering in the rails controller action, so that in the view I only have to say something like
<script>
var filtered_data = <%= raw #filtered_data %>
alert('first piece of data is: '+filtered_data[0])
var filtered_names = <%= raw #filtered_names %>
</script>
and other such vars.
or, I was considering just passing the whole #data like:
<script>
var data = <%= data.to_json.html_safe %>
var filtered_data = **some js logic to filter data var**
var filtered_names = **more js logic to filter for names, maybe using the jquery .map function, etc **
</script>
which way is better for performance? I would think client-side JS is better, but it's probably not client side anymore since it's a .js.erb? Or would having more logic in the js.erb still help a bit?
Thanks for any insight!
you should put as few logic as possible into your view...
if you filter the data via js, that data is beeing sent to the client (producing traffic).. so it is probably better to do the filtering on the server side.
always try just to display things in your view - this makes your code much more maintainable.

AJAX & ASP.net, Referencing server controls in external file

I've got some JavaScript in an ASP.NET page that looks like this:
var list = $get('<%=Topics.ClientID %>');
I have many functions written now where this syntax is used, and I would like to centralize my JavaScript and move this into an external JavaScript file. This breaks however, since 'Topics' cannot be found.
What is the best strategy for getting this to work? I assume I should pass the control/control information as a parameter to the function, but I can't seem to get the syntax to work. Any suggestions?
It's a common problem for ASP.NET JS development. As for me, I'm using same approach each time and it looks fine.
I'm used to OOP in Javascript, so most my JS external files look like:
function CouponManager()
{
}
And in .aspx code i do:
<script language="javascript">
var couponManager = new CouponManager();
</script>
If I need to pass some parameters I change the declaration of class to:
function CouponManager(params)
{
// .. stuff here
this.initialize = function(initParams)
{
// .. accessing initParams variable for server control IDs
};
this.initialize(params);
}
And from .aspx code I do the following:
<script language="javascript">
var couponManager = new CouponManager
({
txtCouponNameId = '<%= txtCouponName.ClientID %>',
txtCouponDescriptionId = '<%= txtCouponDescription.ClientID %>'
});
</script>
This approach allows me to separate JS from .aspx page and have all server control dependencies in a single tag.
You should create a javascript method from inside the usercontol which returns the client side element. Then in your other page/control, just access that method
In User Control
<script language="javascript">
function GetTopics() {
return = $get('<%=Topics.ClientID %>');
}
</script>
In other page/control
<script language="javascript">
var list = GetTopics();
</script>
Edit - The problem you are facing is you need Topics.ClientID where it doesn't exist. So the only real way to bridge that gap is to put it in a common place. If you really don't want to do that, you can try and select your element by some other criteria. If you are using jQuery, you could mark an element with a class of Topics then find it with $(".Topics").
if you know that you only have one server control called "Topics" per page, and you use naming conventions you can inherit from whatever the control Topics is (maybe it's a HiddenField? you don't specify) and override its ClientId getter to return its server id like this:
http://andreascode.wordpress.com/2009/04/27/tiny-drips-of-aspnet-juice/
then you can know in your javascript files that there will be a hidden field in the page with the id set to "Topics" and use that directly.
depending on your domain/situation this could either save you a lot of time or screw you over big time.

Categories