ruby on rails - Dynamic Javascript in my .html.erb - Stack Overflow

admin管理员组

文章数量:1291044

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?

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?

• javascript
• ruby-on-rails
• erb

Share Improve this question Follow edited Jun 24, 2011 at 15:21 user229044♦ 240k4141 gold badges344344 silver badges346346 bronze badges asked Jun 15, 2011 at 9:40 willcodejavaforfoodwillcodejavaforfood 44.1k1717 gold badges8484 silver badges111111 bronze badges 7

• 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 Commented Jun 15, 2011 at 9:45
• @Nicola Peluchetti - I've updated my post – willcodejavaforfood Commented Jun 15, 2011 at 9:53
• It's considered bad practice to dynamically generate javascript. Use static packaged javascript files. – 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 Commented Jun 15, 2011 at 9:56
• Views should contain HTML not javascript. Include your javascript in your layout view / master page. – Raynos Commented Jun 15, 2011 at 9:57

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

Try the following:

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

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/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/JeHuD/1/

本文标签： ruby on railsDynamic Javascript in my htmlerbStack Overflow