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

Posted 2021-03-27

我的代码中有一个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将更新哪个部分？

更新：我已经通过从“结果”div ID中取出divTags来解决问题。 Updater现在将结果与相应的div匹配。

答案

假设某种框架将你的div变为select，并假设$(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();
}

另一答案

我已经通过从“结果”div ID中取出divTags来解决问题。 Updater现在将结果与相应的div匹配。