| 
Software
 » 
Mozilla
 » 
Mozilla - XForms

Dynamic update content in tabs

View: New views
4 Messages — Rating Filter:   Alert me  

Dynamic update content in tabs

by jklcom99 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hi,

I have a select that lists the items from the data instance, and below it I have three tabs.  Each tab has some controls for users to edit the data elements.  I would like to update the content in the tabs based on the selected item in the select control above.  Can this be done?

Thanks

Parent Message unknown Re: Dynamic update content in tabs

by Aaron Reed :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hey,

Sure, if you want.  If you just want simple html tabs, then just have to
modify the text when the select's value changes or when the item in the
select is chosen (both have events in xforms that you can listen for
using JS event listeners and handlers).

Or you could use just XForms.  I beleve that the xforms wikibook has
examples.  Here is one:
http://en.wikibooks.org/wiki/XForms/Horizontal_File_Tab_Menu.  So if the
text on the tabs comes from bound nodes, you can always set the value of
those nodes using xf:setvalue handling the xforms value changed and
select events I mentioned before.

--Aaron

jklcom99 wrote:
> Hi,
>
> I have a select that lists the items from the data instance, and below it I
> have three tabs.  Each tab has some controls for users to edit the data
> elements.  I would like to update the content in the tabs based on the
> selected item in the select control above.  Can this be done?
>
> Thanks
_______________________________________________
dev-tech-xforms mailing list
dev-tech-xforms@...
https://lists.mozilla.org/listinfo/dev-tech-xforms

Re: Dynamic update content in tabs, checkbox control not displaying correctly

by jklcom99 () :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Aaron,

I got the tabs to update with the current selected values by binding the select1 to a temporary nodeset and used xpath to fetch the proper value e.g:

The problem I have now is with the checkbox controls.  The checkboxes(like "Enabled" and "LogEnabled") are displayed as a checkboxes.   They all have the correct boolean value displayed (either true or false).  But the checkboxes are not checked when the value is true  

        <xf:model id="main_model" schema="group.xsd">
         <xf:instance xmlns="" id="saved-data" src="dynamictabs.xml" />
         <xf:instance xmlns="" id="pathTo">
            <data>
               <!-- set initial value to be the root node -->
               <current-role-id>0</current-role-id>
            </data>
         </xf:instance>
         <xf:bind id="current-role-id" nodeset="instance('pathTo')/current-role-id" />
        </xf:model>
    </head>
    <body>
        <xf:select1 ref="instance('pathTo')/current-role-id">
            <xf:itemset nodeset="//Group"
                model="main_model">
                <xf:label ref="@Role"/>
                <xf:value ref="@RoleId"/>
            </xf:itemset>
        </xf:select1><br/>
        <xf:output ref="instance('path')/current-role-id">
            <xf:label>Output:</xf:label>
        </xf:output>
        <br/>

                        ...

      <xf:switch>
         <xf:case id="case-1" selected="true">
            <div id="div-1">
                <xf:input class="RoleId" ref="instance('pathTo')/current-role-id">
      <xf:label>Role Id:</xf:label>
                </xf:input><br/>
                <xf:input class="GroupId" ref="//Group[@RoleId=instance('pathTo')/current-role-id]/@GID">
       <xf:label>Group Id:</xf:label>
        </xf:input><br/>
      <xf:select ref="//Group[@RoleId=instance('pathTo')/current-role-id]/@Enabled" appearance="full">
                  <xf:item>
                    <xf:label>Enabled</xf:label>
                    <xf:value><xf:output ref="//Policy[@RuleId=instance('pathTo')/current-role-id]/@Enabled"/></xf:value>
               </xf:item>
                </xf:select><br/>            

        <xf:select1 ref="//Group[@RoleId=instance('pathTo')/current-role-id]/@Action">  
            <xf:label>Action:</xf:label>
              <xf:item>
                  <xf:label>Allow</xf:label>
                  <xf:value>Allow</xf:value>
                </xf:item>
                <xf:item>
                  <xf:label>Reject</xf:label>
                                <xf:value>Reject</xf:value>
      </xf:item>
                </xf:select1><br/>            
      <xf:select ref="//Group[@RoleId=instance('pathTo')/current-role-id]/@LogEnabled" appearance="full">
                  <xf:item>
                    <xf:label>Log Enabled</xf:label>
                    <xf:value><xf:output ref="//Policy[@RuleId=instance('pathTo')/current-role-id]/@LogEnabled"/></xf:value>
               </xf:item>
                </xf:select><br/>            
            </div>
         </xf:case>

                        ...



