Xpages Dependent Dojo Filtering Select fields not working

Question

In my Xpages form I have two fields where the user will select values from a @DBLookup. They are categories and subcategories.

I got this working using combo boxes, but then I discovered Dojo Filtering Select! This is an awesome control and perfect for what I need to do as the user wants to use type ahead and just tab when they get the value they want.

The fields work fine EXCEPT I cannot get the 2nd field to populate. It is dependent on the value of the first field.

My code is below:

    <xp:td>
                    <xp:label id="label3" value="Work Category" style="font-weight:bold"></xp:label>
                </xp:td>
                <xp:td>




                    <xe:djFilteringSelect id="djFilteringSelect2"
                        rendered="true" value="#{document1.workCategory}">
                        <xe:this.defaultValue><![CDATA[""]]></xe:this.defaultValue>
                        <xp:selectItems>
                            <xp:this.value><![CDATA[#{javascript:var db = new Array(@DbName()[0], 'TSCTT.nsf'); 
    @DbColumn(db, "workCategoryView", 1)
    }]]></xp:this.value>
                        </xp:selectItems>
                        <xp:eventHandler event="onChange" submit="true"
                            refreshMode="complete">
                        </xp:eventHandler>
                        <xp:eventHandler event="onBlur" submit="true" refreshMode="complete"></xp:eventHandler>
                        <xp:eventHandler event="onFocus" submit="true"
                            refreshMode="complete">
                        </xp:eventHandler></xe:djFilteringSelect></xp:td>
                <xp:td>
                    <xp:message id="message3" for="workCategory"></xp:message>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td>
                    <xp:label value="Work Sub Category"
                        id="workSubCategory_Label1" for="workSubCategory1" style="font-weight:bold">
                    </xp:label>
                </xp:td>
                <xp:td>


                    <xe:djFilteringSelect id="djFilteringSelect3"
                        rendered="true" value="#{document1.workSubCategory}">
                        <xe:this.defaultValue><![CDATA[""]]></xe:this.defaultValue>
                        <xp:selectItems>
                            <xp:this.value><![CDATA[#{javascript:var db:NotesDatabase = session.getCurrentDatabase();
    var key:String = document1.getItemValueString("djFilteringSelect2");
    @DbLookup(db,"(DBLookupWorkSubCategoryView)",key,2,"[FAILSILENT]");

    }]]></xp:this.value>
                        </xp:selectItems>
                    </xe:djFilteringSelect></xp:td>
                <td></td>
            </xp:tr>
            <xp:tr>
                <xp:td>

Per Henrik Lausten Per Henrik Lausten · Accepted Answer · 2014-05-09T18:40:26

You are referring to the wrong field name (djFilteringSelect2 instead of workCategory).

Also, I will suggest you do a partial refresh instead of a full.

I don't think you need onBlur and onFocus events. Just use the onChange event.

Update

This example works:

<xe:djFilteringSelect id="djFilteringSelect2" value="#{document1.workCategory}">
    <xe:this.defaultValue><![CDATA[""]]></xe:this.defaultValue>
    <xp:selectItems>
        <xp:this.value><![CDATA[#{javascript:
                @DbColumn("", "workCategoryView", 1)
        }]]></xp:this.value>
    </xp:selectItems>
    <xp:eventHandler event="onChange" submit="true" refreshMode="partial" refreshId="djFilteringSelect3"></xp:eventHandler>
</xe:djFilteringSelect>

<xp:br></xp:br>

<xe:djFilteringSelect id="djFilteringSelect3" value="#{document1.workSubCategory}">
    <xe:this.dojoAttributes>
        <xp:dojoAttribute name="required" value="false"></xp:dojoAttribute>
    </xe:this.dojoAttributes>
    <xp:selectItems>
        <xp:this.value><![CDATA[#{javascript:
            var key:String = document1.getValue("workCategory");
            @DbLookup("","(DBLookupWorkSubCategoryView)",key,2,"[FAILSILENT]");
            }]]></xp:this.value>
    </xp:selectItems>
</xe:djFilteringSelect>

Notice how I have changed from reading the value from the 1st filtering select as document1.getItemValueString() to document1.getValue().

Also notice that I have added a dojoAttribute to tell the 2nd filtering select that it's not required because the required behaviour of the control caused the onchange partial refresh to fail and not run. If the filtering select is required, you can instead add an extra select item as the default value (as mentioned here).

Xpages Dependent Dojo Filtering Select fields not working

2 Answers