How can I call ajax, without “link_to” kind of helpers?


Tags: javascript,jquery,ruby-on-rails,css,ajax

Problem :

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.



Solution :

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.


    CSS Howto..

    How to create this CSS border

    How do I keep text from wrapping under an element which floats to its left?

    How to stop CSS within a RichText field from overwriting document

    How to target CSS for iPad but exclude Safari 4 desktop using a media query?

    How to I change this css psuedo button in Javascript/Jquery

    How to execute select() method on polymer elements based on URL?

    How to edit itemprop in div class in CSS? (Wordpress)

    How can I display these images with CSS instead of HTML?

    How to position an absolute div next to an element in a scrollable section, but outside the section

    How to convert from Powerpoint to HTML / CSS ? (FOSS)

    CSS stacking order - how to get this right?

    Using bootstrap, how do you get columns to clear properly?

    How to find number of style classes defined in a CSS file

    Modernizr: IE10 & Flexbox: How to get IE10 flexbox detected

    How to create a lightbox like this [closed]

    How do I use css transitions to scale an image and move it at the same time?

    How do you determine whether a CSS property requires browser specific prefixes?

    How to achieve this CSS layout - Answered [closed]

    ASP.NET: How to set the css class of a Control during DataBind?

    How to style one react component inside another?

    How to remove inline css with jQuery onClick [closed]

    How to add label to percentage bar in css and html?

    How to apply an image to a CSS ordered list in WordPress?

    How to get css value of an element inside array?

    How do I make this nested div to show up on top right corner and make text wrap around it?

    How to draw many diagonal lines[right hash lines] using css, html?

    How to reference another selector in css

    javascript/jquery - how to get the width of an element / css class that hasn't been added to dom yet

    How do I make a div not display, if the browser window is at a certain width? [duplicate]

    How put div element to bottom of another div element