Question

我的代码中有一个Divs列表

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

通过JavaScript，我有一个Ajax.Updater，它将加载动作的结果。根据用户从多选下拉列表中所做的选择，Updater将被调用多次，并将结果放置在适当的Div Tag（取决于下拉值的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中删除divTag来解决了这个问题。现在，更新程序会将结果匹配到适当的div。

Answer 1

假设某种框架将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();
}

Answer 2

我通过将divTag从“结果” div ID中删除来解决了该问题。现在，更新程序会将结果匹配到适当的div。

使用AJAX更新动态更新特定容器

2 个答案: