You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Joris Kimpe <jo...@get.be> on 2008/06/18 11:39:38 UTC

[TRINIDAD] panelPopup set focus on load

I have a table containing in each cell of a column a panelPopup.  This
panelPopup contains a tr:inputText wich needs to have to focus when the
popup is loaded.  How can I do this?  I think I need to develop some
javascript, but the id of the inputText contains some id.  Is this for each
cell the same?  Or how can I do this?


This is how my jsf page looks like:
...
<tr:panelPopup onclick="setCurrentSelectedDate('#{row.dateString}')"
text="create" 
								title="create #{row.dateStringForTitle}  " modal="true" 
								position="relative" rendered="#row.isCreationAllowed}">
    <tr:panelGroupLayout>
        <tr:outputLabel value="Time"/>
        <tr:inputText id="time" value="#{backingBean.time}"
maximumLength="8" immediate="true">
            <tr:convertDateTime type="time" timeStyle="medium"/>
        </tr:inputText>
        <br/>
        ...
    </tr:panelGroupLayout>
</tr:panelPopup>


This is my generated html:
...
<!--Start: org.apache.myfaces.trinidad.Input["timej_id_4"]-->
<input
id="personalShiftPlanOverviewForm:personalShiftPlanWeeklyOverviewTablePage:personalShiftPlanWeeklyOverviewTablej_id_1:0:timej_id_4"
name=
"personalShiftPlanOverviewForm:personalShiftPlanWeeklyOverviewTablePage:personalShiftPlanWeeklyOverviewTablej_id_1:0:timej_id_4"
class="x25" size="30" maxlength="8" type="text">
<!--Start: org.apache.myfaces.trinidad.Input["timej_id_4"]-->
<br>


Thanks!
-- 
View this message in context: http://www.nabble.com/-TRINIDAD--panelPopup-set-focus-on-load-tp17979169p17979169.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.


Re: [TRINIDAD] panelPopup set focus on load

Posted by Andrew Robinson <an...@gmail.com>.
I am not sure there is a way without hacking the TrPanelPopup JS code.
There is no JS on popup load envent the I know of. Handling it on page
load is not when the popup is shown, so that will not work


