Question

我是新手，在使用jQuery代码的Ruby方面经验有限。

如何在jQuery中添加Ruby代码？

我试图使用_multicourse_meal.html.erb使用_multicourse_meal.html.erb插入jQuery中的部分，如下所示，这不起作用，除了不能从meal_（meal）调用delete方法。如何用jQuery做到这一点？

$('#new-<%= @multicourse_meal.id %>').before("
<tr id=<%= @meal.id %>>
<td>**<%= link_to '<i class="icon-remove"></i>'.html_safe, meal_path(meal), method: :delete, remote: true %>**(<--ERROR code)<%= meal.title %>
</i> <%= @meal.title %></td>
<td><%= @meal.portion_amt_g %></td>
<td><%= @meal.calories %></td>
<td><%= @meal.carbs_amt_g.round(1) %></td>
<td><%= @meal.protein_amt_g.round(1) %></td>
<td><%= @meal.fat_amt_g.round(1) %></td></tr>")

application.html.erb in views/layouts

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag    "application", media: "all" %>
    <%= javascript_include_tag :defaults, "application" %>
    <%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" %>
    <%= csrf_meta_tags %>
    <%= render 'layouts/shim' %>    
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <% flash.each do |key, value| %>
        <div class="alert alert-<%= key %>"><%= value %></div>
      <% end %>
      <%= yield %>
      <%= render 'layouts/footer' %>
      <%= debug(params) if Rails.env.development? %>
    </div>
  </body>
</html>

_multicourse_meals.html.erb in views/multicourse_meals

<% @multicourse_meals_for_the_day.each do |multicourse_meal| %>
    <table class="table table-condensed table-striped table-bordered">
        <thead>     
            <tr>
                <th>Meal: <%= multicourse_meal.meal_no %></th>
                <th>Portion Size (ml/g.)</th>
                <th>Calories</th>
                <th>Carbs: (g.)</th>
          <th>Pro: (g.)</th>
          <th>Fat: (g.)</th>
            </tr>
        </thead>
        <tbody>
            <% multicourse_meal.meals.each do |meal| %>
                <tr id="<%= meal.id %>">
                    <td>
                        <%= link_to '<i class="icon-remove"></i>'.html_safe, meal_path(meal), method: :delete, remote: true %>
                        <%= meal.title %>
                    </td>
                    <td><%= meal.portion_amt_g %></td>
                    <td><%= meal.calories %></td>
                    <td><%= meal.carbs_amt_g.round(1) %></td>
                    <td><%= meal.protein_amt_g.round(1) %></td>
                    <td><%= meal.fat_amt_g.round(1) %></td>
                </tr>
            <% end %>
            <tr id="new-<%= multicourse_meal.id %>">
                <td>
                    <%= form_for( @meal, remote: true) do |f| %>
                        <%= f.select :nutrient_id, options_for_select(Nutrient.all.collect { |p| [p.title, p.id]}) %>
                        <%= f.text_field :portion_amt_g, class: "input-mini" %>
                        <%= f.hidden_field :multicourse_meal_id, :value => multicourse_meal.id %>
                        <%= f.submit "Add" %>
                    <% end %>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th></th>
            </tr>
            <tr>
                <td></td>
                <th>Target Amount</th>
                <td><%= multicourse_meal.tgt_calories %></td>
                <td><%= multicourse_meal.tgt_carbs_amt_g.round(1) %></td>
                <td><%= multicourse_meal.tgt_protein_amt_g.round(1) %></td>
                <td><%= multicourse_meal.tgt_fat_amt_g.round(1) %></td>
            </tr>
            <tr>
                <td></td>
                <th>Total</th>
                <td id="<%= multicourse_meal.id %>-tot_calories"><%= multicourse_meal.total_calories %></td>
                <td id="<%= multicourse_meal.id %>-tot_carbs"><%= multicourse_meal.total_carbs_amt_g.round(1) %></td>
                <td id="<%= multicourse_meal.id %>-tot_protein"><%= multicourse_meal.total_protein_amt_g.round(1) %></td>
                <td id="<%= multicourse_meal.id %>-tot_fat"><%= multicourse_meal.total_fat_amt_g.round(1) %></td>
            </tr>
        </tbody>
    </table>
<% end %>

create.js.erb in views/meals

$('#new-<%= @multicourse_meal.id %>').before("<tr id=<%= @meal.id %>><td><i class='icon-remove'></i> <%= @meal.title %></td><td><%= @meal.portion_amt_g %></td><td><%= @meal.calories %></td><td><%= @meal.carbs_amt_g.round(1) %></td><td><%= @meal.protein_amt_g.round(1) %></td><td><%= @meal.fat_amt_g.round(1) %></td></tr>")

    // update multicourse meal view
    $('#<%= @multicourse_meal.id %>-tot_calories').html("<%= @multicourse_meal.total_calories %>")
    $('#<%= @multicourse_meal.id %>-tot_carbs').html("<%= @multicourse_meal.total_carbs_amt_g.round(1) %>")
    $('#<%= @multicourse_meal.id %>-tot_protein').html("<%= @multicourse_meal.total_protein_amt_g.round(1) %>")
    $('#<%= @multicourse_meal.id %>-tot_fat').html("<%= @multicourse_meal.total_fat_amt_g.round(1) %>")

    // update calories Journal view
    $('#meals_mn_ratio').html("<%= @calories_journal.meals_mn_ratio %>");
    $('#cj_total_calories').html("<%= @calories_journal.total_calories %>");
    $('#cj_total_carbs').html("<%= @calories_journal.total_carbs_amt_g.round(1) %>");
    $('#cj_total_pro').html("<%= @calories_journal.total_protein_amt_g.round(1) %>");
    $('#cj_total_fat').html("<%= @calories_journal.total_fat_amt_g.round(1) %>");

Answer 1

我使用firebug解决了HTML代码中的峰值服务页面，如下所示：

然后添加少量红宝石的HTML代码，例如<%= @meal.id %>到jQuery

$('#new-<%= @multicourse_meal.id %>').before("
<tr id=<%= @meal.id %>>
**<td><a rel='nofollow' data-remote='true' data-method='delete' href='/meals/<%= @meal.id %>'><i class='icon-remove'></i></a>**
<%= @meal.title %></td>
<td><%= @meal.portion_amt_g %></td>
<td><%= @meal.calories %></td>
<td><%= @meal.carbs_amt_g.round(1) %></td>
<td><%= @meal.protein_amt_g.round(1) %></td>
<td><%= @meal.fat_amt_g.round(1) %></td></tr>")

如何在JQuery中添加Ruby代码？

1 个答案: