使用 AJAX 更新动态更新某个容器答案

【问题标题】：Dynamically Update a Certain Container with AJAX Update使用 AJAX 更新动态更新某个容器
【发布时间】：2019-07-22 15:25:01
【问题描述】：

我的代码中有一个 Div 列表

<div id="results">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

通过 JavaScript，我有一个 Ajax.Updater，它将加载来自操作的结果。根据用户从多选下拉列表中所做的选择，更新程序将被多次调用，并且应该将结果放置在适当的 Div 标签中（1、2 或 3，具体取决于下拉值）。

function loadData(){
var selections = ($(dropDown).selectedOptions);
for(var i=0; i<selections.length; i++){
     var divTag = 'div'+selections[i].value;

     new Ajax.Updater(divTag, './dataLoadAction', {
         method: 'post',
         insertion: Insertion.Bottom,
         parameters: {parameter: selections[i].value},

         onSuccess: function(){alert('Complete');}, 
         onFailure: function(){alert('ERROR');}
    });
}
}

尽管我尝试了很多，但 Ajax.Updater 除了容器 (divTag) 参数中的直字符串外，无法识别任何内容。有没有办法动态声明 Ajax.Updater 将更新的部分？

更新：我通过将 divTags 从“结果”div ID 中取出来解决了这个问题。更新程序现在将结果与适当的 div 匹配。

【问题讨论】：

您使用什么框架将 div 变成一个选择？ Select2 还是什么？
我正在使用 XSLT 框架
不响铃。请参阅我的答案以了解如何解决它

标签： javascript ajax prototypejs

【解决方案1】：

假设某种框架将您的 div 转换为选择，并假设 $(dropDown).selectedOptions 返回一个数组

cnt = 0, selections;

function updater() {
  if (cnt >= selections.length) return; // stop;
  var divTag = 'div' + selections[cnt].value;

  new Ajax.Updater(divTag, './dataLoadAction', {
    method: 'post',
    insertion: Insertion.Bottom,
    parameters: {
      parameter: selections[cnt].value
    },

    onSuccess: function() {
      console.log('Complete');
      cnt++;
      updater();
    },
    onFailure: function() {
      console.log('ERROR');
    }
  });
}

function loadData() {
  selections = $(dropDown).selectedOptions;
  cnt = 0;
  updater();
}

【讨论】：

我可以成功地将结果更新到 new Ajax.Updater('results', './dataLoadAction', { ... } 但我很难用动态 divTag 变量替换 'results'帮助订购。我不清楚这段代码对此有何帮助。
console.log('div' + selections[cnt].value); 显示什么？

【解决方案2】：

我已通过从“结果”div ID 中取出 divTags 来解决此问题。更新程序现在将结果与适当的 div 匹配。

【讨论】：