Ankündigung

Einklappen
Keine Ankündigung bisher.

Erweiterung basic.input

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Erweiterung basic.input

    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):
    Code:
    <div style='height:200px; width:200px;'>
        {{ basic.input('t1', 'jahreskalender.Januar', 'text') }}
        {{ basic.input('t2', 'jahreskalender.Januar', 'textarea') }}
    </div>
    Code:
    {% 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 %}
    Code:
    $.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
    Zuletzt geändert von Tom Bombadil; 08.03.2022, 16:38.

    #2
    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..

    Kommentar


      #3
      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 ..
      Zuletzt geändert von Tom Bombadil; 08.03.2022, 17:29.

      Kommentar


        #4
        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
        Zuletzt geändert von Bonze; 08.03.2022, 21:00.

        Kommentar


          #5
          Zitat von Bonze Bonze Beitrag anzeigen
          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
          Zuletzt geändert von Tom Bombadil; 08.03.2022, 21:42.

          Kommentar


            #6
            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

            Kommentar


              #7
              Ist einfacher, als gedacht:
              Code:
              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.
              Zuletzt geändert von wvhn; 08.03.2022, 22:31.

              Kommentar


                #8
                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

                Kommentar


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

                  Kommentar

                  Lädt...
                  X