Updating Selected Values of Dynamic Multiselectors in Pentaho-CDE

Question

Short version: How, using JavaScript or JQuery, do I dynamically reassign the selected value of a dynamically generated multiselector box to a default value given certain conditions are met on the change (user select) in another?

Long version:

I have three levels of multiselectors (State, Metro Area (aka MSA), County) dynamically dependent on each other, so that only counties and metro areas intersecting the chosen states are displayed in the respective selectors.

My problem is that if I select an MSA within, say, Maryland and then click on Texas, my table that the multiselectors filter (a parameterized MDX query) crashes.

Going by the error logs in Pentaho's catalina.out, it appears that the MSA (Metro Area) selector parameter becomes undefined when a state that does not contain the previously selected MSA is chosen.

I would like to make it so that when a new state or group of states is selected that does not include the currently selected MSA or County, those selectors revert to the default ("All") value. I'm a JQuery and JavaScript newby, so I need as much detail as possible, while still being considerate of your time.

Additional details, if needed:

The values in the MSA (Metro Area) selector change depending on the state(s) that are selected, and the County selector is dependent on State and Metro Area. This is all happening on an HTML page (generated by Pentaho's CDE Dashboard). The datasource for each is a parameterized SQL query (carried out by Pentaho).

When the "All" option for county and MSA is selected I can safely change the state selection: working

When something other than the "All" option for county and MSA is selected I cannot change change the state selection without the dashboard crashing:

Data coming from SQL is a two-column array, with an MDX-formatted value and a clear-text label, with an All Value to specify the MDX parent 'All' value.

I don't think this question is too broad. I'm specifically asking for one thing: how to dynamically reassign the value of a multiselector box given certain conditions on the change in another. It's almost pure JQuery, all the Pentaho and SQL stuff is just context. — Serban Tanasa, Apr 22 '15 at 15:00
I think you can remove most of the context of your question, like the SQL query, it's not really relevant to the jQuery related question you're asking. Besides that, you should show the current jQuery source code you have, like this we can't see what you're doing wrong. — gitaarik, Apr 22 '15 at 15:02
@rednaw, that's the rub, the page is geneated by the Pentaho BI tool, but it allows for customization via inserting your own jquery or js statements in pre and post execution and pre and post change. — Serban Tanasa, Apr 22 '15 at 15:04

score 3 · Answer 1 · answered Apr 22 '15 at 15:08

3

If you don't give much context, I can't give you a very specific answer, so I hope you'll have enough from this:

$('.one-input').change(function() {

    if ($(this).val() == 'something') {
        $('.other-input').val('default-value');
    }

});

answered Apr 22 '15 at 15:08

gitaarik

42,736
12
98
105

Thanks, while not actually what I was looking for, it definitely sent me looking in the right direction. – Serban Tanasa Apr 22 '15 at 18:05

Serban Tanasa · Answer 2 · 2015-04-22T18:17:46.087

Solved it. A lot of the code was Pentaho-CDE specific, namely because instead of attempting to change the value of the selector directly, I set a listener for the parameter that stores the selector value in the selector itself and changed that.

Placed the code below in Pentaho-CDE as a JS resource, then used a variant on @renaw's .change() answer to update all of my components selected values dynamically to a default just in case their previously selected value were to vanish from the new available option set.

$(document).ready(function() {
    // set default value to start with
    var all_msas = "[Metro Area]";
    var all_counties = "[County]";
    var all_zips = "[ZIP]";
   Dashboards.fireChange("msa_param", all_msas);
   Dashboards.fireChange("county_param", all_counties);
   Dashboards.fireChange("zip_param", all_zips);


    // what's happening on select
    $("#stateSelectorRow").on("change", function () {
            Dashboards.fireChange("msa_param", all_msas);
            Dashboards.fireChange("county_param", all_counties);
            Dashboards.fireChange("zip_param", all_zips);
    });

    $("#msaSelectorRow").on("change", function () {
        Dashboards.fireChange("county_param", all_counties);
        Dashboards.fireChange("zip_param", all_zips);
    });

   $("#countySelectorRow").on("change", function () {
       Dashboards.fireChange("zip_param", all_zips);
    });

})

Updating Selected Values of Dynamic Multiselectors in Pentaho-CDE

2 Answers2