Question

我有一个看起来像这样的ajax调用，

    $('campaignType').addEvent('change', function(){
  alert($('campaignType').value);
  var request = new Request({
   method: 'get',
   url: '/admin/admin_' + $('campaignType').value + '.php',
   onRequest:function() {
    alert('Request has been made, please be patient')
   },
   onComplete:function(response) {
    $('campaignForm').append(response);
   }
  }).send();
 });

基本上发生的事情取决于`$（'campaignType'）从另一个文件返回一些HTML的值，但是我似乎无法将HTML附加到我的容器上。有人在乎给我一些建议吗？

由于

Answer 1

Dimitar的解决方案很接近，但是它是一个糟糕的解决方案，因为它重新创建了整个元素内容并破坏了附加的事件处理程序。更好的解决方案是：

Element.implement({
    append: function(newhtml) {
        return this.adopt(new Element('div', {html: newhtml}).getChildren());
    }
});

这实际上是Request.HTML内部所做的事情。

Answer 2

.append不是mootools中的有效元素原型。

如果你想将html附加到现有的那个，那么你可以通过在你的站点中定义lib / core位来使MAKE .append有效（如果你经常使用它我会考虑这个）：

Element.implement({
    append: function(newhtml) {
        // silly name, does not say to me you are appending html. rename to appendHTML
        return this.set("html", this.get("html") + newhtml);
    }
});

或在你的onComplete中执行：

var cf = $('campaignForm');
cf.set("html", cf.get("html") + this.response.text);

玩得开心：）

Answer 3

我认为您希望使用onSuccess代替onComplete

Answer 4

如果您使用的是mootools 1.2.4，则可以将Request更改为Request.HTML并使用append选项。（不确定附加选项是旧版本）

$('campaignType').addEvent('change', function(){
  new Request.HTML({
    method: 'get',
    url: '/admin/admin_' + $('campaignType').value + '.php',
    append: $('campaignForm')
  }).send();
});

Mootools在ajax请求后附加html

4 个答案: