You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@struts.apache.org by fireapple <ta...@gmail.com> on 2009/11/06 16:47:52 UTC

JQuery UI datepicker doesn't work in a struts 2 ajax page

Dear all,

    I'm using JQuery UI datepicker in my jsp page, here's the way I'm using:
[code]
&lt;s:textfield 
name="parentAndChildren[%{#ind.index}].segmentList[%{#stat.index}].departureDate"
size="7" cssClass="datepicker"/&gt;

	&lt;script type="text/javascript"&gt;
	$(function() {
		$(".datepicker").datepicker({
			changeMonth: true,
			changeYear: true,
			yearRange: '-5:+5',
			showOn: 'button', buttonImageOnly: true, buttonImage:
'images/calendar.gif'
		});
	});
	&lt;/script&gt;
    [/code]
It works fine if it's a new page. However, it doesn't work in an ajax page.
Anyone can give me some hints? Thanks.

Here's the info(from the same page) I found from firebug, it seems jquery
doesn't do its work in the ajax part of the page.
1. ajax part(doesn't work)
[code]
&lt;input
id="segment_udpateSegmentList_parentAndChildren_0__segmentList_0__departureDate"
class="datepicker" type="text" value="7/5/10" size="7"
name="parentAndChildren[0].segmentList[0].departureDate"/&gt;
    [/code]

2. static part(works)
[code]
&lt;input
id="segment_udpateSegmentList_parentAndChildren_1__segmentList_0__departureDate"
class="datepicker hasDatepicker" type="text" value="12/10/09" size="7"
name="parentAndChildren[1].segmentList[0].departureDate"/&gt;

    [/code]
-- 
View this message in context: http://old.nabble.com/JQuery-UI-datepicker-doesn%27t-work-in-a-struts-2-ajax-page-tp26230811p26230811.html
Sent from the Struts - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org


Re: JQuery UI datepicker doesn't work in a struts 2 ajax page

Posted by fireapple <ta...@gmail.com>.
Thanks, Johannes, I tried the plugin of the second link but it didn't work
out. It seems the plugin doesn't work for my struts 2.0.11.

 The build in Datepicker from dojo doesn't work for me because I use
<s:iterator>. segmentList[%{#stat.index}].departureDate can transfer value
back(can't display value) while segmentList[#stat.index].departureDate can
display value(can't transfer value back).


Johannes Geppert wrote:
> 
> Long time ago I also have trouble to execute Scripts in AJAX Content.
> http://old.nabble.com/-S2--No-JavaScript-in-TabbedPanel-to14772176.html#a14772176
> 
> So I switch to jQuery also for AJAX functions.
> 
> Why do you mix Dojo and jQuery?
> You can use the build in Datepicker from dojo or switch 
> to one of the two jQuery Plugins they exists for struts2.
> 
> http://code.google.com/p/struts2-jquery/
> 
> or
> 
> http://code.google.com/p/struts2-jquery-plugin/
> 
> Best Regards
> 
> Johannes Geppert
> 
> 
> 
> fireapple wrote:
>> 
>> Thanks Johannes, I'm using struts 2.0.11, this is my ajax submit tag:
>> 
>> <s:submit 	action="segment_udpateSegmentList" value="Update" theme="ajax"
>> targets="%{'segment_edit_message'+#ind.index}" showLoadingText="false"
>> indicator="%{'loadingImage'+#ind.index}" executeScripts="true" />
>> 
>> I just added executeScripts="true" to it but still doesn't work. Any
>> other possibility may cause this problem?
>> 
>> 
> 
> 

-- 
View this message in context: http://old.nabble.com/JQuery-UI-datepicker-doesn%27t-work-in-a-struts-2-ajax-page-tp26230811p26284590.html
Sent from the Struts - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org


Re: JQuery UI datepicker doesn't work in a struts 2 ajax page

Posted by Johannes Geppert <jo...@web.de>.
Long time ago I also have trouble to execute Scripts in AJAX Content.
http://old.nabble.com/-S2--No-JavaScript-in-TabbedPanel-to14772176.html#a14772176

So I switch to jQuery also for AJAX functions.

Why do you mix Dojo and jQuery?
You can use the build in Datepicker from dojo or switch 
to one of the two jQuery Plugins they exists for struts2.

http://code.google.com/p/struts2-jquery/

or

http://code.google.com/p/struts2-jquery-plugin/

Best Regards

Johannes Geppert



fireapple wrote:
> 
> Thanks Johannes, I'm using struts 2.0.11, this is my ajax submit tag:
> 
> <s:submit 	action="segment_udpateSegmentList" value="Update" theme="ajax"
> targets="%{'segment_edit_message'+#ind.index}" showLoadingText="false"
> indicator="%{'loadingImage'+#ind.index}" executeScripts="true" />
> 
> I just added executeScripts="true" to it but still doesn't work. Any other
> possibility may cause this problem?
> 
> 


-----
---
web: http://www.jgeppert.com
twitter: http://twitter.com/jogep

-- 
View this message in context: http://old.nabble.com/JQuery-UI-datepicker-doesn%27t-work-in-a-struts-2-ajax-page-tp26230811p26263094.html
Sent from the Struts - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org


Re: JQuery UI datepicker doesn't work in a struts 2 ajax page

Posted by fireapple <ta...@gmail.com>.
Thanks Johannes, I'm using struts 2.0.11, this is my ajax submit tag:

<s:submit 	action="segment_udpateSegmentList" value="Update" theme="ajax"
targets="%{'segment_edit_message'+#ind.index}" showLoadingText="false"
indicator="%{'loadingImage'+#ind.index}" executeScripts="true" />

I just added executeScripts="true" to it but still doesn't work. Any other
possibility may cause this problem?


do you use the struts2 dojo tags for your ajax pages?
When yes try the parameter executeScripts="true"

Best Regards

Johannes Geppert

-- 
View this message in context: http://old.nabble.com/JQuery-UI-datepicker-doesn%27t-work-in-a-struts-2-ajax-page-tp26230811p26230871.html
Sent from the Struts - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org


Re: JQuery UI datepicker doesn't work in a struts 2 ajax page

Posted by Johannes Geppert <jo...@web.de>.
do you use the struts2 dojo tags for your ajax pages?
When yes try the parameter executeScripts="true"

Best Regards

Johannes Geppert



fireapple wrote:
> 
> Dear all,
> 
>     I'm using JQuery UI datepicker in my jsp page, here's the way I'm
> using:
> [code]
> &lt;s:textfield 
> name="parentAndChildren[%{#ind.index}].segmentList[%{#stat.index}].departureDate"
> size="7" cssClass="datepicker"/&gt;
> 
> 	&lt;script type="text/javascript"&gt;
> 	$(function() {
> 		$(".datepicker").datepicker({
> 			changeMonth: true,
> 			changeYear: true,
> 			yearRange: '-5:+5',
> 			showOn: 'button', buttonImageOnly: true, buttonImage:
> 'images/calendar.gif'
> 		});
> 	});
> 	&lt;/script&gt;
>     [/code]
> It works fine if it's a new page. However, it doesn't work in an ajax
> page.
> Anyone can give me some hints? Thanks.
> 
> Here's the info(from the same page) I found from firebug, it seems jquery
> doesn't do its work in the ajax part of the page.
> 1. ajax part(doesn't work)
> [code]
> &lt;input
> id="segment_udpateSegmentList_parentAndChildren_0__segmentList_0__departureDate"
> class="datepicker" type="text" value="7/5/10" size="7"
> name="parentAndChildren[0].segmentList[0].departureDate"/&gt;
>     [/code]
> 
> 2. static part(works)
> [code]
> &lt;input
> id="segment_udpateSegmentList_parentAndChildren_1__segmentList_0__departureDate"
> class="datepicker hasDatepicker" type="text" value="12/10/09" size="7"
> name="parentAndChildren[1].segmentList[0].departureDate"/&gt;
>  
>     [/code]
> 


-----
---
web: http://www.jgeppert.com
twitter: http://twitter.com/jogep

-- 
View this message in context: http://old.nabble.com/JQuery-UI-datepicker-doesn%27t-work-in-a-struts-2-ajax-page-tp26230811p26230866.html
Sent from the Struts - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org


Re: JQuery UI datepicker doesn't work in a struts 2 ajax page

Posted by fireapple <ta...@gmail.com>.
Thanks, I tried your method and it didn't work out.

I also tried to put all JQuery library and Javascript block in my ajax
page(which is supposed to appear in the s:div). Still doesn't work. 

However, after adding executeScripts="true" in my <s:submit>, if I add
"alert('test');" into my ajax page, I can see it works, which means
Javascript works in my ajax page.

Is it possible this is a JQuery issue?


Sparecreative wrote:
> 
> When using jQuery via ajax you don¹t use jQuery¹s ready function, in you
> case the $(function(){.
> 
> You have two options. The simplest is to set a parameter (eg called
> ajaxRequest) in you action to true, when received via ajax and then change
> your javascript to have a s:if tag and if ajaxRequest is not true then
> include the $(function(){ line.
> 
> For example you javascript block would look like:
> 
>     <script type="text/javascript">
>> <s:if test=²%{!ajaxRequest}>
>>   $(function() {
>> </s:if>
>>         $(".datepicker").datepicker({
>>             changeMonth: true,
>>             changeYear: true,
>>             yearRange: '-5:+5',
>>             showOn: 'button', buttonImageOnly: true, buttonImage:
>> 'images/calendar.gif'
>>         });
>> <s:if test=²%{!ajaxRequest}>
>>     });
>> </s:if>
>>     </script>
> 
> 
> The option is to have either separate jsp pages or separate javascript
> blocks.
> 
> 

-- 
View this message in context: http://old.nabble.com/JQuery-UI-datepicker-doesn%27t-work-in-a-struts-2-ajax-page-tp26230811p26268920.html
Sent from the Struts - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org


Re: JQuery UI datepicker doesn't work in a struts 2 ajax page

Posted by Zoran Avtarovski <zo...@sparecreative.com>.
When using jQuery via ajax you don¹t use jQuery¹s ready function, in you
case the $(function(){.

You have two options. The simplest is to set a parameter (eg called
ajaxRequest) in you action to true, when received via ajax and then change
your javascript to have a s:if tag and if ajaxRequest is not true then
include the $(function(){ line.

For example you javascript block would look like:

    <script type="text/javascript">
> <s:if test=²%{!ajaxRequest}>
>   $(function() {
> </s:if>
>         $(".datepicker").datepicker({
>             changeMonth: true,
>             changeYear: true,
>             yearRange: '-5:+5',
>             showOn: 'button', buttonImageOnly: true, buttonImage:
> 'images/calendar.gif'
>         });
> <s:if test=²%{!ajaxRequest}>
>     });
> </s:if>
>     </script>


The option is to have either separate jsp pages or separate javascript
blocks.



> 
> 
> Dear all,
> 
>     I'm using JQuery UI datepicker in my jsp page, here's the way I'm using:
> [code]
> &lt;s:textfield 
> name="parentAndChildren[%{#ind.index}].segmentList[%{#stat.index}].departureDa
> te"
> size="7" cssClass="datepicker"/&gt;
> 
>  &lt;script type="text/javascript"&gt;
>  $(function() {
>   $(".datepicker").datepicker({
>    changeMonth: true,
>    changeYear: true,
>    yearRange: '-5:+5',
>    showOn: 'button', buttonImageOnly: true, buttonImage:
> 'images/calendar.gif'
>   });
>  });
>  &lt;/script&gt;
>     [/code]
> It works fine if it's a new page. However, it doesn't work in an ajax page.
> Anyone can give me some hints? Thanks.
> 
> Here's the info(from the same page) I found from firebug, it seems jquery
> doesn't do its work in the ajax part of the page.
> 1. ajax part(doesn't work)
> [code]
> &lt;input
> id="segment_udpateSegmentList_parentAndChildren_0__segmentList_0__departureDat
> e"
> class="datepicker" type="text" value="7/5/10" size="7"
> name="parentAndChildren[0].segmentList[0].departureDate"/&gt;
>     [/code]
> 
> 2. static part(works)
> [code]
> &lt;input
> id="segment_udpateSegmentList_parentAndChildren_1__segmentList_0__departureDat
> e"
> class="datepicker hasDatepicker" type="text" value="12/10/09" size="7"
> name="parentAndChildren[1].segmentList[0].departureDate"/&gt;
> 
>     [/code]