0

I've been puzzled by the following code. Could someone tell me what I'm doing wrong that javascript fails to access the value p ? Thanks !

<% p=progress_for(contest_score) %> # p is non-zero

<script type="text/javascript">
  $(function(){
      $('#contest_progressbar').progressbar({value: <%=p%>}); 
      <!--value p becomes 0 when rendered by jquery-->

      $("#contest_progressbar").css({ 'background': 'LightYellow' });
      $("#contest_progressbar > div").css({ 'background': 'Orange' });
      $('#contest_progressbar span.text').text(<%=p%>+'%')
      <!--value p becomes 0 when rendered by jquery-->

   });
</script>
progress: <%=p%> progress bar should be below: # p is the correct value here

<div id='contest_progressbar' style="margin-left:20px; height: 20px;">
  <span class="text"></span>
</div>

EDIT: Using straight script tag instead. Same problem though EDIT2: Seems to be a JQuery problem now. See the html in the comment to Bryan's answer

tm65
  • 1
  • 1
  • 2
    That theoretically should work fine from what I see. When you do "view source" in your browser, is it actually being printed out as processbar({value: 0}) in the HTML output? – hayesgm Aug 13 '11 at 22:41
  • I'm assuming the ruby comments at the end of the javascript lines is something you added for us here, yes? – jaydel Aug 13 '11 at 23:09
  • Also, is there any particular reason you're using JavaScript to fixed values (which is best like `<%= text %>`) and style information (which is best in a CSS file)? – brymck Aug 13 '11 at 23:20
  • CORRECTION : ghayes, yes view source show {value: 0}. But the value SHOULD NOT be zero. jaydel yes comments are added to this question, not in my code. Just try to explain the difference. @Bryan, the span text code was borrowed from a SO example. Thanks for the suggestion, I'd make that change. Right now, the progressbar is holding things up! – tm65 Aug 14 '11 at 01:19
  • [CORRECTION : view source actually show the correct non-zero value, my mistake. But when viewed in Firebug, the div for the progress bar has a width value of 0. If I change that to something else in Firebug, the progressbar is displayed. ] – tm65 Aug 14 '11 at 01:36

2 Answers2

0

Is it possible that jQuery just isn't loading? If you check in your debugger, it might give you a hint, something like $ is not defined. If there's a Prototype/jQuery conflict (highly possible if you're using Rails before v3.1), it may fail silently.

It may also be the case that JS code block needs to appear after you've loaded jQuery. The reason I'm thinking this is the issue is that, given the information you've provided, something like $('#contest_progressbar span.text').text(5+'%'); should always work if you have jQuery loaded correctly and no other elements with the ID contest_progressbar.

Example: http://jsfiddle.net/6JQNe/1/

Also, a few minor points:

  • You need <%= javascript_tag do %> (note the equals sign) to make sure it renders.
  • "#contest_progressbar > div" will not match anything
brymck
  • 7,555
  • 28
  • 31
  • 32%
    – tm65 Aug 14 '11 at 02:37
  • Qutie sure JQuery is there. We took care of Prototype/JQuery issue awhile back. (It's Rails 3 we're using btw). See the div generated by Jquery aboove. The problem is that aria-valuenow in the outter div and width in the inner div are both 0. When the progressbar is created by hardcoding a value, that would show up in the mentioned two values. – tm65 Aug 14 '11 at 02:39
  • Regarding your second minor point, I borrowed the progressbar coloring code here: [link](http://stackoverflow.com/questions/1476573/jquery-ui-how-to-change-the-color-of-a-progressbar) – tm65 Aug 14 '11 at 02:44
0

Problem fixed. It had nothing too do with JQuery. The div id for the progressbar was clobbered because the code is in a partial, which is called by a view method in a loop. Every calls keep overwriting the same div. The code below produces the result I want. 

<% pbar_id="pbar_#{contest_score.user_id}" %>

<script type="text/javascript">
  $$(function(){
      $$('#'+"<%=pbar_id%>").progressbar({'value':<%=p%>})
      $$('#'+"<%=pbar_id%>").css({ 'background':'LightYellow' });
      $$('#'+"<%=pbar_id%>"+' > div').css({ 'background':'Orange' });
   });
 </script>
progress: <%=p%>%
<div id=<%=pbar_id%> style="margin-left:20px; width:256px; height:20px;">
</div>
tm65
  • 1
  • 1