Question

I have a block like :

      - competitors.each do |competitor|
        %dl
          %dt
            ...
          %dd
            %span{:id => "#{competitor['watchers']}"}= "#{((competitor['watchers']*100.0)/30000).round.to_f}%"

note that it generate dinamic CSS id, one each block clicle, resoulting html is a list of different dd –> span –> id number :

<dl>
  <dt>
    ...
    <dd>
      <span id="774">93.0%</span>
    </dd>
  </dt>
</dl>
<dl>
  <dt>
    ... 
    <dd>
      <span id="13774">46.0%</span>
    </dd>
  </dt>
</dl>

I want to “dinamically” associate “custom CSS snippets”, to the different css ids ( #13774 #774 ), something like :

:javascript
  $("##{competitor['watchers']}").css({ width: "#{((competitor['watchers']*100)/30000)}px" });

How can I call ajax (in Rails 3.2.3 ‘:remote => true’ ) without link_to kind of helpers ?

Untill now I tried just calling JS from inner block like :

      - competitors.each do |competitor|
        :javascript
          $("##{competitor['watchers']}").css({ width: "#{((competitor['watchers']*100)/30000)}px" });
        %dl
          %dt
            ...
          %dd
            %span{:id => "#{competitor['watchers']}"}= "#{((competitor['watchers']*100.0)/30000).round.to_f}%"

but it doesn’t work, the code is never injected into the DOM.

Answer 1

It looks like you’re trying to show some kind of bar graph, and in that case, I would suggest the following (I’m assuming you are using jQuery as that’s what’s tagged):

Change your block to add a unique class to each span. This gives you style benefits later.

%dd
        %span{:id => "#{competitor['watchers']}", :class => "progress-bar"}= "#{((competitor['watchers']*100.0)/30000).round.to_f}%"

Then you should be able to use some jQuery at the bottom of the page to select each one, and do some basic math on it:

$('span.progress-bar').each(function(index,element){
    var num = $(element).attr('id'); // get element id
    var width = parseInt(num * 100 / 30000); // do your math, then get the integer value for width
    $(element).css('width',width+'px'); // set width
}

I know you were looking for ajax, but unless I’m missing something, this should come close to solving your issues as documented.