开发者

XFORMS multiple select option binding issue

开发者 https://www.devze.com 2023-02-11 08:15 出处:网络
I have select control which allows to select more than one value. As and when i select values in that cont开发者_如何学Gorol, it adds the value into same node with a space.

I have select control which allows to select more than one value.

As and when i select values in that cont开发者_如何学Gorol, it adds the value into same node with a space.

Is it possible to create/delete a new/existing node when we select and deselect.


XForms has the xforms:copy element, which you can in theory use in itemsets, and which might have worked for you, but I don't know if any XForms implementation supports this at this time. Orbeon Forms doesn't.

Phil's answer is a possible direction. Another option is to still use xforms:select/select1 and react to the xforms-select/xforms-deselect events to insert/delete nodes. The following works with Orbeon:

<xh:html xmlns:xh="http://www.w3.org/1999/xhtml"
         xmlns:xf="http://www.w3.org/2002/xforms"
         xmlns:xxf="http://orbeon.org/oxf/xml/xforms"
         xmlns:ev="http://www.w3.org/2001/xml-events">
    <xh:head>
        <xf:model>
            <xf:instance>
                <items selection=""/>
            </xf:instance>
        </xf:model>
    </xh:head>
    <xh:body>
        <xf:select1 ref="@selection">
            <xf:item>
                <xf:label>One</xf:label>
                <xf:value>one</xf:value>
            </xf:item>
            <xf:item>
                <xf:label>Two</xf:label>
                <xf:value>two</xf:value>
            </xf:item>

            <xf:insert ev:event="xforms-select" context="instance()" ref="*" origin="xxf:element(event('xxf:item-value'))"/>
            <xf:delete ev:event="xforms-deselect" context="instance()" ref="*[name() = event('xxf:item-value')]"/>

        </xf:select1>
    </xh:body>
</xh:html>


The select element is a poor match for your requirements because it only has a single node binding. Instead of trying to subvert the control's semantics in that way, I would use a repeat of trigger elements with insert and delete actions, styled with CSS in such a way as to provide the appearance of a multi-selection control.

Your question doesn't mention the format of the data, but supposing instance data like this:

<xf:instance id="options">
    <options xmlns="">
        <option selected="false">
            <first />
        </option>
        <option selected="false">
            <second />
        </option>
        <option selected="false">
            <third />
        </option>
        <option selected="false">
            <fourth />
        </option>
        <option selected="false">
            <fifth />
        </option>
    </options>
</xf:instance>

<xf:instance id="results">
    <results xmlns="" />
</xf:instance>

Then you should be able to get the behaviour you want with something along these lines (not tested):

<xf:repeat id="repeat" nodeset="instance('options')/option">
    <xf:trigger appearance="minimal">
        <xf:label>
            <xf:output value="name(*)" />
        </xf:label>

        <xf:action ev:event="DOMActivate" if="@selected = 'false'">
            <xf:setvalue ref="@selected" value="'true'" />
            <xf:insert
             origin="instance('options')/option[index('repeat')]/*"
             context="instance('results')"
             nodeset="*"
             at="count(../*)"
             position="after"
            />
        </xf:action>

        <xf:action ev:event="DOMActivate" if="@selected = 'true'">
            <xf:setvalue ref="@selected" value="'false'" />
            <xf:delete nodeset="instance('results')/*[name(.) = name(current()/*)]" />
        </xf:action>
    </xf:trigger>
</xf:repeat>
0

精彩评论

暂无评论...
验证码 换一张
取 消