Mootools добавление HTML после запроса AJAX

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 к существующему, вы можете либо СДЕЛАТЬ.append действительным, определив в своем сайте бит lib/core (я бы посчитал это, если вы будете часто его использовать):

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

Если вы используете 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();
});

Answer 4

Я думаю, что вы хотели бы использовать onSuccess вместо onComplete