Monatsrückblick Juli / August 2026 ist online!

[Uwe1958]

Ich möchte in meiner Vis ein Menu mit Untermenus erstellen. Dazu soll durch Auswahl einer Zeile im Menu das entsprechende Untermenu in die Tabelle geladen werden

Dazu habe ich bis jetzt aufgebaut:

• das Menu wird in einem Html Widget in einer darin integrierten Table dargestellt
• der Html-Code für die Table wird über Binding von einem Datenpunkt ausgelesen
• über Scripting im Vis (jQuery) werden die Werte der gewählten Reihe in einen Datenpunkt geschrieben
• die Änderung dieses Datenpunktes triggered die Neuberechnung des Datenpunktes für die Tabelle

Damit erreiche ich den ersten Schritt, dass das Untermenü nun anzeigt wird. Allerdings funktionieren die jQuery- Trigger nach Änderung der Tabelle nicht. Erst wenn die Seite aktualisiert wird (z.B. mit F5) sind die Trigger wieder aktiv.

Die vis Scripte habe ich im [HowTo] Skripte im VIS Editor mit jQuery gefunden und entsprechend abgeändert.

    function  waitForWidgets(callBack, counter = 0, debug = true) {
        if (counter < 500) {
 
            setTimeout(function () {
                if (vis.widgets && vis.widgets !== null && Object.keys(vis.widgets).length > 0) {
                    callBack();
                } else {
                    if (debug) console.log(`[waitForWidgets] wait for widgets`);
                    counter++
                    vis.binds.materialdesign.helper.waitForWidgets(callBack, counter, debug);
                }
            }, 1);
        } else {
            console.warn(`[waitForWidgets] stop waiting for vis widgets after ${counter} retries`);
            callBack();
        }
    }
    
    function setState(id, value) {
        this.vis.setValue(id, value);
    }
    
    waitForWidgets(function () {
      // Widgets sind vollständig geladen, wir können irgendwas damit machen
    /*    $("tr").on("click", "[class*='title']", function(){
        alert('hier: '+ $(this).html());
    });*/
        $("tr.menuitem").click(function(){
                var browseKey = $('.browseKey',this).html();
                var headerTitle = $('.header',this).html();
                var newCommand = `{\"browseKey\": \"${browseKey}\", \"headerTitle\": \"${headerTitle}\"}`;
                console.log(newCommand);
                setState(testState,newCommand);
        });
        $("td.menu-title").hover(function(){
            $(this).toggleClass('inside');
        });
        $("td.album-title").hover(function(){
            $(this).toggleClass('inside');
        });
    }, 0, true); 

Die Trigger in den Zeilen 28 bis 44 funktionieren, wie gesagt, nur einmal und nicht nach der Neuerstellung der Tabelle.

Leider bin ich nicht so firm in jQuery, dass ich weiß, wie ich diese Trigger immer aktiv halten kann.

Kann mir da jemand helfen?

Vielen Dank im Voraus.