You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Ashley Reed <aj...@gmail.com> on 2013/03/15 22:14:02 UTC
Best way to call Javascript
I'm upgrading to Wicket 6.6 from 1.5, and I'm having trouble deciding
how to fix all of our Javascript that was executed both when the page
loaded and when a piece of the page is redraw with Wicket's AJAX. In
1.5, we were doing the following:
<div wicket:id="redrawcontainer">
<script>
jQuery(document).ready(function() {
// this javascript gets executed each time the
// page loads and every time redrawcontainer
// gets redrawn via AJAX, after the DOM is updated
});
</script>
</div>
In 6.6, the Javascript above appears to get executed before the DOM is
completely ready. It seems as though the new HTML is added to the DOM,
but the old HTML is still there when the Javascript is executed.
So, I'm looking for options on how to make this work properly. I've
found the following:
1. In Java, override redrawcontainer's renderHead and add a call to the
an initialization function. This means more tight integration between
Java and the HTML. Makes it more difficult for my HTML guy to update things.
2. Use Wicket.Event.subscribe('/dom/node/added', function(jqEvent, el)
{});. Seems like I could end calling subscribe multiple times for the
same component. Does it know how to unsubscribe automatically when a
component is removed from the page?
3. Use setTimeout(func, 1) in the existing javascript above to
(hopefully) wait until Wicket has finished updating the DOM. Haven't
tried this. Not a big fan of using timeouts for things like this.
Does anyone have any suggestions?
Thanks!
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Best way to call Javascript
Posted by Ashley Reed <aj...@gmail.com>.
Thanks for the info Martin. I decided to go ahead and implement
renderHead methods in Java since it will improve performance.
On 03/18/2013 09:33 AM, Martin Grigorov wrote:
> Hi,
>
>
> On Mon, Mar 18, 2013 at 3:23 PM, Ashley Reed <aj...@gmail.com> wrote:
>
>> Hi Martin,
>>
>> In 1.5, I wasn't using any Java code. I was just adding JS inside the
>> pieces of the page that get redrawn, like this:
>>
>>
>> <div wicket:id="redrawcontainer">
>> <script>
>> jQuery(document).ready(**function() {
>> // this javascript gets executed each time the
>> // page loads and every time redrawcontainer
>> // gets redrawn via AJAX, after the DOM is updated
>> });
>> </script>
>> <!-- more HTML here for the script to work on -->
>> </div>
>>
>> I like doing it that way b/c it lets my HTML guy take care of all the JS.
>> Is there any way to do it in HTML/JS in Wicket 6?
>>
> I think I see why this happens.
> In Wicket 6 we use the following jQuery code to replace the HTML elements:
> jQuery(oldElement).append(newHtmlAsText).remove().
> I.e. there is a small period in which both the old and the new elements are
> in the DOM. I borrowed this code from a presentation about performance in
> jQuery by Addi Osmani.
> When I tested it in jsperf.com last year it was 15-20% faster than
> jQuery(oldElement).replaceWith(newHtmlAsText).
>
>
>> And if there's no way to do that in Wicket 6, it appears the best way is
>> to #renderHead(){response.render(**OnDomReadyHeaderItem.**forScript())}
>
> The only way I see to keep your way is to override Wicket.DOM.replace()
> impl with another that first removes and then adds the elements. See
> "monkey patching Javascript" in Google.
>
>
>>
>>
>> On 03/18/2013 04:23 AM, Martin Grigorov wrote:
>>
>> Hi,
>>> What code do you use to contribute the JS code in .java ?
>>>
>>> In Ajax response the sequence is:
>>> - execute all prependJavaScripts
>>> - replace all components
>>> - execute all OnDomReady scripts
>>> - execute all appendJavaScripts
>>>
>>> I.e. if you use #renderHead()
>>> {response.render(**OnDomReadyHeaderItem.**forScript())} or
>>> target.appendJavaScript() then the old HTML elements should be already
>>> removed and the new elements should be available.
>>>
>>>
>>> On Fri, Mar 15, 2013 at 10:14 PM, Ashley Reed <aj...@gmail.com> wrote:
>>>
>>> I'm upgrading to Wicket 6.6 from 1.5, and I'm having trouble deciding how
>>>> to fix all of our Javascript that was executed both when the page loaded
>>>> and when a piece of the page is redraw with Wicket's AJAX. In 1.5, we
>>>> were
>>>> doing the following:
>>>>
>>>> <div wicket:id="redrawcontainer">
>>>> <script>
>>>> jQuery(document).ready(****function() {
>>>>
>>>> // this javascript gets executed each time the
>>>> // page loads and every time redrawcontainer
>>>> // gets redrawn via AJAX, after the DOM is updated
>>>> });
>>>> </script>
>>>> </div>
>>>>
>>>> In 6.6, the Javascript above appears to get executed before the DOM is
>>>> completely ready. It seems as though the new HTML is added to the DOM,
>>>> but
>>>> the old HTML is still there when the Javascript is executed.
>>>>
>>>> So, I'm looking for options on how to make this work properly. I've found
>>>> the following:
>>>>
>>>> 1. In Java, override redrawcontainer's renderHead and add a call to the
>>>> an
>>>> initialization function. This means more tight integration between Java
>>>> and
>>>> the HTML. Makes it more difficult for my HTML guy to update things.
>>>>
>>>> 2. Use Wicket.Event.subscribe('/dom/****node/added', function(jqEvent,
>>>> el)
>>>>
>>>> {});. Seems like I could end calling subscribe multiple times for the
>>>> same
>>>> component. Does it know how to unsubscribe automatically when a component
>>>> is removed from the page?
>>>>
>>>> 3. Use setTimeout(func, 1) in the existing javascript above to
>>>> (hopefully)
>>>> wait until Wicket has finished updating the DOM. Haven't tried this. Not
>>>> a
>>>> big fan of using timeouts for things like this.
>>>>
>>>> Does anyone have any suggestions?
>>>>
>>>> Thanks!
>>>>
>>>> ------------------------------****----------------------------**
>>>> --**---------
>>>> To unsubscribe, e-mail: users-unsubscribe@wicket.**apa**che.org<http://apache.org>
>>>> <us...@wicket.apache.org>
>>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>>
>>>>
>>>>
>>>
>> ------------------------------**------------------------------**---------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.**apache.org<us...@wicket.apache.org>
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Best way to call Javascript
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
On Mon, Mar 18, 2013 at 3:23 PM, Ashley Reed <aj...@gmail.com> wrote:
> Hi Martin,
>
> In 1.5, I wasn't using any Java code. I was just adding JS inside the
> pieces of the page that get redrawn, like this:
>
>
> <div wicket:id="redrawcontainer">
> <script>
> jQuery(document).ready(**function() {
> // this javascript gets executed each time the
> // page loads and every time redrawcontainer
> // gets redrawn via AJAX, after the DOM is updated
> });
> </script>
> <!-- more HTML here for the script to work on -->
> </div>
>
> I like doing it that way b/c it lets my HTML guy take care of all the JS.
> Is there any way to do it in HTML/JS in Wicket 6?
>
I think I see why this happens.
In Wicket 6 we use the following jQuery code to replace the HTML elements:
jQuery(oldElement).append(newHtmlAsText).remove().
I.e. there is a small period in which both the old and the new elements are
in the DOM. I borrowed this code from a presentation about performance in
jQuery by Addi Osmani.
When I tested it in jsperf.com last year it was 15-20% faster than
jQuery(oldElement).replaceWith(newHtmlAsText).
> And if there's no way to do that in Wicket 6, it appears the best way is
> to #renderHead(){response.render(**OnDomReadyHeaderItem.**forScript())}
The only way I see to keep your way is to override Wicket.DOM.replace()
impl with another that first removes and then adds the elements. See
"monkey patching Javascript" in Google.
>
>
>
> On 03/18/2013 04:23 AM, Martin Grigorov wrote:
>
> Hi,
>>
>> What code do you use to contribute the JS code in .java ?
>>
>> In Ajax response the sequence is:
>> - execute all prependJavaScripts
>> - replace all components
>> - execute all OnDomReady scripts
>> - execute all appendJavaScripts
>>
>> I.e. if you use #renderHead()
>> {response.render(**OnDomReadyHeaderItem.**forScript())} or
>> target.appendJavaScript() then the old HTML elements should be already
>> removed and the new elements should be available.
>>
>>
>> On Fri, Mar 15, 2013 at 10:14 PM, Ashley Reed <aj...@gmail.com> wrote:
>>
>> I'm upgrading to Wicket 6.6 from 1.5, and I'm having trouble deciding how
>>> to fix all of our Javascript that was executed both when the page loaded
>>> and when a piece of the page is redraw with Wicket's AJAX. In 1.5, we
>>> were
>>> doing the following:
>>>
>>> <div wicket:id="redrawcontainer">
>>> <script>
>>> jQuery(document).ready(****function() {
>>>
>>> // this javascript gets executed each time the
>>> // page loads and every time redrawcontainer
>>> // gets redrawn via AJAX, after the DOM is updated
>>> });
>>> </script>
>>> </div>
>>>
>>> In 6.6, the Javascript above appears to get executed before the DOM is
>>> completely ready. It seems as though the new HTML is added to the DOM,
>>> but
>>> the old HTML is still there when the Javascript is executed.
>>>
>>> So, I'm looking for options on how to make this work properly. I've found
>>> the following:
>>>
>>> 1. In Java, override redrawcontainer's renderHead and add a call to the
>>> an
>>> initialization function. This means more tight integration between Java
>>> and
>>> the HTML. Makes it more difficult for my HTML guy to update things.
>>>
>>> 2. Use Wicket.Event.subscribe('/dom/****node/added', function(jqEvent,
>>> el)
>>>
>>> {});. Seems like I could end calling subscribe multiple times for the
>>> same
>>> component. Does it know how to unsubscribe automatically when a component
>>> is removed from the page?
>>>
>>> 3. Use setTimeout(func, 1) in the existing javascript above to
>>> (hopefully)
>>> wait until Wicket has finished updating the DOM. Haven't tried this. Not
>>> a
>>> big fan of using timeouts for things like this.
>>>
>>> Does anyone have any suggestions?
>>>
>>> Thanks!
>>>
>>> ------------------------------****----------------------------**
>>> --**---------
>>> To unsubscribe, e-mail: users-unsubscribe@wicket.**apa**che.org<http://apache.org>
>>> <us...@wicket.apache.org>
>>> >
>>>
>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>
>>>
>>>
>>
>>
> ------------------------------**------------------------------**---------
> To unsubscribe, e-mail: users-unsubscribe@wicket.**apache.org<us...@wicket.apache.org>
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com <http://jweekend.com/>
Re: Best way to call Javascript
Posted by Ashley Reed <aj...@gmail.com>.
Hi Martin,
In 1.5, I wasn't using any Java code. I was just adding JS inside the pieces of the page that get redrawn, like this:
<div wicket:id="redrawcontainer">
<script>
jQuery(document).ready(function() {
// this javascript gets executed each time the
// page loads and every time redrawcontainer
// gets redrawn via AJAX, after the DOM is updated
});
</script>
<!-- more HTML here for the script to work on -->
</div>
I like doing it that way b/c it lets my HTML guy take care of all the JS. Is there any way to do it in HTML/JS in Wicket 6?
And if there's no way to do that in Wicket 6, it appears the best way is to #renderHead(){response.render(OnDomReadyHeaderItem.forScript())}
On 03/18/2013 04:23 AM, Martin Grigorov wrote:
> Hi,
>
> What code do you use to contribute the JS code in .java ?
>
> In Ajax response the sequence is:
> - execute all prependJavaScripts
> - replace all components
> - execute all OnDomReady scripts
> - execute all appendJavaScripts
>
> I.e. if you use #renderHead()
> {response.render(OnDomReadyHeaderItem.forScript())} or
> target.appendJavaScript() then the old HTML elements should be already
> removed and the new elements should be available.
>
>
> On Fri, Mar 15, 2013 at 10:14 PM, Ashley Reed <aj...@gmail.com> wrote:
>
>> I'm upgrading to Wicket 6.6 from 1.5, and I'm having trouble deciding how
>> to fix all of our Javascript that was executed both when the page loaded
>> and when a piece of the page is redraw with Wicket's AJAX. In 1.5, we were
>> doing the following:
>>
>> <div wicket:id="redrawcontainer">
>> <script>
>> jQuery(document).ready(**function() {
>> // this javascript gets executed each time the
>> // page loads and every time redrawcontainer
>> // gets redrawn via AJAX, after the DOM is updated
>> });
>> </script>
>> </div>
>>
>> In 6.6, the Javascript above appears to get executed before the DOM is
>> completely ready. It seems as though the new HTML is added to the DOM, but
>> the old HTML is still there when the Javascript is executed.
>>
>> So, I'm looking for options on how to make this work properly. I've found
>> the following:
>>
>> 1. In Java, override redrawcontainer's renderHead and add a call to the an
>> initialization function. This means more tight integration between Java and
>> the HTML. Makes it more difficult for my HTML guy to update things.
>>
>> 2. Use Wicket.Event.subscribe('/dom/**node/added', function(jqEvent, el)
>> {});. Seems like I could end calling subscribe multiple times for the same
>> component. Does it know how to unsubscribe automatically when a component
>> is removed from the page?
>>
>> 3. Use setTimeout(func, 1) in the existing javascript above to (hopefully)
>> wait until Wicket has finished updating the DOM. Haven't tried this. Not a
>> big fan of using timeouts for things like this.
>>
>> Does anyone have any suggestions?
>>
>> Thanks!
>>
>> ------------------------------**------------------------------**---------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.**apache.org<us...@wicket.apache.org>
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Best way to call Javascript
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
What code do you use to contribute the JS code in .java ?
In Ajax response the sequence is:
- execute all prependJavaScripts
- replace all components
- execute all OnDomReady scripts
- execute all appendJavaScripts
I.e. if you use #renderHead()
{response.render(OnDomReadyHeaderItem.forScript())} or
target.appendJavaScript() then the old HTML elements should be already
removed and the new elements should be available.
On Fri, Mar 15, 2013 at 10:14 PM, Ashley Reed <aj...@gmail.com> wrote:
> I'm upgrading to Wicket 6.6 from 1.5, and I'm having trouble deciding how
> to fix all of our Javascript that was executed both when the page loaded
> and when a piece of the page is redraw with Wicket's AJAX. In 1.5, we were
> doing the following:
>
> <div wicket:id="redrawcontainer">
> <script>
> jQuery(document).ready(**function() {
> // this javascript gets executed each time the
> // page loads and every time redrawcontainer
> // gets redrawn via AJAX, after the DOM is updated
> });
> </script>
> </div>
>
> In 6.6, the Javascript above appears to get executed before the DOM is
> completely ready. It seems as though the new HTML is added to the DOM, but
> the old HTML is still there when the Javascript is executed.
>
> So, I'm looking for options on how to make this work properly. I've found
> the following:
>
> 1. In Java, override redrawcontainer's renderHead and add a call to the an
> initialization function. This means more tight integration between Java and
> the HTML. Makes it more difficult for my HTML guy to update things.
>
> 2. Use Wicket.Event.subscribe('/dom/**node/added', function(jqEvent, el)
> {});. Seems like I could end calling subscribe multiple times for the same
> component. Does it know how to unsubscribe automatically when a component
> is removed from the page?
>
> 3. Use setTimeout(func, 1) in the existing javascript above to (hopefully)
> wait until Wicket has finished updating the DOM. Haven't tried this. Not a
> big fan of using timeouts for things like this.
>
> Does anyone have any suggestions?
>
> Thanks!
>
> ------------------------------**------------------------------**---------
> To unsubscribe, e-mail: users-unsubscribe@wicket.**apache.org<us...@wicket.apache.org>
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
--
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com <http://jweekend.com/>
Re: Best way to call Javascript
Posted by armandoxxx <ar...@dropchop.com>.
Hey
This is the way I'm doing it :
when page is loaded :
when redrawing on ajax requests:
hope this helps.
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Best-way-to-call-Javascript-tp4657288p4657295.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org