Rails on the road

La classe ajax.autocompleter è veramente utile e semplice da usare, infatti includendo il prototype.js potete implementarlo così:

    1 <input type="text" id="autocomplete" name="autocomplete_parameter"/>
    2 <div id="autocomplete_choices" class="autocomplete"></div>
    3 ...
    4 <script type ="text/javascript">
    5 new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/url/on/server", {}); 
    6 </script>

Con il Rails avete l’helper con il quale autogenerare il campo input e la chiamata ajax alla funzione che popolerà il div “autocomplete _choices”.

Ma se vi servisse l’inplace editor per l’autocomplete? Cosa si dovrebbe fare?

Sarebbe necessario creare a RunTime, cliccando sul testo da modificare, qualcosa di simile al codice sopra… vediamo insieme una possibile soluzione, premetto soltanto che c’è un bug con IE (non mostra i risultati nel div ma le chiamate ajax funzionano correttamente) e se qualcuno di voi trovasse la soluzione vi prego comunicatela!!

la classe inPlaceAutocompleteEditor

Allora il primo passo è creare la classe Javascript che estende l’implaceEditor che chiameremo in_place_autocomplete_editor.js:

    1 Ajax.InPlaceAutocompleteEditor = Class.create();
    2 Object.extend(Object.extend(Ajax.InPlaceAutocompleteEditor.prototype,
    3   Ajax.InPlaceEditor.prototype), {
    4     createEditField: function() {
    5       var url = this.options.autourl;
    6       var text;
    7       if(this.options.loadTextURL) {
    8         text = this.options.loadingText;
    9       } else {
   10         text = this.getText();
   11       }
   12       var obj = this;
   13       this.options.textarea = false;
   14       var textField = document.createElement("input");
   15       textField.obj = this;
   16       textField.type = "text";
   17       textField.id = "auto_city";
   18       textField.name = this.options.textfieldname;
   19       textField.className = "text" 
   20       this.editField = textField;
   21       //Questo Div creato a RunTime non viene visualizzato da IE 
   22       //La soluzione a questo problema è inserire il div direttamente nell'rhtml     
   23       var div = document.createElement("div");
   24       div.obj = this;
   25       div.setAttribute("id", "auto_complete_div2");
   26       div.setAttribute("class", "auto_complete");
   27       div.setAttribute("style", "display:none");
   28       this.autodiv = div; 
   29       if(this.options.loadTextURL) {
   30         this.loadExternalText();
   31       }
   32       this.form.appendChild(this.editField);
   33       this.form.appendChild(this.autodiv);
   34       var empty = window.document.createTextNode('&npsp;');
   35       this.autodiv.appendChild(empty);
   36       var element = this.editField;
   37       new Ajax.Autocompleter(this.editField, this.autodiv, url, {});
   38     }
   39   });

Bene il costruttore della classe è pronto per essere incluso nel vostro layout.

Gli helper

Adesso ecco gli helper da mettere nell’ApplicationHelper da riusare poi nelle viste:

    1 def in_place_autocomplete_editor_field(object, method,  autocomplete_options ={}, tag_options = {},   in_place_autocomplete_editor_options = {})
    2   tag_options = {
    3     :id => "#{object}_#{method}_auto_editor_field",
    4     :class => "in_place_autocomplete_editor_field"}.merge!(tag_options)
    5   in_place_autocomplete_editor_options[:url] = in_place_autocomplete_editor_options[:url] || url_for({ :action => "address_#{method}")
    6   in_place_autocomplete_editor_options[:auto_url] = autocomplete_options[:auto_url]
    7   in_place_autocomplete_editor_options[:textfieldname] = autocomplete_options[:textfieldname]
    8   in_place_autocomplete_editor_options[:save_text] = 'Salva'
    9   in_place_autocomplete_editor_options[:cancel_text] ='Annulla'
   10   in_place_autocomplete_editor_options[:loading_text] = 'Sto salvando...'
   11   content_tag("span", object, tag_options) + in_place_autocomplete_editor(tag_options[:id], in_place_autocomplete_editor_options)
   12 end
   13 
   14 def in_place_autocomplete_editor(field_id, options = {})
   15   function =  "new Ajax.InPlaceAutocompleteEditor("
   16   function < < "'#{field_id}', "
   17   function << "'#{url_for(options[:url])}'"
   18   js_options = {}
   19   js_options['cancelText'] = %('#{options[:cancel_text]}') if options[:cancel_text]
   20   js_options['okText'] = %('#{options[:save_text]}') if options[:save_text]
   21   js_options['loadingText'] = %('#{options[:loading_text]}') if options[:loading_text]
   22   js_options['textfieldname'] = %('#{options[:textfieldname]}')
   23   js_options['autourl'] = %('#{options[:auto_url]}')
   24   js_options['size'] = options[:size] if options[:size]
   25   js_options['externalControl'] = "'#{options[:external_control]}'" if options[:external_control]
   26   js_options['loadTextURL'] = "'#{url_for(options[:load_text_url])}'" if options[:load_text_url]        
   27   js_options['ajaxOptions'] = options[:options] if options[:options]
   28   js_options['evalScripts'] = options[:script] if options[:script]
   29   js_options['callback']   = "function(form) { return #{options[:with]}}" if options[:with]
   30   function << (', ' + options_for_javascript(js_options)) unless js_options.empty?
   31   function << ')'
   32   javascript_tag(function)
   33 end

Allora in_place_autocomplete_editor_field accetta tra i parametri le autocomplete_options io le ho messe per specificare:

• :auto_url => ‘url_for(:action=>…)’,
• :textfieldname

Questi due parametri consentono di dare il nome alla funzione da chiamare per riempire il div dell’autocomplete mentre il textfieldname è l’id della textbox generata a runtime usata dall’autocompleter. La riga url_for({ :action => “auto_#{method}”) setta il nome della funzione che verrà chiamata cliccando sul tasto salva dell’inPlaceEditor.

La vista

L’ultimo passo è quello della vista .rhtml

    1 <%= in_place_autocomplete_editor_field(@object, :modify, {:auto_url => 'url for della vostra azione', :textfieldname => 'auto'},{},{})%>