1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How do I add a xen:options drop down to a template?

Discussion in 'XenForo Development Discussions' started by AndyB, Dec 8, 2013.

  1. AndyB

    AndyB Well-Known Member

    I have the following template:

    Code:
    <div class="formOverlay">
        <xen:title>{xen:phrase add_thread_to_calendar}</xen:title>
        <form action="{xen:link 'threads/calendar-add-save', $thread}" method="post" class="xenForm AutoValidator" data-redirect="on">
            <dl class="ctrlUnit submitUnit">
           
                <xen:selectunit label="{xen:phrase user_group}:" name="user_group_id" value="{$user.user_group_id}">
                    <xen:options source="$userGroups" />
                    <xen:explain>{xen:raw $_userChangesHtml}</xen:explain>
                </xen:selectunit>  
           
                <dd><input type="submit" value="Submit" class="button primary" accesskey="s" /></dd>
            </dl>
            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
        </form>
    </div>
    
    When I try to save the template I get the following error:

    My goal is to be able to display a drop down that allows the user to select a month, so the list would contain Jan, Feb, Mar etc..
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    <xen:selectunit> and many other tags are available only in Admin templates.

    Anywhere else you need to use good old fashioned HTML.

    Many examples of the typical structure in account templates.
     
  3. AndyB

    AndyB Well-Known Member

    Thank you, Chris. That was exactly the information I needed!

    I added the following to my code and and it displayed a select drop down.

    Code:
    <div class="formOverlay">
        <xen:title>{xen:phrase add_thread_to_calendar}</xen:title>
        <form action="{xen:link 'threads/calendar-add-save', $thread}" method="post" class="xenForm AutoValidator" data-redirect="on">
            <dl class="ctrlUnit submitUnit">
           
                <li><label for="ctrl_allow_send_personal_conversation_enable"><input type="checkbox" name="allow_send_personal_conversation_enable" value="1" id="ctrl_allow_send_personal_conversation_enable" class="Disabler OptOut" {xen:checked "{$visitor.allow_send_personal_conversation} != 'none' "} />
                    {xen:phrase accept_conversations_from}...</label>
                    <ul id="ctrl_allow_send_personal_conversation_enable_Disabler">
                        <li>
                            <select name="allow_send_personal_conversation" class="textCtrl autoSize" id="ctrl_allow_send_personal_conversation">
                                <xen:comment><option value="everyone" {xen:selected "{$visitor.allow_send_personal_conversation} == 'everyone' "} disabled="disabled">{xen:phrase all_visitors}</option></xen:comment>
                                <option value="members"  {xen:selected "{$visitor.allow_send_personal_conversation} == 'members'  "}>{xen:phrase members_only}</option>
                                <option value="followed" {xen:selected "{$visitor.allow_send_personal_conversation} == 'followed' "}>{xen:phrase people_you_follow_only}</option>
                            </select>
                        </li>
                    </ul>
                </li> 
           
                <dd><input type="submit" value="Submit" class="button primary" accesskey="s" /></dd>
            </dl>
            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
        </form>
    </div>
    
     
    Last edited: Dec 8, 2013
  4. AndyB

    AndyB Well-Known Member

    I'm getting closer.

    Code:
    <div class="formOverlay">
        <xen:title>{xen:phrase add_thread_to_calendar}</xen:title>
        <form action="{xen:link 'threads/calendar-add-save', $thread}" method="post" class="xenForm AutoValidator" data-redirect="on">
            <dl class="ctrlUnit submitUnit">
            
                <li>
                    <ul>
                        <select name="month" class="textCtrl autoSize" id="month">
                            <option value="Jan" {xen:selected "{$visitor.month} == 'Jan' "}>Jan</option>
                            <option value="Feb" {xen:selected "{$visitor.month} == 'Feb' "}>Feb</option>
                        </select>
                    </ul>
                </li>  
            
                <dd><input type="submit" value="Submit" class="button primary" accesskey="s" /></dd>
            </dl>
            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
        </form>
    </div>
    
     
    Last edited: Dec 8, 2013
  5. AndyB

    AndyB Well-Known Member

    Here's the code that works. This code allows me to select the month, day and year.

    Code:
    <div class="formOverlay">
        <xen:title>{xen:phrase add_thread_to_calendar}</xen:title>
        <form action="{xen:link 'threads/calendar-add-save', $thread}" method="post" class="xenForm AutoValidator" data-redirect="on">
            <dl class="ctrlUnit submitUnit">
                <li>
                    <ul>
                        <select name="month" class="textCtrl autoSize" id="month">
                            <option value="01">Jan</option>
                            <option value="02">Feb</option>
                            <option value="03">Mar</option>
                            <option value="04">Apr</option>
                            <option value="05">May</option>
                            <option value="06">Jun</option>
                            <option value="07">Jul</option>
                            <option value="08">Aug</option>
                            <option value="09">Sep</option>
                            <option value="10">Oct</option>
                            <option value="11">Nov</option>
                            <option value="12">Dec</option>
                        </select>
                    </ul>
                    <ul>
                        <select name="day" class="textCtrl autoSize" id="day">
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                        </select>
                    </ul>
                    <ul>
                        <select name="year" class="textCtrl autoSize" id="year">
                            <option value="2013">2013</option>
                        </select>
                    </ul>
                </li>
                <dd><input type="submit" value="Submit" class="button primary" accesskey="s" /></dd>
            </dl>
            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
        </form>
    </div>
    
     

Share This Page