On 2008-06-19, Joris Kimpe <jo...@get.be> wrote:
>
> This is what I implemented:
>
> <tr:panelPopup onclick="setCurrentSelectedDate('#{row.dateString}')"
> 				text="#{text['calculationOverview.createBooking']}"
> 				title="#{text['calculationOverview.createBookingTitle']}
> #{row.dateStringForTitle}  " modal="true"
> 				position="relative" rendered="#{row.isBookingCreationAllowed}">
> 	<tr:panelGroupLayout>
> 		<tr:outputLabel value="#{text['calculationOverview.time']}"/>
> 		<tr:inputText id="time" value="#{calculationOverviewActions.bookingTime}"
> maximumLength="5" onkeyup="mask(event, this, '2', ':');checkForSubmit(event,
> 'calculationOverviewForm:calculationOverviewTablePageDaily:calculationOverviewTableDailyj_id_1:#{rowStatus.index}:createBtnDailyj_id_1');"
> onblur="mask(event, this, '2', ':');" immediate="true">
> 			<tr:convertDateTime pattern="HH:mm" timeStyle="medium"/>
> 		</tr:inputText>
> 		<br/>
> 		<tr:commandButton text="#{text['calculationOverview.Create']}"
> 			binding="#{calculationOverviewActions.createBtnDaily}"
> id="createBtnDaily"
> 			action="#{calculationOverviewActions.createBooking}"
> actionListener="#{calculationOverviewActions.createBookingActionListener}"
> />
> 		<tr:commandButton text="#{text['calculationOverview.Cancel']}"
> id="cancelBtn" immediate="true"
> action="#{calculationOverviewActions.cancel}"/>
> 		
> 		<script type="text/javascript">
> 		
> setFocus("calculationOverviewForm:calculationOverviewTablePageDaily:calculationOverviewTableDailyj_id_1:#{rowStatus.index}:timej_id_1");
> 		</script>																			
> 	</tr:panelGroupLayout>					
> </tr:panelPopup>
>
>
> But this results in an error:
> #{..} is not allowed in template text
>
>
>
> How can I do this?
>
> Thanks!
>
> Joris
>
>
>
>
>
> mime wrote:
>>
>> You can get the id by Id's plus varStatus index.
>>
>>
>> Example:
>>
>> <tr:table id="tableId" varStatus="row"...
>>
>>     <tr:inputText id="inputId"...
>>
>>     <script>
>>
>>        document.getElementById('tableId:#{row.index}:inputId');
>>
>>     </script>
>>
>>
>> So you have the element in the dom tree, you can set what you want. Yous
>> a onclick event or something else.
>>
>>
>> Best regards Michael
>>
>>
>> Joris Kimpe schrieb:
>>
>>> I have a table containing in each cell of a column a panelPopup.  This
>>> panelPopup contains a tr:inputText wich needs to have to focus when the
>>> popup is loaded.  How can I do this?  I think I need to develop some
>>> javascript, but the id of the inputText contains some id.  Is this for
>>> each
>>> cell the same?  Or how can I do this?
>>>
>>>
>>> This is how my jsf page looks like:
>>> ...
>>> <tr:panelPopup onclick="setCurrentSelectedDate('#{row.dateString}')"
>>> text="create"
>>> 								title="create #{row.dateStringForTitle}  " modal="true"
>>> 								position="relative" rendered="#row.isCreationAllowed}">
>>>     <tr:panelGroupLayout>
>>>         <tr:outputLabel value="Time"/>
>>>         <tr:inputText id="time" value="#{backingBean.time}"
>>> maximumLength="8" immediate="true">
>>>             <tr:convertDateTime type="time" timeStyle="medium"/>
>>>         </tr:inputText>
>>>         <br/>
>>>         ...
>>>     </tr:panelGroupLayout>
>>> </tr:panelPopup>
>>>
>>>
>>> This is my generated html:
>>> ...
>>> <!--Start: org.apache.myfaces.trinidad.Input["timej_id_4"]-->
>>> <input
>>> id="personalShiftPlanOverviewForm:personalShiftPlanWeeklyOverviewTablePage:personalShiftPlanWeeklyOverviewTablej_id_1:0:timej_id_4"
>>> name=
>>> "personalShiftPlanOverviewForm:personalShiftPlanWeeklyOverviewTablePage:personalShiftPlanWeeklyOverviewTablej_id_1:0:timej_id_4"
>>> class="x25" size="30" maxlength="8" type="text">
>>> <!--Start: org.apache.myfaces.trinidad.Input["timej_id_4"]-->
>>> <br>
>>>
>>>
>>> Thanks!
>>>
>>
>>
>
> --
> View this message in context:
> http://www.nabble.com/-TRINIDAD--panelPopup-set-focus-on-load-tp17979169p18005748.html
> Sent from the MyFaces - Users mailing list archive at Nabble.com.
>
>

Re: [TRINIDAD] panelPopup set focus on load

Posted by Joris Kimpe <jo...@get.be>.
This is what I implemented:

<tr:panelPopup onclick="setCurrentSelectedDate('#{row.dateString}')" 
				text="#{text['calculationOverview.createBooking']}" 
				title="#{text['calculationOverview.createBookingTitle']}
#{row.dateStringForTitle}  " modal="true" 
				position="relative" rendered="#{row.isBookingCreationAllowed}">
	<tr:panelGroupLayout>
		<tr:outputLabel value="#{text['calculationOverview.time']}"/>
		<tr:inputText id="time" value="#{calculationOverviewActions.bookingTime}"
maximumLength="5" onkeyup="mask(event, this, '2', ':');checkForSubmit(event,
'calculationOverviewForm:calculationOverviewTablePageDaily:calculationOverviewTableDailyj_id_1:#{rowStatus.index}:createBtnDailyj_id_1');"
onblur="mask(event, this, '2', ':');" immediate="true">
			<tr:convertDateTime pattern="HH:mm" timeStyle="medium"/>
		</tr:inputText>
		<br/>
		<tr:commandButton text="#{text['calculationOverview.Create']}"
			binding="#{calculationOverviewActions.createBtnDaily}"
id="createBtnDaily"
			action="#{calculationOverviewActions.createBooking}"
actionListener="#{calculationOverviewActions.createBookingActionListener}"
/>
		<tr:commandButton text="#{text['calculationOverview.Cancel']}"
id="cancelBtn" immediate="true"
action="#{calculationOverviewActions.cancel}"/>
		
		<script type="text/javascript">
		
setFocus("calculationOverviewForm:calculationOverviewTablePageDaily:calculationOverviewTableDailyj_id_1:#{rowStatus.index}:timej_id_1");
		</script>																			
	</tr:panelGroupLayout>					
</tr:panelPopup>


But this results in an error:
#{..} is not allowed in template text



How can I do this?

Thanks!

Joris





