Re: JavaScript execution on Ajax response in Wicket
Thanks Sebastian,
I was able to resolve it based on your examples!
Sebastian
2012/9/16 Sebastien :
> Hi Sebastian
>
>>The issue is that "$(document).ready( function()" is not called (or only
> the first time) a Panel is loaded via Ajax.
> IMHO, the main thing to understand while working with jQuery is that, when
> you re-attach your component, you need to re-execute the jQuery statement.
>
> A generic way to achieve this is to add (jQuery)behavior added to your
> component.
> In behavior#renderHead()):
>
> AjaxRequestTarget target =
> component.getRequestCycle().find(AjaxRequestTarget.class);
>
> if (target != null)
> {
> target.appendJavaScript(this.$());
> }
> else
> {
>
> response.render(JavaScriptHeaderItem.forScript(this.$(), this.getToken()));
> }
>
> where #$() gets the jQuery statement.
>
>> Additionally to the load of the Ajax Panel, we need to trigger an
> JavaScript event every time the table dynamically loads new records to the
> grid/table.
> You can achieve this in the same way as describe above, by attaching the
> statement you want to be executed.
>
> Feel free to have a look to the code severals jQuery / Wicket integrations
> did. For instance, the base JQueryAbstractBehavior of wicket-jquery-ui
> could be found here:
> https://github.com/sebfz1/wicket-jquery-ui/blob/wicket6/wicket-jquery-ui-core/src/main/java/com/googlecode/wicket/jquery/ui/JQueryAbstractBehavior.java
>
> Also, these integrations are designed to be extended and already solve
> these kind of issues...
>
> Best regards,
> Sebastien.
>
> On Sun, Sep 16, 2012 at 10:25 AM, seba.wag...@gmail.com <
> seba.wag...@gmail.com> wrote:
>
>> Hi,
>>
>> we build a single page application and want to extend that with some
>> jQuery plugins.
>>
>> The issue is that "$(document).ready( function()" is not called (or
>> only the first time) a Panel is loaded via Ajax.
>>
>> Example1 "JavaScript in HTML wicket:head":
>>
>> https://svn.apache.org/viewvc/incubator/openmeetings/trunk/singlewebapp/src/org/apache/openmeetings/web/components/admin/configurations/ConfigsPanel.html?view=markup
>> Line 27ff
>> => Works, but only one time: The first time you initialize the Panel,
>> $(document).ready is executed, the second time you click on the menu
>> item / load the Panel via Ajax,the JavaScript is not executed
>>
>> Example2 "JavaScript pragmatically injected by overwriting
>> renderHead(HtmlHeaderContainer container)":
>>
>> https://svn.apache.org/viewvc/incubator/openmeetings/trunk/singlewebapp/src/org/apache/openmeetings/web/components/admin/configurations/ConfigsPanel.java?view=markup
>> Line 45ff
>> => Works but $(document).ready is executed before the table with the
>> id "example" is rendered in the UI, so you can't see any effect
>>
>> Additionally to the load of the Ajax Panel, we need to trigger an
>> JavaScript event every time the table dynamically loads new records to
>> the grid/table.
>>
>> From examples in the Net I can ready that AjaxRequestTarget is used
>> for that. However the Panel itself does not provide a method to
>> overwrite or similar to catch such events globally for a the
>> component.
>>
>> I guess this is a common issue in Wicket, how do folks solve it?
>>
>> Thanks!
>> Sebastian
>>
>> --
>> Sebastian Wagner
>> https://twitter.com/#!/dead_lock
>> http://www.webbase-design.de
>> http://www.wagner-sebastian.com
>> seba.wag...@gmail.com
>>
>> -
>> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
>> For additional commands, e-mail: users-h...@wicket.apache.org
>>
>>
--
Sebastian Wagner
https://twitter.com/#!/dead_lock
http://www.webbase-design.de
http://www.wagner-sebastian.com
seba.wag...@gmail.com
-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org
Re: JavaScript execution on Ajax response in Wicket
Hi Sebastian
>The issue is that "$(document).ready( function()" is not called (or only
the first time) a Panel is loaded via Ajax.
IMHO, the main thing to understand while working with jQuery is that, when
you re-attach your component, you need to re-execute the jQuery statement.
A generic way to achieve this is to add (jQuery)behavior added to your
component.
In behavior#renderHead()):
AjaxRequestTarget target =
component.getRequestCycle().find(AjaxRequestTarget.class);
if (target != null)
{
target.appendJavaScript(this.$());
}
else
{
response.render(JavaScriptHeaderItem.forScript(this.$(), this.getToken()));
}
where #$() gets the jQuery statement.
> Additionally to the load of the Ajax Panel, we need to trigger an
JavaScript event every time the table dynamically loads new records to the
grid/table.
You can achieve this in the same way as describe above, by attaching the
statement you want to be executed.
Feel free to have a look to the code severals jQuery / Wicket integrations
did. For instance, the base JQueryAbstractBehavior of wicket-jquery-ui
could be found here:
https://github.com/sebfz1/wicket-jquery-ui/blob/wicket6/wicket-jquery-ui-core/src/main/java/com/googlecode/wicket/jquery/ui/JQueryAbstractBehavior.java
Also, these integrations are designed to be extended and already solve
these kind of issues...
Best regards,
Sebastien.
On Sun, Sep 16, 2012 at 10:25 AM, seba.wag...@gmail.com <
seba.wag...@gmail.com> wrote:
> Hi,
>
> we build a single page application and want to extend that with some
> jQuery plugins.
>
> The issue is that "$(document).ready( function()" is not called (or
> only the first time) a Panel is loaded via Ajax.
>
> Example1 "JavaScript in HTML wicket:head":
>
> https://svn.apache.org/viewvc/incubator/openmeetings/trunk/singlewebapp/src/org/apache/openmeetings/web/components/admin/configurations/ConfigsPanel.html?view=markup
> Line 27ff
> => Works, but only one time: The first time you initialize the Panel,
> $(document).ready is executed, the second time you click on the menu
> item / load the Panel via Ajax,the JavaScript is not executed
>
> Example2 "JavaScript pragmatically injected by overwriting
> renderHead(HtmlHeaderContainer container)":
>
> https://svn.apache.org/viewvc/incubator/openmeetings/trunk/singlewebapp/src/org/apache/openmeetings/web/components/admin/configurations/ConfigsPanel.java?view=markup
> Line 45ff
> => Works but $(document).ready is executed before the table with the
> id "example" is rendered in the UI, so you can't see any effect
>
> Additionally to the load of the Ajax Panel, we need to trigger an
> JavaScript event every time the table dynamically loads new records to
> the grid/table.
>
> From examples in the Net I can ready that AjaxRequestTarget is used
> for that. However the Panel itself does not provide a method to
> overwrite or similar to catch such events globally for a the
> component.
>
> I guess this is a common issue in Wicket, how do folks solve it?
>
> Thanks!
> Sebastian
>
> --
> Sebastian Wagner
> https://twitter.com/#!/dead_lock
> http://www.webbase-design.de
> http://www.wagner-sebastian.com
> seba.wag...@gmail.com
>
> -
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>
JavaScript execution on Ajax response in Wicket
Hi, we build a single page application and want to extend that with some jQuery plugins. The issue is that "$(document).ready( function()" is not called (or only the first time) a Panel is loaded via Ajax. Example1 "JavaScript in HTML wicket:head": https://svn.apache.org/viewvc/incubator/openmeetings/trunk/singlewebapp/src/org/apache/openmeetings/web/components/admin/configurations/ConfigsPanel.html?view=markup Line 27ff => Works, but only one time: The first time you initialize the Panel, $(document).ready is executed, the second time you click on the menu item / load the Panel via Ajax,the JavaScript is not executed Example2 "JavaScript pragmatically injected by overwriting renderHead(HtmlHeaderContainer container)": https://svn.apache.org/viewvc/incubator/openmeetings/trunk/singlewebapp/src/org/apache/openmeetings/web/components/admin/configurations/ConfigsPanel.java?view=markup Line 45ff => Works but $(document).ready is executed before the table with the id "example" is rendered in the UI, so you can't see any effect Additionally to the load of the Ajax Panel, we need to trigger an JavaScript event every time the table dynamically loads new records to the grid/table. >From examples in the Net I can ready that AjaxRequestTarget is used for that. However the Panel itself does not provide a method to overwrite or similar to catch such events globally for a the component. I guess this is a common issue in Wicket, how do folks solve it? Thanks! Sebastian -- Sebastian Wagner https://twitter.com/#!/dead_lock http://www.webbase-design.de http://www.wagner-sebastian.com seba.wag...@gmail.com - To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org For additional commands, e-mail: users-h...@wicket.apache.org
