Setting "local" variable to be accessed "globally" at JSF page

Question

I've got following situation:

There is a JSF page:

<h:form id="form">

            <!-- MENU SHOULD GOES HERE -->
            <p:commandButton action="#{bean.sched.addWeek}" value="Add week" update="weeksTab" />

            <p:tabView id="weeksTab" value="#{bean.sched.weekList}" var="week" >

                <p:tab title="#{week.name}" >

                    <!-- THIS BUTTONS SHOULD BE IN MENU -->
                    <p:commandButton action="#{week.addDay}" value="Add day" update="weeksTab" />
                    <p:commandButton action="#{bean.sched.removeWeek(week)}" value="Remove week" update="weeksTab" />

                    <p:tabView id="daysTab" value="#{week.dayList}" var="day" >
                        <p:tab title="#{day.name}">

                        <!-- THIS BUTTON SHOULD BE IN MENU -->
                        <p:commandButton action="#{week.removeDay(day)}" value="Remove day" update="weeksTab" />

                        <!-- PROCESSING DAY : ADDING MEETINGS, ROUTINES ETC.
                            THOSE FUNCTIONS SHOULD BE ALSO AVAILABLE
                            IN MENU -->

                        </p:tab>
                    </p:tabView>
                </p:tab>
            </p:tabView>

I want to place all action controlls, such as adding/deleting/editing weeks, days, and user's daily acitivites buttons to the menu at the top of the page. The problem is how to pass to the outer tag variables that are menaged inside p:tabView ? Is it possible anyhow? I add sth like this inside h:form:

<p:toolbar>
                <p:toolbarGroup align="left">
                    <p:commandButton
                        onclick="jQuery('#hiddenAddWeekButton').click();return false;"
                        value="Add week" icon="ui-icon-circle-plus" ajax="false" />

                </p:toolbarGroup>
            </p:toolbar>

            <p:commandButton id="hiddenAddWeekButton"
                action="#{bean.sched.addWeek}" value="add week"
                update="weeksTab" style="display:none" />

but it's still not working..

Answer 1

try something like this

make your inner button hidden

<p:commandButton id="myHiddenButton" action="#{week.removeDay(day)}" value="Remove day" update="weeksTab" style="display:none"/>

than place new button above the tab

<p:commandButton value="Remove day" onclick="jQuery('#weeksTab\\:myHiddenButton').click();return false;" />

to be sure about the right id that is being genereated for the hidden button just do view source in your browser , i think it should be something like weeksTab:myHiddenButton (ussing the \:) to escape the :

---

UPDATE

Since its located in tab you should try using ends with selector , like this

<p:commandButton value="Remove day" onclick="myJsFunctionThatSitsInMyJsFile();return false;" />

where myJsFunctionThatSitsInMyJsFile

is as follows

function myJsFunctionThatSitsInMyJsFile(){
    jQuery('input[id$="hiddenAddDayButton"]:visible').click(); //added visible selector , so the only button that being visible , should be clicked
}