.js.erb VS .js

Question

What is the advantage to putting you javascript for your rails app into a .js.erb file instead of just throwing it in your application.js file? I have a create button for businesses so should I put the code into a create.js.erb file or put it into my application.js using:

$("#business_submit").click(function() {}

All that aside is that I have my create button

    $('.error').hide();
$("#business_submit").click(function() {
    // validate and process form here

    $('.error').hide();
    var name = $("input#business_name").val();
    if (name == ""  || name == "Required Field") {
        $('#namelabel').show()
        $("#business_name").focus();
        return false;
    }
    var address = $("#business_address").val();
    if (address == ""  || address == "Required Field") {
        $('#addresslabel').show();
        $("#business_address").focus();
        return false;
    }
    var city = $("#business_city").val();
    if (city == "" || city == "Required Field") {
        $('#citylabel').show();
        $('#business_city').focus();
        return false;
    }
    var state = $("#business_state").val();
    if (state == ""  || state == "Required Field") {
        $('#statelabel').show();
        $("#business_state").focus();
        return false;
    }
    var zip = $("#business_zip").val();
    if (zip == ""  || zip == "Required Field") {
        $('#ziplabel').show();
        $("#business_zip").focus();
        return false;
    }
    var phone = $("#business_phone").val();
    if (phone == ""  || phone == "Required Field") {
        $('#phonelabel').show();
        $("#business_phone").focus();
        return false;
    }

     var category = $("#business_business_category_id").val();
    if (category == " - Choose one - ") {
        $('#categorylabel').show();
        $("#business_business_category_id").focus();
        return false;
    }
    $("#new_business")[0].reset();
    $("#new_business").toggle();
   return false;
});

This works great in my .js file but when I click create it doesn't actually send the information they typed in the form to the database. So I tried copy pasting the code into the .js.erb file. Now the form is submitted to the database when I click create, but half the javascript isn't working. The $('.error').hide(); isn't hiding my errors and they are all showing up regardless. $("#new_business")[0].reset(); isn't reseting my form, and there is no validation checks when I click create. So I either have a fully functional form that doesn't submit or one that submits but isn't really functional. Which one should I try to get working?

I see a lot of code with $.ajax but I can't figure it out for the life of me. I tried for a bit and I started getting some forgery protection errors in rails which is a whole other problem.

Answer 1

.js.erb files are for controller actions, such as create, when you want javascript to be executed when the action completes. For example, when you want to submit a form via ajax and want display an alert when everything is done, you would put the

$('#business_submit').click(...)

in your application.js or *.html.erb, and your create.js.erb could look like this:

alert('New object id: ' + <%= new_object.id %>);

This way, the javascript that is getting returned to the browser can be first rendered by Erb, allowing you to insert custom strings/variables/etc just like you can in .html.erb templates.

Answer 2

If I may contribute to the answer with my few cents...

The answer to your question is really simple :

• A file ending with *.js.erb allows your file to be interpreted by ruby . (So you will be able to use rails helpers)

• A file ending with *.js is a pure javascript .

You will never get a *.js file to work if you place any ruby code inside like:

$(function () {
  new Highcharts.Chart({
    chart: { renderTo: 'orders_chart' },
    title: { text: <%= gon.my_title_of_the_day.to_json %> },
  });
})

The part <%= gon.my_title_of_the_day.to_json %> will just generate an error because javascript knows nothing about ruby.

In order your *.js file works, you will have to statically change it every time the day changes:

$(function () {
  new Highcharts.Chart({
    chart: { renderTo: 'orders_chart' },
    title: { text: 'Monday' },
  });
})

NB : If you use a *.js.erb, you will need in addition the " Gon " gem to pass data from your controller to JS though.

Now for your underlying question "why is my javascript code not working '" I can't answer because I'm no javascript expert and this is another story... ;-)

Answer 3

Per my view, the reason to have js.erb files is to gain access to rails helpers like the something_url routes. I've found, most of the time, that those URLs are already embedded in the <form> tag or something like that, so I have little need for it. Processing everything with .erb also prevents you from caching javascript as aggressively.

For those reasons, I think the most appropriate decision is to put javascript in the most unobtrusive place possible: application.js (or other static scripts). Especially with jQuery, that's really as it was intended.

By the way, javascript_auto_include is a nice, tidy plugin for organizing your javascript according to the views that are rendered. Rather than stashing everything in application.js , you might consider this.

js.erb versus js.rjs

One of these two ( .erb ) is really for generating javascript from a template. This is the sort of thing you would include as a tag in the HTML. The other ( .rjs ) is about controlling page content in an AJAX response, and would not be run until such an AJAXy call was made.