.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

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.