Mootools appending html after an ajax request

Question

Hello,

I have an ajax call that looks like this,

    $('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();
 });

Essentially what happens is depending on what the value of `$('campaignType') some HTML is returned from another file, however I cannot seem to get the HTML to append on to my container. Any one care to give me some advice?

Thanks

Answer 1

I think you like to use "onSuccess" instead of "onComplete"

Answer 2

If you're using mootools 1.2.4 you can change Request to Request.HTML and use append option. (Not sure that append option was in older versions)

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

Answer 3

.append is not a valid element prototype in mootools.

if you want to append html to an existing one, then you can either MAKE .append valid by defining in your site lib/core bit (I would consider this if you use it a lot):

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);
    }
});

or in your onComplete do:

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

have fun :)

Answer 4

Dimitar's solution is close but is a bad solution as it recreates the whole element contents and destroys attached event handlers. A better solution would be:

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

this is actually what Request.HTML internally does.