HTML Select in Extensions

[Nicole-Smith]

When trying to implement an HTML select in an extension object, I am getting some weird behavior.

1.  When I make a selection in the dropdown list, then hit F5 to refresh my object, the selection that I made goes away.

2.  When I try to alert out what is selected in the dropdown list, the alert returns nothing.

I have attached an example extension where this can be seen (the Definition.xml is actually from this post by Erik Wetterberg).

Has anyone else seen this odd behavior?  If not, is there anyone that has gotten the HTML select to work in an extension?

Any comments/thoughts are greatly appreciated!

Thanks!

[ErikWetterberg]

Hi,

The select is used in the StreamChart extension, which as far as I can tell works fine. I include a copy.

You should not need to press F5 to refresh your object, when you change a property, the rendering function should be called automatically.

What sometimes causes problems is that properties are created when you add a object to the document. If you at a leter time add more properties to Definition.xml, they will not affect already created objects. You'll need to remove and recreate them for the changes to take palce.

Erik

[Nicole-Smith · Accepted solution]

In case anyone else is looking for an answer to this...

What I didn't realize is that in order to use the HTML select, you need to include extra code in your script.js file:

if (Qva.Mgr.mySelect == undefined) {
    Qva.Mgr.mySelect = function (owner, elem, name, prefix) {
        if (!Qva.MgrSplit(this, name, prefix)) return;
        owner.AddManager(this);
        this.Element = elem;
        this.ByValue = true;
        elem.binderid = owner.binderid;
        elem.Name = this.Name;
        elem.onchange = Qva.Mgr.mySelect.OnChange;
        elem.onclick = Qva.CancelBubble;
    }
    Qva.Mgr.mySelect.OnChange = function () {
        var binder = Qva.GetBinder(this.binderid);
        if (!binder.Enabled) return;
        if (this.selectedIndex < 0) return;
        var opt = this.options[this.selectedIndex];
        binder.Set(this.Name, 'text', opt.value, true);
    }
    Qva.Mgr.mySelect.prototype.Paint = function (mode, node) {
        this.Touched = true;
        var element = this.Element;
        var currentValue = node.getAttribute("value");
        if (currentValue == null) currentValue = "";
        var optlen = element.options.length;
        element.disabled = mode != 'e';
        //element.value = currentValue;
        for (var ix = 0; ix < optlen; ++ix) {
            if (element.options[ix].value === currentValue) {
                element.selectedIndex = ix;
            }
        }
        element.style.display = Qva.MgrGetDisplayFromMode(this, mode);
    }
}

Once this code is included, you can call your text variables like you normally would (i.e. this.Layout.Text0, this.Layout.Text1, etc.).

[andrewpettit]

Nicole,

Are you putting this in your _done or _init?

[Nicole-Smith]

I put it outside of everything, like this:

Qva.LoadScript("http://www.google.com/jsapi?callback=loadGoogleCoreChart", function () {

});

function loadGoogleCoreChart() {

    google.load('visualization', '1', {

        packages: ['corechart'],

        callback: googleCoreChartLoaded

    });

}

function googleCoreChartLoaded() {

    Qva.AddExtension('GooglePieChart', function () {

        //Declaring a two dimensional array (an array of arrays)

        var row = new Array(this.Data.Rows.length + 1);

        for (var i = 0; i <= this.Data.Rows.length; i++) {

            row = new Array(2);

        }

        //Getting the data from QlikView

        for (var j = 1; j <= this.Data.Rows.length; j++) {

            row[0] = this.Data.Rows[j - 1][0].text;

            var temp = this.Data.Rows[j - 1][1].text;

            row[1] = Number(temp);

        }

        //Changing the array to a data table

        var data = google.visualization.arrayToDataTable(row);

        //Instantiating and drawing the chart

        new google.visualization.PieChart(this.Element).draw(data, { chartArea: { left: 20, top: 20, width: "100%", height: "100%"} });

    });

}

//This is needed for the dropdown boxes (HMTL selects) to work

if (Qva.Mgr.mySelect == undefined) {

    Qva.Mgr.mySelect = function (owner, elem, name, prefix) {

        if (!Qva.MgrSplit(this, name, prefix)) return;

        owner.AddManager(this);

        this.Element = elem;

        this.ByValue = true;

        elem.binderid = owner.binderid;

        elem.Name = this.Name;

        elem.onchange = Qva.Mgr.mySelect.OnChange;

        elem.onclick = Qva.CancelBubble;

    }

    Qva.Mgr.mySelect.OnChange = function () {

        var binder = Qva.GetBinder(this.binderid);

        if (!binder.Enabled) return;

        if (this.selectedIndex < 0) return;

        var opt = this.options[this.selectedIndex];

        binder.Set(this.Name, 'text', opt.value, true);

    }

    Qva.Mgr.mySelect.prototype.Paint = function (mode, node) {

        this.Touched = true;

        var element = this.Element;

        var currentValue = node.getAttribute("value");

        if (currentValue == null) currentValue = "";

        var optlen = element.options.length;

        element.disabled = mode != 'e';

        //element.value = currentValue;

        for (var ix = 0; ix < optlen; ++ix) {

            if (element.options[ix].value === currentValue) {

                element.selectedIndex = ix;

            }

        }

        element.style.display = Qva.MgrGetDisplayFromMode(this, mode);

    }

}

[#6]

Hi Nicole,

Thank you for sharing your solution!

But it only seems to work for a small part.. I was wondering if anyone/you has the same problem.

After placing your code, loading my extension, selecting a value from a dropdown I get the selected value in my "alert(dropdownSelection)", so thats ok!

But after hitting F5 to reload my webview and selecting a value from a dropdown I dont even get the box with my alert, I first have the hit a checkbox before my alert prompts with the value, and this is the value from before hitting F5. Whatever I do, it wont change the value anymore after hitting F5.

Did you had/have this problem too?

Thanks in advance!

Cheers, Kenneth

[#7]

Why? What is this code doing?