jquery 从 AJAX 响应中渲染部分不是更新变量

pepwfjgg  于 2023-05-28  发布在  jQuery
关注(0)|答案(2)|浏览(265)

我有一个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的响应。

j0pj023g

j0pj023g1#

console.log("<%= @ingredients %>")从JS的Angular 来看,在页面最初呈现时被硬编码为console.log("[]")。如果您检查页面并在加载的资源中找到代码,则可以检查它。
获取实际数据时,您必须将其作为对/ingredients/search调用的响应返回。发出类型为application/json的请求,并从控制器返回类似render json: @ingredients的内容。然后在前端,您应该将这些数据放在res变量中,因此使用该变量而不是<%= @ingredients %>

xhv8bpkk

xhv8bpkk2#

我能够通过将DOM修改javascript移动到IngredientsController呈现的文件中来解决我的问题。我生成了一个search.js.erb文件,内容如下:

$('.ingredientSelectionModalBody').html("<%= j(render 'recipes/ingredient_search_table', ingredient_array: @ingredients) %>")
$('.ingredientModal').modal({show: true})

由于这是在@ingredients更新后呈现的,因此来自控制器的新数据可用。

相关问题