Erweiterung basic.input

[Tom Bombadil]

Hallo,

ich habe am Wochenende versucht, basic.input um 'echte' Textfelder zu erweitern. Leider erfolglos. Laut diversen Quellen, die ich stundenlang 'ergoogelt' habe, sollte sich das Feld wie alle anderen auch im _update mit this.element.val(response[0]) befüllen lassen - aber egal, was ich mache, ich bekomme es nicht hin. response[0] ist da, ich kann es mir auch per alert ausgeben lassen, das Feld wird angezeigt - aber bleibt leer. Wahrscheinlich denke ich einfach mal wieder zu simpel ...

Frage: Hat schon jemand <textarea></textarea> in einem Widget im Einsatz?

Code bisher (text wird befüllt, textarea bleibt leer):

<div style='height:200px; width:200px;'>
    {{ basic.input('t1', 'jahreskalender.Januar', 'text') }}
    {{ basic.input('t2', 'jahreskalender.Januar', 'textarea') }}
</div>

{% macro input(id, item, type, min, max, step, format) %}
    {% if type|lower == 'textarea' %}
        <textarea {% if not id is empty %} id="{{ uid(page, id) }}"{% endif %} data-widget="basic.input" data-item="{{ item }}" type="textarea"></textarea>
    {% else %}
        <input{% if not id is empty %} id="{{ uid(page, id) }}"{% endif %} data-widget="basic.input" data-item="{{ item }}"
            {% if type|lower in ['time', 'timeflip'] %}
                type="text" data-role="datebox" data-datebox-mode="{{ type~'box' }}" data-use-focus="true"
                data-min-time="{{ min|default('false') }}" data-max-time="{{ max|default('false') }}"
            {% elseif type|lower in ['duration', 'durationflip'] %}
                type="text" data-role="datebox" data-datebox-mode="{{ type~'box' }}" data-use-focus="true"
                data-min-dur="{{ min|default('false') }}" data-max-dur="{{ max|default('false') }}" data-duration-step="{{ step }}"
            {% elseif type|lower in ['date', 'dateflip', 'datecal', 'dateslide'] %}
                type="text" data-role="datebox" data-datebox-mode="{{ (type == 'date' ? type : type|slice(4))~'box' }}" data-use-focus="true"
                data-min-days="{{ min|default('false') }}" data-max-days="{{ max|default('false') }}"
                data-stringformat ="{{ format|default('false') }}"
            {% else %}
                type="{{ type|default('text') }}"
                min="{{ min }}" max="{{ max }}" step="{{ step }}"
            {% endif %}
            data-clear-btn="false" />
    {% endif %}
{% endmacro %}

$.widget("sv.basic_input", $.sv.widget, {

    initSelector: 'input[data-widget="basic.input"][data-role!="datebox"]',

    _update: function(response) {
        var type = this.element.attr('type');
        // alert(response[0]);
        if(type == 'textarea') this.element.val(response[0]);  //geht nicht - kein val, value etc
        else this.element.val(response[0]);  // geht problemlos
    },

    [...]

/tom

[Bonze]

Du musst aufpassen, es gibt im widget den unterschied zwischen item und text/string..
willst du also ein item mit nem string bearbeiten/ anzeigen, oder einen wirklichen string?

Deshalb gibts beim toast widget auch unterschiedliche werte zur übergabe..

[Tom Bombadil]

Es geht um den Text, der in einem Item von Typ str steht (wie beim normalen basic.input vom Typ 'text', aber mehrzeilig - textarea kennt für die Behandlung der Zeilenübrüche das Attribut wrap). Toast muss ich mir dann tatsächlich mal ansehen ...

/tom

Nachtrag: Plain {{ item }} innerhalb der textarea hatte ich sogar auch schon versucht - mit mäßigem Erfolg. Vielleicht muss ich das auch einfach nur maskieren ({% autoescape true %} {{item}} {% endautoescape %}) - das habe ich noch nicht probiert ..

[Bonze]

Häh bin verwirrt...
Ein oder mehrzeilig is theoretisch egal..

Abh jetzt hab ichs, entweder musst du javascript nutzen oder wenn du ein widget bauen willst, kannst du auch basic.print nutzen

[Tom Bombadil]

Abh jetzt hab ichs, entweder musst du javascript nutzen oder wenn du ein widget bauen willst, kannst du auch basic.print nutzen

Nope, leider daneben - bisher gibt es nur basic.input vom Typ 'text', das kann aber nur einzeilig. Für mehrzeiligen Text will ich aber kein neues Widget bauen, sondern das bestehende basic.input erweitern.

Ziel ist, die einzelnen Elemente (Monate), die hier per basic.print ausgegeben werden, klickbar in einem Popup (andere Geschichte, gelöst) als 'nur Text' editierbar zu machen (ignorier mal die HTML-Listendarstellung, dafür gibt es auch schon eine Lösung - es geht um 'plain text editing über mehrere Zeilen').

/tom

[wvhn]

Das Problem ist der initSelector im JavaScript-Teil. Statt „input“ muss da „textarea“ rein. Dann funzt es auch ohne sonstige Änderungen im js.
Wie man das in einem gemeinsamen Widget abbilden kann, weiß ich (noch) nicht.

Gruß
Wolfram

[wvhn]

Ist einfacher, als gedacht:

initSelector: 'input[data-widget="basic.input"][data-role!="datebox"], textarea[data-widget="basic.input"]',

Schade ist nur, dass die Textbox sich beim ersten Anzeigen des Texts nicht auf die volle Höhe aller Zeilen skaliert.

[Tom Bombadil]

Uff, danke Wolfram. Da oben wäre ich nie drauf gekommen - danke für's Entfernen des Brettes vorm Kopf, jetzt erscheint es logisch!

/tom

[Bonze]

vl sowas mal probieren zum anpassen der höhe
https://stackoverflow.com/questions/...ea-auto-height