Prototype Ajax.Autocompleter en HTML ajouté dynamiquement ne fonctionne pas

Question

Hé, c'est la première fois que j'ai fini de rédiger une question sans que SO me donne la réponse dans le processus. :)

J'ai un formulaire imbriqué (comme le tutoriel Railscast de Ryan Bates sur le sujet) qui permet aux utilisateurs d'ajouter dynamiquement des champs supplémentaires pour ajouter/supprimer des modèles imbriqués en utilisant javascript basé sur Prototype. Les champs supplémentaires peuvent être ajoutés et supprimés et fonctionnent très bien pour créer de nouveaux modèles.

Le problème est que l'un des champs utilise un Ajax.Autocompleter; le code dans la page lorsque est rendu partielle ressemble à ceci:

<script type="text/javascript"> 
//<![CDATA[ 
new Ajax.Autocompleter(...various args...); 
//]]> 
</script> 

L'autocomplétion fonctionne très bien si la partie est rendue pour commencer (par exemple, si le formulaire commence par une instance de la partie, ou lorsque éditer des modèles imbriqués existants). Cependant, cela ne fonctionne pas dans les champs de formulaire ajoutés dynamiquement.

J'ai essayé d'utiliser à la fois insert() et de définir simplement innerHTML d'un div vide pour insérer le HTML partial. Avec insert(), le code Autocompleter est évalué et tout le contenu de la balise <script> disparaît (d'après ce que je comprends), mais la saisie semi-automatique ne fonctionne pas. Avec la définition de innerHTML, le script apparaît exactement comme dans le partiel pré-rendu, mais l'autocompléteur n'est toujours pas appelé.

Je suppose que cela a quelque chose à voir avec le fonctionnement d'evalScripts, et j'ai trouvé some documentation on the subject, mais j'ai du mal à savoir comment l'appliquer à la déclaration Autocompleter.

Un conseil extrêmement apprécié!

ETA: ajouter le javascript utilisé pour ajouter dans la nouvelle section:

function add_section(link, nested_model_name, content) { 
     // get the right new_id which should be in a div with class "last_id" at the bottom of 
     // the nearest section 
     var last_id = parseInt($(link).up().previous('.last_id').innerHTML); 
     var new_id = last_id + 1; 
     var regexp = new RegExp("new_" + nested_model_name, "g"); 
     content = content.replace(regexp, new_id) 

     // this is the line that actually inserts the content into the page 
     $(link).up().insert({before: content}); 
    } 

Debugging avec Firebug montre que le contenu est correct (ie a le code de saisie semi-automatique normalement travailler en elle) avant qu'il ne soit inséré.

Answer 1

est votre JS pour enregistrer l'autocompleter dans votre script-tag que vous chargez via ajax.updater? le cas échéant, vous devez ajouter le paramètre evalScript pour avoir eval'ed: new Ajax.Updater('target',url,{method:'get', evalScripts:true});

Answer 2

Bon, alors comme une expérience que j'ai essayé juste changer mon code d'assistance Autocompleter comme suit et maintenant il fonctionne très bien:

DE:

javascript_tag("new Ajax.Autocompleter(... 

à:

javascript_tag("var autocomplete_for_#{fieldname} = new Ajax.Autocompleter(... 

Ceci est une aide Rails, mais à moins que je comprends mal, je pense que le point est que par declari Dans une variable, le prototype évalue réellement le nouvel appel lorsqu'il insère le code.

(Pas plus/mieux comprendre pourquoi cela fonctionne et l'autre ne serait toujours le bienvenu v cependant, car en ce moment ce fut surtout la chance aveugle.)

Answer 3

Je sais que c'est une question plus mais je eu le même problème récemment.

Je ne sais pas quelle version de auto_complete vous utilisez?J'utilisais les rails/auto_autocomplete de git.

Dans ce plugin le code javascript était comme ça

lib/auto_complete_macros_helper.rb 

def auto_complete_field(field_id, options = {}) 
    function = "var #{field_id}_auto_completer = new Ajax.Autocompleter(" 

je le même problème. Les champs de saisie seraient visibles mais la fonctionnalité de saisie semi-automatique ne fonctionnait pas. Il s'est avéré que le mot-clé var rend la portée locale varaible. Cela signifiait que tout ce qui était évalué dans evalscripts se trouvait dans une portée différente de l'objet DOM d'origine.

Mon correctif consistait simplement à supprimer le mot-clé var.

lib/auto_complete_macros_helper.rb 

def auto_complete_field(field_id, options = {}) 
    function = "#{field_id}_auto_completer = new Ajax.Autocompleter(" 

Je ne sais pas assez sur votre configuration de dire avec certitude ce qui est erroné, mais je parie qu'il a quelque chose à voir avec la portée de evalscripts ainsi.