我有一个Rails部分,我试图根据 AJAX 响应填充和显示,但似乎示例变量没有被更新。我知道我漏掉了什么。
这可能是因为我使用了一个不同于 AJAX 调用的视图控制器。
当我的视图示例化时,我为@ingredients
提供一个值,否则我的partial会抛出一个错误:
# RecipesController#new
def new
@recipe = Recipe.new
@ingredients = []
end
下面是用户单击按钮时调用 AJAX 函数:
$('.ingredientContainer').on('click', '.searchForIngredient', function(e) {
e.preventDefault();
const ingredientName = $(this).parents('fieldset').find('.ingredient-item').val()
$.ajax({
method: 'post',
url: '/ingredients/search',
data: {
name: ingredientName
},
success: (res) => {
// This displays the correct response
console.log("res", res)
// This prints [] as if @ingredients has not changed
console.log("<%= @ingredients %>")
$('.ingredientSelectionModalBody').html("<%= j(render partial: 'ingredient_search_table', locals: {ingredient_array: @ingredients}) %>")
$('.ingredientModal').modal({show: true})
}
})
})
下面是从 AJAX 请求调用的IngredientsController
,我希望在这里定义@ingredients
的值:
class IngredientsController < ApplicationController
def search
@ingredients = Tools.searchForIngredient(params['name'])
end
end
这是我的partial,它被渲染到一个modal的body中:
<table class="table table-awaken">
<thead>
<th>Name</th>
<th>Brand</th>
<th>Description</th>
</thead>
<tbody>
<%= ingredient_array.inspect %>
<% ingredient_array.each do |ingredient| %>
<tr>
<td><%= ingredient.name %></td>
<td><%= ingredient.brand %></td>
<td><%= ingredient.description %></td>
</tr>
<% end -%>
</tbody>
</table>
问题是视图不知道@ingredients
的值已经更新,我不知道如何修复这个问题,以便可以显示来自IngredientsController
的响应。
2条答案
按热度按时间j0pj023g1#
console.log("<%= @ingredients %>")
从JS的Angular 来看,在页面最初呈现时被硬编码为console.log("[]")
。如果您检查页面并在加载的资源中找到代码,则可以检查它。获取实际数据时,您必须将其作为对
/ingredients/search
调用的响应返回。发出类型为application/json
的请求,并从控制器返回类似render json: @ingredients
的内容。然后在前端,您应该将这些数据放在res
变量中,因此使用该变量而不是<%= @ingredients %>
xhv8bpkk2#
我能够通过将DOM修改javascript移动到
IngredientsController
呈现的文件中来解决我的问题。我生成了一个search.js.erb
文件,内容如下:由于这是在
@ingredients
更新后呈现的,因此来自控制器的新数据可用。