Mootools appending html after an ajax request

Question

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

gonchuki · Answer 1 · 2012-06-21T17:49:14.097

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.

edited Jun 21 '12 at 17:49

answered Jul 30 '10 at 19:29

gonchuki

4,064
22
33

For the copy pasters out there, add a { to the end of the second line. Thanks for the example – Thomas Welton Jun 20 '12 at 09:55
If you use event delegation, the event handler problem doesn't exist. – Chris Baker Nov 25 '13 at 16:30

score 1 · Answer 2 · answered Jul 02 '10 at 09:11

.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 :)

score 0 · Answer 3 · edited Jul 12 '11 at 13:51

0

I think you like to use onSuccess instead of onComplete

edited Jul 12 '11 at 13:51

Alberto Zaccagni

30,779
11
72
106

answered Jul 01 '10 at 13:32

JochenJung

7,183
12
64
113

score 0 · Answer 4 · answered Jul 01 '10 at 14:35

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

Mootools appending html after an ajax request

4 Answers4