Dynamic Javascript in my .html.erb

Question

I'm struggling with some Javascript in my first rails application.

Partial: _care_point.html.erb

<script>
  $(function() {
    $( ".draggable" ).draggable({grid: [50, 20]});
    $( ".node_input").each (function() {
      $(this).hide();
    });
    $("#<%="node.#{care_point.id}" %>").live('dblclick', function(){
      console.log('moo');
      jQuery(this).hide();
      jQuery('.node_input', jQuery(this).parent()).show();
    });
  });
</script>
<div id=<%="care_point.#{care_point.id}" %> class='draggable node_chin'>
  <div id=<%="node.#{care_point.id}" %> class='node'><%= care_point.body %>
  </div>
  <textarea class='node_input'><%= care_point.body %></textarea>
</div>

This is the output:

    <script> 
  $(function() {
    $( ".draggable" ).draggable({grid: [50, 20]});
    $( ".node_input").each (function() {
      $(this).hide();
    });
    $("#node.1").live('dblclick', function(){
      console.log('moo');
      jQuery(this).hide();
      jQuery('.node_input', jQuery(this).parent()).show();
    });
  });
</script> 
<div id=care_point.1 class='draggable node_chin'> 
  <div id=node.1 class='node'>Moo foo
  </div> 
  <textarea class='node_input'>Moo foo</textarea> 
</div>

I first added the dblclick event listener classbased, but that caused it to be added multiple times. This made me change it to a id based approach, but now it does not work. Is it because I try to dynamically build up the id?

Is this even the righ place to do this kind of thing?

Can you print what is outputted to the browser (use 'view source' on any browser) to see what has been put in place of variables? — Nicola Peluchetti
– Nicola Peluchetti, Commented Jun 15, 2011 at 9:45
It's considered bad practice to dynamically generate javascript. Use static packaged javascript files. — Raynos
– Raynos, Commented Jun 15, 2011 at 9:55
@Raynos - I don't even know what that means. Could you explain it in a post? — willcodejavaforfood
– willcodejavaforfood, Commented Jun 15, 2011 at 9:56
Views should contain HTML not javascript. Include your javascript in your layout view / master page. — Raynos
– Raynos, Commented Jun 15, 2011 at 9:57

neeebzz · Accepted Answer · 2011-06-15 09:56:44Z

3

Try the following:

$("#<%="node.#{care_point.id}" %>").live('dblclick', function(){
      console.log('moo');
      jQuery(this).hide();
      jQuery('.node_input', jQuery(this).parent()).show();
    });

edited Jun 15, 2011 at 9:56

answered Jun 15, 2011 at 9:44

neeebzz

11.5k7 gold badges50 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

d11wtq Over a year ago

+1. @willcodejavaforfood, you've got your quotes in the wrong place.

willcodejavaforfood Over a year ago

Still does not work, maybe Raynos has a point. This is the wrong place for Javascript. It worked until I made it dynamic.

neeebzz Over a year ago

Raynos point is valid but should'nt really stop your code working. After making the above change can you show me the source/html being generated using the same 'View Source'. It should render > $('#node.2').live('dblclick', function(){ as Nicola mentioned.

willcodejavaforfood Over a year ago

I've updated my post with your latest code and the new output

neeebzz Over a year ago

shux. pretty dumb of me. you can't use . in your html id. In jQuery selectors, dot notation specifies class. So basically when we ask jQuery to find '#node.2', it goes and find div with the id id=node and with class class=2. You can replace the dot with lets say underscore $("#<%="node_#{care_point.id}" %>")

|

Nicola Peluchetti · Accepted Answer · 2011-06-15 10:36:59Z

2

The problem is here:

 $("#'#node.2'").live('dblclick', function(){

To work it must be:

 $('#node.2').live('dblclick', function(){

i'm no expert of ruby but you must change something here:

 $(<%="'#node.#{care_point.id}'" %>).dblclick(function(){

I'd try (but i'm guessing - edited)

$('#<%=node.#{care_point.id} %>').dblclick(function(){

EDIT - Try removing the dots in the ids of th HTML: look at this fiddle http://jsfiddle.net/JeHuD/

replace

#<%=node.#{care_point.id} %>

with (both in the jquery selector and in the HTML (also consider that your id in the html should have double quotes like this: id="node1")

#<%=node#{care_point.id} %>

FINAL EDIT - in the jquery selector you must escape dots withdoubole backslashes: here is the updated fiddle that works with the dot http://jsfiddle.net/JeHuD/1/

edited Jun 15, 2011 at 10:36

answered Jun 15, 2011 at 9:56

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

4 Comments

willcodejavaforfood Over a year ago

Thank you Nicola, but the event is still not triggered

Nicola Peluchetti Over a year ago

the problem is in the html i think try removing the dots in th id and it should work

willcodejavaforfood Over a year ago

That was it, thank you so much. I guess the dot is in illegal character in an id?

Nicola Peluchetti Over a year ago

No it's not. I checked and the problem is in jquery: if there is a dot you must escape it

Collectives™ on Stack Overflow

Dynamic Javascript in my .html.erb

2 Answers 2

6 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related