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

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

Answer 2

Если вы используете MooTools 1.2.4 вы можете изменить Request к Request.HTML и использовать append вариант. (Не уверен, что опция append была в более старых версиях)

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

Answer 3

.append не является допустимым прототипом элемента в mootools.

если вы хотите добавить HTML к уже существующему, то вы можете либо сделать .append действительным, определив в вашем сайте Lib/основной бит (я считал бы это, если вы используете его много):

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 4

решения Димитар близко, но является плохим решением, поскольку он воссоздает содержимое всего элемента и уничтожает приложенные обработчик событий. Лучшим решением будет:

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

Это на самом деле то, что делает Request.HTML внутренне.