Dynamically Generating jQuery script in Rails 3 application

Question

I have following jQuery script in application.js for Rails 3 application. I like to make url parameter to be dynamically generated. For example id value in people controller needs to generated base on a parameter from the controller. The problem is that jQuery script in application.js is static so i'm not sure how to make a section of the code to be dynamic i.e. to accept parameters from the controller. please let me know if have some ideas and i greatly appreciated.

jQuery("#paactions").jqGrid({
    url: 'people/123456/pa.json',
    datatype: 'json',
    height: 'auto',
    pager: false,
    viewrecords: true,
    colNames: ['id', 'indexno', 'site', 'effective', 'processed', 'code', 'action',
               'officer', 'remarks'],
    colModel: [
        {name: 'id', index: 'key', width:50, key:true, hidden:true},
        {name: 'indexno', index: 'indexno', width:50, hidden:true},
        {name: 'site', index: 'site', width:4, hidden:false},
        {name: 'effective', index: 'effective', width:7},
        {name: 'processed', index: 'processed', width:7},
        {name: 'code', index: 'code', width:5, resizable: false, sortable:false},
        {name: 'action', index: 'action', width:15},
        {name: 'officer', index: 'officer', width:10},
        {name: 'remarks', index: 'remarks', width:50},
    ],
    caption: "Personnel Actions",
    autowidth: true,
    //width: 180,
    rowNum: 20
});

Answer 1

In a partial called _variables.haml:

:javascript
  var user = '#{current_user.email}';
  var paactions_url = '#{@paactions_url}';

In your controller:

@paactions_url = paactions_url

In your view:

= render :partial => "variables"

In your javascript:

jQuery("#paactions").jqGrid({
    url: paactions_url,
    datatype: 'json',
    height: 'auto',
    pager: false,
    viewrecords: true,
    colNames: ['id', 'indexno', 'site', 'effective', 'processed', 'code', 'action',
               'officer', 'remarks'],
    colModel: [
        {name: 'id', index: 'key', width:50, key:true, hidden:true},
        {name: 'indexno', index: 'indexno', width:50, hidden:true},
        {name: 'site', index: 'site', width:4, hidden:false},
        {name: 'effective', index: 'effective', width:7},
        {name: 'processed', index: 'processed', width:7},
        {name: 'code', index: 'code', width:5, resizable: false, sortable:false},
        {name: 'action', index: 'action', width:15},
        {name: 'officer', index: 'officer', width:10},
        {name: 'remarks', index: 'remarks', width:50},
    ],
    caption: "Personnel Actions",
    autowidth: true,
    //width: 180,
    rowNum: 20
});

Or switch haml to erb, or whatever templating language you're using. I'd also recommending namespacing the javascript you add there, but I don't know what your javascript looks like.

Answer 2

Add a meta tag to your layout which can contain the URL, the grab this as part of your script.

In the layout:

<meta name="person-url" content="/people/<%= @person.id %>/pa.json"/>

Of course you only need to render this when the appropriate instance variables are present.

In your JS:

url: $("meta[name=person-url]").attr('content')

Is find this technique very useful when I want my JS to be as unobtrusive as possible.