Anleitung für eigenes Widget

[accelle]

Hallo,
ich möchte gerne ein Basic-Widget (multistate) anpassen , damit es kein Button, sondern ein Icon ist. Habe es dazu in eine eigene Datei (myButton.html) kopiert, und folgendermaßen modifiziert:

{% macro multi_symbol(id, item, val, img, type) %}
    <span id="{{ uid(page, id) }}"
        data-widget="myButtons.multi_symbol"
        data-item="{{ item }}"
        data-vals="{{ implode(val) }}"  
        data-img="{{ implode(img|deficon) }}"
        data-value="3"
        class="ui-{{ type|default('mini') }}"
        data-inline="true"
        data-iconpos="center">

        <img class="icon" src="{{ img[0]|deficon('control_on_off.svg') }}"/>
    </span>

{% endmacro %}

In der visu.js habe ich den Code von multistate ebenfalls kopiert, den Namen geändert und die Click-Funktion entfernt:

$.mobile.activePage.find('span[data-widget="MyButtons.multi_symbol"]').on( {
        'update': function (event, response) {
            event.stopPropagation();
            // get list of values and images
            list_val = $(this).attr('data-vals').explode();
            list_img = $(this).attr('data-img').explode();

            // get the index of the value received
            idx = list_val.indexOf(response.toString());

            // update the image
            $('#' + this.id + ' img').attr('src', list_img[idx]);

        }
    });

Es zeigt leider immer nur das img[0] an, es wird kein Update durchgeführt. Wo liegt mein Fehler?

[bmx]

Javascript ist "case sensitive" als es wird zwischen Groß und Kleinschreibung unterschieden. MyButtons.multi_symbol ist nicht gleich zu myButtons.multi_symbol.

[accelle]

Danke für den Hinweis. Habe jetzt alle Groß-/Kleinschreibungen identisch.

Jetzt bekomme ich in visu.js in der Zeile

$.mobile.activePage.[COLOR=#FF0000][B]find('span[data-widget="myButtons.multi_symbol"]').on([/B][/COLOR] {

den fett/rot markierten Teil in Chrome unterkringelt und die Fehlermeldung cannot read property 'find' of undefined

Leider kann ich damit überhaupt nichts anfangen. Kann jemand helfen?

[smai]

Rufst du das Script evtl. auf, bevor jQuery Mobile geladen ist?
In welcher Version der smartVISU bewegst du dich?

[accelle]

smartVISU 2.8
Das js rufe ich gar nicht auf.
Das Widget wird geladen, wenn ich in der Visu einen bestimmten Raum anklicke.

[smai]

Ist das oben deine gesamte visu.js? Dann wird das gleich .on( beim Laden aufgerufen, wenn es noch gar keine activePage gibt.
In 2.8 werden die Events der Widgets in $(document).on('pagebeforeshow', ... gebunden. Allerdings hat sich das als nicht optimal erwiesen.
Besser ist es, sie beim pagecreate zu binden, allerdings existiert dann activePage noch nicht.

Deshalb wird in der kommenden Version folgendes Konstrukt verwendet:

$(document).on('pagecreate', function (bevent, bdata) {
  $(bevent.target).find('span[data-widget="myButtons.multi_symbol"]').on( {
  ...
  });
});

[accelle]

Super, funktioniert, danke! :-)