Parent Message unknown Re: Dynamic update content in tabs

by Aaron Reed :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hi,

Um, type isn't an attribute on a xf control.  You need to set the type
in the instance data either using xsi:type directly on the instance data
node or by using schema.  You could also set the type using the type
attribute on a xf:bind element.

See this section of the spec for more details:
http://www.w3.org/TR/xforms11/#model-prop-type

Let us know if you have any other questions,
--Aaron

jklcom99 wrote:

> Aaron,
>
> I got the tabs to update with the current selected values by binding the
> select1 to a temporary nodeset and used xpath to fetch the proper value e.g:
>
> The problem I have now is with the checkbox controls.  The first
> checkbox("Enabled") is displayed as a checkbox.  Subsequent checkboxes (like
> "LogEnabled") are displayed as an input control.  When I select a different
> item from the select1, the first "Enabled" checkbox(will toggle to an input
> control and toggle back to checkbox if the original item is selected in
> select1) .  They all have the correct boolean value displayed in the input
> controls.  
>
>         <xf:model id="main_model" schema="group.xsd">
>          <xf:instance xmlns="" id="saved-data" src="dynamictabs.xml" />
>          <xf:instance xmlns="" id="pathTo">
>             <data>
>                <!-- set initial value to be the root node -->
>                <current-role-id>0</current-role-id>
>             </data>
>          </xf:instance>
>          <xf:bind id="current-role-id"
> nodeset="instance('pathTo')/current-role-id" />
>         </xf:model>
>     </head>
>     <body>
>         <xf:select1 ref="instance('pathTo')/current-role-id">
>             <xf:itemset nodeset="//Group"
>                 model="main_model">
>                 <xf:label ref="@Role"/>
>                 <xf:value ref="@RoleId"/>
>             </xf:itemset>
>         </xf:select1><br/>
>         <xf:output ref="instance('path')/current-role-id">
>             <xf:label>Output:</xf:label>
>         </xf:output>
>         <br/>
>
> ...
>
>       <xf:switch>
>          <xf:case id="case-1" selected="true">
>             <div id="div-1">
>        <xf:input class="RoleId" ref="instance('pathTo')/current-role-id">
>       <xf:label>Role Id:</xf:label>
>                 </xf:input><br/>
> <xf:input class="GroupId"
> ref="//Group[@RoleId=instance('pathTo')/current-role-id]/@GID">
>        <xf:label>Group Id:</xf:label>
>         </xf:input><br/>
> <xf:input
> ref="//Group[@RoleId=instance('pathTo')/current-role-id]/@Enabled"
> type="xs:boolean"  >
>        <xf:label>Enabled:</xf:label>
>         </xf:input><br/>
>         <xf:select1
> ref="//Group[@RoleId=instance('pathTo')/current-role-id]/@Action">  
>             <xf:label>Action:</xf:label>
>               <xf:item>
>                   <xf:label>Allow</xf:label>
>                   <xf:value>Allow</xf:value>
>                 </xf:item>
>                 <xf:item>
>                   <xf:label>Reject</xf:label>
>        <xf:value>Reject</xf:value>
>       </xf:item>
>        </xf:select1><br/>            
>        <xf:input
> ref="//Group[@RoleId=instance('pathTo')/current-role-id]/@LogEnabled"
> type="xs:boolean"  >
>        <xf:label>Log Enabled:</xf:label>
>         </xf:input><br/>
>             </div>
>          </xf:case>
>
> ...
>
>
>
_______________________________________________
dev-tech-xforms mailing list
dev-tech-xforms@...
https://lists.mozilla.org/listinfo/dev-tech-xforms
LightInTheBox - Buy quality products at wholesale price!
Free Forum Powered by Nabble Forum Help