select 更改时替换嵌套表单项? (Rails / AJAX / StimulusJS)
Replacing nested form items when a select changes? (Rails / AJAX / StimulusJS)
我有一个带有预填充嵌套表单的标准 Rails 应用程序。我在父模型上有一个 select,当用户更改嵌套项目的上下文时,它们需要被清除并重新填充。
我一直在使用 StimulusJS 并且想要这样的东西:
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "budgetCode", "body", "template" ]
connect() {
}
budget_code_changed(event) {
document.getElementById('budget_items').getElementsByTagName('tbody')[0].innerHTML = '';
const url = '/budget_code_items/budget?budget_code_id=' + this.budgetCodeTarget.value;
Rails.ajax({
url: url,
success: function(data) {
let row;
var content = this.templateTarget.innerHTML
for (let i = 0; i < data.length; i++) {
this.bodyTarget.insertAdjacentHTML('beforeend', content)
}
}
})
}
}
我快到那里了 - 当我更改 select 时,行被删除了。我可以用这个手动插入一个新行:
var content = this.templateTarget.innerHTML
this.bodyTarget.insertAdjacentHTML('beforeend', content)
因为我已经定义了我的新行结构。
我似乎遇到的问题是将 Stimulus 调用嵌入到 Rails.ajax 函数中。我收到 Uncaught TypeError: Cannot read 属性 'innerHTML' of undefined 错误。我确定这是一个可变范围类型的问题。 Javascript 不是我的强项,所以我怀疑我在这里遗漏了一些很容易解决的小问题。
相关问题:
同时,我需要在我的一个模板列单元格中添加一些文本,并根据 Rails.ajax 调用的数据设置隐藏输入的值。我可能可以自己解决这个问题,但如果有人可以补充那个附带问题,我将不胜感激。
您应该使用 粗箭头 来保留范围,这样 this
仍然指向控制器
Rails.ajax({
url: url,
type: 'GET',
success: (data) => {
// now this retains to the controller
}
})
顺便传参如下
const url = '/budget_code_items/budget'
Rails.ajax({
url: url,
type: 'GET',
data: 'budget_code_id=' + this.budgetCodeTarget.value,
success: (data) => {
}
})
有关其他控制器代码结构,请参阅更详细的 example。
我有一个带有预填充嵌套表单的标准 Rails 应用程序。我在父模型上有一个 select,当用户更改嵌套项目的上下文时,它们需要被清除并重新填充。
我一直在使用 StimulusJS 并且想要这样的东西:
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "budgetCode", "body", "template" ]
connect() {
}
budget_code_changed(event) {
document.getElementById('budget_items').getElementsByTagName('tbody')[0].innerHTML = '';
const url = '/budget_code_items/budget?budget_code_id=' + this.budgetCodeTarget.value;
Rails.ajax({
url: url,
success: function(data) {
let row;
var content = this.templateTarget.innerHTML
for (let i = 0; i < data.length; i++) {
this.bodyTarget.insertAdjacentHTML('beforeend', content)
}
}
})
}
}
我快到那里了 - 当我更改 select 时,行被删除了。我可以用这个手动插入一个新行:
var content = this.templateTarget.innerHTML
this.bodyTarget.insertAdjacentHTML('beforeend', content)
因为我已经定义了我的新行结构。
我似乎遇到的问题是将 Stimulus 调用嵌入到 Rails.ajax 函数中。我收到 Uncaught TypeError: Cannot read 属性 'innerHTML' of undefined 错误。我确定这是一个可变范围类型的问题。 Javascript 不是我的强项,所以我怀疑我在这里遗漏了一些很容易解决的小问题。
相关问题:
同时,我需要在我的一个模板列单元格中添加一些文本,并根据 Rails.ajax 调用的数据设置隐藏输入的值。我可能可以自己解决这个问题,但如果有人可以补充那个附带问题,我将不胜感激。
您应该使用 粗箭头 来保留范围,这样 this
仍然指向控制器
Rails.ajax({
url: url,
type: 'GET',
success: (data) => {
// now this retains to the controller
}
})
顺便传参如下
const url = '/budget_code_items/budget'
Rails.ajax({
url: url,
type: 'GET',
data: 'budget_code_id=' + this.budgetCodeTarget.value,
success: (data) => {
}
})
有关其他控制器代码结构,请参阅更详细的 example。