Question

我有一个包含3个下拉列表的表单 - A，B和C.当A更改时，应该使用新的选项列表更新B，并且应该清除C.当B更改时，应使用新的选项列表更新C.

我有A，B和C的部分内容，A和B都包含observe_field来看自己的电话。

每次A更改时，B都会重新加载，并添加一个新的观察者。这意味着每次B更改时，都会触发N + 1次重新加载C的请求（其中N是A已更改的次数）。

我尝试将observe_field调用移出替换B的下拉列表的部分（将其置于A的部分中），但在第一次更改为A后，B不再触发事件

我还尝试向B上观察者的$('b').stopObserving();添加:before调用，但这具有相同的效果 - 在第一次更改为A后，事件在B上停止触发。 / p>

有没有办法让这项工作？

修改

以下是observe_field来电生成的Javascript：

new Form.Element.EventObserver('a', function(element, value) {
  $('b_loading_indicator').show();
  new Ajax.Updater('b',
    'http://localhost:3000/foos/b_control', {
      asynchronous: true,
      evalScripts: true,
      onComplete: function(request) { $('b_loading_indicator').hide(); },
      parameters: 'a_id=' + encodeURIComponent(value) + '&object_name=foo' + '&authenticity_token=' + encodeURIComponent('kH/TmOfvSKeNLxO4N0gxtqV0niNfAUlJ3guk6KAvPig=')
    });
});

new Form.Element.EventObserver('b', function(element, value) {
  $('c_loading_indicator').show();
  new Ajax.Updater('c', 
    'http://localhost:3000/foos/c_control', {
      asynchronous: true,
      evalScripts: true,
      onComplete: function(request) { $('c_loading_indicator').hide(); },
      parameters: 'a_id=' + encodeURIComponent($('a').value) + '&b_id=' + encodeURIComponent(value) + '&object_name=foo' + '&authenticity_token=' + encodeURIComponent('kH/TmOfvSKeNLxO4N0gxtqV0niNfAUlJ3guk6KAvPig=')
  });
});

Answer 1

 $(document).ready(function() {
   $("#section").bind("keyup", function() {
   data = {this.name: this.val()}; // the value of input that need to send to server
   $.get(url, data, // make ajax request
     function(html) { // function to handle the response
      $("#article_list").html(html); // change the inner html of update div
     });
   });
 });

使用Ajax使用observe_field重新加载部分会触发多个事件

1 个答案: