Mootools-jointes HTML après une demande ajax

Question

J'ai un appel ajax qui ressemble à ceci,

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

Essentiellement ce qui se passe est en fonction de ce que la valeur de `$ (« campaignType ») du code HTML est renvoyé d'un autre fichier, cependant je n'arrive pas à obtenir le HTML à ajouter sur mon conteneur. Quelqu'un veut-il me donner un conseil?

Merci

Answer 1

Je pense que vous souhaitez utiliser onSuccess au lieu de onComplete

Answer 2

Si vous utilisez Mootools 1.2.4 vous pouvez changer Request-Request.HTML et utiliser l'option append. (Vous n'êtes pas sûr que l'option d'ajout était dans les anciennes versions)

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

Answer 3

.append n'est pas un prototype d'élément valide dans mootools.

si vous voulez ajouter html à une entreprise existante, vous pouvez soit faire .append valide en définissant dans votre bit site lib/core (je considérerais si vous utilisez beaucoup):

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

ou dans votre onComplete faire:

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

have fun :)

Answer 4

solution de Dimitar est proche, mais est une mauvaise solution car il recrée le contenu des éléments entiers et détruit attaché les gestionnaires d'événements. Une meilleure solution serait:

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

c'est effectivement ce que fait Request.HTML en interne.