Montag, 3. August 2009

inplaceeditor mit autocompleter

scriptaculous bietet sowohl einen inplaceeditor als auch einen autocompleter an. leider sind diese beiden jedoch separat.

falls jemand beide braucht - wie zb ich (von der firma aus) - müssen diese jedoch kombiniert werden. das ist aber kein problem.

meine variante
zwar könnten die änderungen auch direkt im quellcode von scriptaculous stattfinden, doch das ist imho eher die unschöne/unsaubere art. da man in javascript alles überschreiben kann, bietet sich diese (= meine) variante sehr gut an.

insgesamt sind 3 methoden davon betroffen, in denen kleine erweiterungen vorgenommen werden müssen.

go for it
der inplaceeditor weist den inputfeldern keine id zu. diese werden aber gebraucht, um vom autocompleter angesprochen werden zu können.
Ajax.InPlaceEditor.prototype.createEditField = function() {
  [...]
  // mod: add id to the input field
  if(this.options.acOn) fld.id = this.element.id+'_input';

  this._form.appendChild(this._controls.editor);
};

natürlich sollte der autocompleter nur solange wie nötig existieren, daher wird er nach der erstellung des inputfeldes erzeugt ...
Ajax.InPlaceEditor.prototype.enterEditMode = function(e) {
  [...]
  // mod: store the autocompleter element (for destroying afterwards)
  if(this.options.acOn) this._acElement = new Ajax.Autocompleter(
    $(this.element.id+'_input'),
    this.options.acDiv,
    this.options.acPath+'?'+this.options.acParam+'='+this.element.id,
    this.options.acOptions
  );
};

... und nach dem editieren wieder gelöscht.
Ajax.InPlaceEditor.prototype.leaveEditMode = function() {
  // mod: destroy the autocompleter element
  if(this.options.acOn) delete this._acElement;
  [...]
};

erklärung
insgesamt sind 4 selbstdefinierte variablen aktiv, die alle über die optionen des inplaceeditors mitübergeben werden können (zur konfigurierung des autocompleters).
  • acOn: boolean - zum ein- und ausschalten des autocompleters
  • acDiv: string - der div-container für die liste des autocompleters
  • acPath: string - pfad zur datei, die die autocompleter-ergebnisse zurückliefert
  • acParam: string - zusätzliche parameter, die zur obigen datei mitübergeben werden
beispiel
code (html)
<input type="text" id="myElement" name="myElement" />
<div id="inplaceEditorList" style="display:none;"></div>

code (javascript)
<script type="text/javascript">
  new Ajax.InPlaceEditor('myElement','file.php',{
    acDiv:'inplaceEditorList',
    acPath:'autocompleterList.php',
    acParam:'elem',
    acOn:1
  });
</script>

zum abstellen des (meiner meinung nach) nervigen gelben highlight effekts fügt man diese zeilen hinzu:
Ajax.InPlaceEditor.DefaultOptions.highlightEndColor = 'transparent';
Ajax.InPlaceEditor.DefaultOptions.highlightColor = 'transparent';

falls es jemand geholfen hat, wäre ich über ein kommentar froh ;)

mfg mailo

ps: es wurde die version 1.8.1 von scriptaculous verwendet!

user status

Du bist nicht angemeldet.

archiv

August 2009
Mo
Di
Mi
Do
Fr
Sa
So
 
 
 
 
 
 2 
 4 
 5 
 6 
 7 
 8 
 9 
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
 
 
 
 
 
 
 

hinweis

die in diesem blog enthaltenen beiträge dienen ausschließlich dem informationszweck!

der autor übernimmt KEINE HAFTUNG für jeglichen missbrauch dieser informationen!

latest comments

Kumpulan Cerita Seks...
Kumpulan Cerita Seks Dewasa Terbaru 2017 Cerita Sex...
Cerita Sex (Gast) - 27. Feb, 02:58
St Patricks' Day Symbols...
The parade has more than 150,000 participants and attracts...
st patricks day t shirt (Gast) - 23. Feb, 14:08
John
Exclusively at Target 42 Bluray Combo Pack with exclusive...
Smithk112 (Gast) - 25. Mai, 20:10