mime wrote:
> 
> You can get the id by Id's plus varStatus index.
> 
> 
> Example:
> 
> <tr:table id="tableId" varStatus="row"...
> 
>     <tr:inputText id="inputId"...
> 
>     <script>
> 
>        document.getElementById('tableId:#{row.index}:inputId');
> 
>     </script>
> 
> 
> So you have the element in the dom tree, you can set what you want. Yous 
> a onclick event or something else.
> 
> 
> Best regards Michael
> 
> 
> Joris Kimpe schrieb:
> 
>> I have a table containing in each cell of a column a panelPopup.  This
>> panelPopup contains a tr:inputText wich needs to have to focus when the
>> popup is loaded.  How can I do this?  I think I need to develop some
>> javascript, but the id of the inputText contains some id.  Is this for
>> each
>> cell the same?  Or how can I do this?
>>
>>
>> This is how my jsf page looks like:
>> ...
>> <tr:panelPopup onclick="setCurrentSelectedDate('#{row.dateString}')"
>> text="create" 
>> 								title="create #{row.dateStringForTitle}  " modal="true" 
>> 								position="relative" rendered="#row.isCreationAllowed}">
>>     <tr:panelGroupLayout>
>>         <tr:outputLabel value="Time"/>
>>         <tr:inputText id="time" value="#{backingBean.time}"
>> maximumLength="8" immediate="true">
>>             <tr:convertDateTime type="time" timeStyle="medium"/>
>>         </tr:inputText>
>>         <br/>
>>         ...
>>     </tr:panelGroupLayout>
>> </tr:panelPopup>
>>
>>
>> This is my generated html:
>> ...
>> <!--Start: org.apache.myfaces.trinidad.Input["timej_id_4"]-->
>> <input
>> id="personalShiftPlanOverviewForm:personalShiftPlanWeeklyOverviewTablePage:personalShiftPlanWeeklyOverviewTablej_id_1:0:timej_id_4"
>> name=
>> "personalShiftPlanOverviewForm:personalShiftPlanWeeklyOverviewTablePage:personalShiftPlanWeeklyOverviewTablej_id_1:0:timej_id_4"
>> class="x25" size="30" maxlength="8" type="text">
>> <!--Start: org.apache.myfaces.trinidad.Input["timej_id_4"]-->
>> <br>
>>
>>
>> Thanks!
>>   
> 
> 

-- 
View this message in context: http://www.nabble.com/-TRINIDAD--panelPopup-set-focus-on-load-tp17979169p18005748.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.


Re: [TRINIDAD] panelPopup set focus on load

Posted by Michael Meierhoff <Mi...@WebtopProject.de>.
You can get the id by Id's plus varStatus index.


Example:

<tr:table id="tableId" varStatus="row"...

    <tr:inputText id="inputId"...

    <script>

       document.getElementById('tableId:#{row.index}:inputId');

    </script>


So you have the element in the dom tree, you can set what you want. Yous 
a onclick event or something else.


Best regards Michael


Joris Kimpe schrieb:

> I have a table containing in each cell of a column a panelPopup.  This
> panelPopup contains a tr:inputText wich needs to have to focus when the
> popup is loaded.  How can I do this?  I think I need to develop some
> javascript, but the id of the inputText contains some id.  Is this for each
> cell the same?  Or how can I do this?
>
>
> This is how my jsf page looks like:
> ...
> <tr:panelPopup onclick="setCurrentSelectedDate('#{row.dateString}')"
> text="create" 
> 								title="create #{row.dateStringForTitle}  " modal="true" 
> 								position="relative" rendered="#row.isCreationAllowed}">
>     <tr:panelGroupLayout>
>         <tr:outputLabel value="Time"/>
>         <tr:inputText id="time" value="#{backingBean.time}"
> maximumLength="8" immediate="true">
>             <tr:convertDateTime type="time" timeStyle="medium"/>
>         </tr:inputText>
>         <br/>
>         ...
>     </tr:panelGroupLayout>
> </tr:panelPopup>
>
>
> This is my generated html:
> ...
> <!--Start: org.apache.myfaces.trinidad.Input["timej_id_4"]-->
> <input
> id="personalShiftPlanOverviewForm:personalShiftPlanWeeklyOverviewTablePage:personalShiftPlanWeeklyOverviewTablej_id_1:0:timej_id_4"
> name=
> "personalShiftPlanOverviewForm:personalShiftPlanWeeklyOverviewTablePage:personalShiftPlanWeeklyOverviewTablej_id_1:0:timej_id_4"
> class="x25" size="30" maxlength="8" type="text">
> <!--Start: org.apache.myfaces.trinidad.Input["timej_id_4"]-->
> <br>
>
>
> Thanks!
>