部分渲染不适用于 ajax 调用 rails答案

【问题标题】：Partial render not working on ajax call rails部分渲染不适用于 ajax 调用 rails
【发布时间】：2021-10-16 16:48:54
【问题描述】：

当我点击一个按钮时，我试图用一个页面（而不是整个）重新加载部分页面。当我单击按钮 reset_me 时，它应该重新加载部分。即使调用了部分，js.haml 中的 javascript 也不会执行。

路线

post :reset_filter, defaults: { format: 'js' }

控制器动作

def reset_filter
  respond_to do |format|
    format.js { render 'reset_filter.js.haml', layout: false }
  end
end

在 reset_filter.js.haml 中

$("#reset_me").html("#{j render partial: 'reset'}")
$('#reset_me").text('i have reset') // does not work as well

reset.html.haml

= button_tag 'Reset me', type: 'submit', disabled: false, id: 'reset_me'

show.html.haml

= render 'reset'

Javascript 触发 ajax 调用

reloadSidebar() {
  const requestInit = {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    credentials: 'include',
    body: {}
  }

  fetch('full_controller_path', requestInit);
}

const resetAllElement = document.getElementById('reset_me');
.addEventListener('click', (e) => {
  reloadSidebar();
})

当我点击文本应该改变。我在控制台中跟踪它并执行 .js.haml 文件，但没有执行 javascript。来自 API 的响应也返回带有正确信息的 html，即。完整的html。有人可以帮我找到丢失的谜题吗？

【问题讨论】：

您可以尝试仅将format.js { render 'reset_filter.js.haml', layout: false } 替换为format.js
@LamPhan 是的，那是我的第一次尝试。这甚至没有进入reset_filter.js.haml。必须使用 layout: false 来触发它。
再试一次respond_to do |format| format.js end
@LamPhan 抱歉，这是我的错误，在代码中它已经按照您的建议。我也编辑了这个问题。
我认为你的问题不在于渲染部分，而在于ujs，你可以尝试使用button-to 而不是自己调用ajax

标签： javascript ruby-on-rails haml renderpartial

【解决方案1】：

所以你的问题不在于渲染部分视图，而是你的 js 响应没有执行，你不想使用ujs

我认为你可以使用eval 来执行 js 响应

获取（基于您的代码）

fetch('full_controller_path', {
  method: 'POST', 
  headers: {
    'Content-Type': 'application/json',
  },
  body: ...
})
.then(response => eval(response))

ajax

$('reset_me').bind('ajax:complete', function(event, xhr, status) {
 if (xhr.getResponseHeader('Content-Type').match("text/javascript")) {
   eval(xhr.responseText);
 }
  // ...
});

注意：有警告Never use eval()!，你也可以选择返回json数据而不是js，并在前端通过js代码处理json响应。

【讨论】：