You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Oscar Besga Arcauz <ob...@isdefe.es> on 2012/09/26 13:40:56 UTC

Wicket rendering jquery late

 Hi wickers !

I've a problem with wicket and jquery resource rendering.

My webpage has many panels wich uses jquery, and they have javascript attached to it. 
This panel-dependant javascript uses jquery, so I render jquery with a resourcerefernce in the webpage. 
(The page doesn't use ajax because I want to mantain page stateless and bookmarkable.)

The problem is that the javascript attached to panel is rendered first into the page, and the jquery reference is the last. 
so, when the page fully renders, i've some 'ReferenceError: $ is not defined' errors in webrowser console.

¿ Has anyone experienced similar problems ?


Other little question: wicket6 uses jquery 1.7.2; has anyone tried with 1.8.x ?

Thanks in advance


    > > > Oscar Besga Arcauz  < < < 


PS. 

Example code (little long) --->

public class MyPage extends WebPage {


    public MyPage (PageParameters parameters) {
        super(parameters);
        add(new MyPageJsBehaviour());
        add(new MyPanel("mypanel"));
    }


    private class MyPageJsBehaviour extends Behavior {

            @Override
            public void renderHead(Component component, IHeaderResponse response) {                
                response.render(JavaScriptHeaderItem.forReference(JQueryResourceReference.get(),"jquery"));
                super.renderHead(component,response);
           }
    }

}


public class MyPanel extends Panel {


    public MyPanel(String id,String lang) {
        super(id);
        add(new MyPanelJsBehaviour());
    }

    private class MyPanelJsBehaviour extends Behavior {

            @Override
            public void renderHead(Component component, IHeaderResponse response) {
                super.renderHead(component,response);
                response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(MyPanel .class, "MyPanel.js"),"mypaneljs"));
                /**
                //MyPanel.js
                $(function () { // <-- here arises the error, as $ is not defined because MyPanel.js is loaded before jquery !!!
                   $('mypanel').dosomething();
                });
                **/
            }
    }

}


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: Wicket rendering jquery late

Posted by Pointbreak <po...@ml1.net>.
If your panel depends on jquery, you should render the reference to
jquery also in your panel.

On Wed, Sep 26, 2012, at 13:40, Oscar Besga Arcauz wrote:
>  Hi wickers !
> 
> I've a problem with wicket and jquery resource rendering.
> 
> My webpage has many panels wich uses jquery, and they have javascript
> attached to it. 
> This panel-dependant javascript uses jquery, so I render jquery with a
> resourcerefernce in the webpage. 
> (The page doesn't use ajax because I want to mantain page stateless and
> bookmarkable.)
> 
> The problem is that the javascript attached to panel is rendered first
> into the page, and the jquery reference is the last. 
> so, when the page fully renders, i've some 'ReferenceError: $ is not
> defined' errors in webrowser console.
> 
> ¿ Has anyone experienced similar problems ?
> 
> 
> Other little question: wicket6 uses jquery 1.7.2; has anyone tried with
> 1.8.x ?
> 
> Thanks in advance
> 
> 
>     > > > Oscar Besga Arcauz  < < < 
> 
> 
> PS. 
> 
> Example code (little long) --->
> 
> public class MyPage extends WebPage {
> 
> 
>     public MyPage (PageParameters parameters) {
>         super(parameters);
>         add(new MyPageJsBehaviour());
>         add(new MyPanel("mypanel"));
>     }
> 
> 
>     private class MyPageJsBehaviour extends Behavior {
> 
>             @Override
>             public void renderHead(Component component, IHeaderResponse
>             response) {                
>                 response.render(JavaScriptHeaderItem.forReference(JQueryResourceReference.get(),"jquery"));
>                 super.renderHead(component,response);
>            }
>     }
> 
> }
> 
> 
> public class MyPanel extends Panel {
> 
> 
>     public MyPanel(String id,String lang) {
>         super(id);
>         add(new MyPanelJsBehaviour());
>     }
> 
>     private class MyPanelJsBehaviour extends Behavior {
> 
>             @Override
>             public void renderHead(Component component, IHeaderResponse
>             response) {
>                 super.renderHead(component,response);
>                 response.render(JavaScriptHeaderItem.forReference(new
>                 JavaScriptResourceReference(MyPanel .class,
>                 "MyPanel.js"),"mypaneljs"));
>                 /**
>                 //MyPanel.js
>                 $(function () { // <-- here arises the error, as $ is not
>                 defined because MyPanel.js is loaded before jquery !!!
>                    $('mypanel').dosomething();
>                 });
>                 **/
>             }
>     }
> 
> }
> 
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@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: Wicket rendering jquery late

Posted by Martin Grigorov <mg...@apache.org>.
Just use org.apache.wicket.resource.JQueryPluginResourceReference as I
said earlier today ;-)

On Wed, Sep 26, 2012 at 4:55 PM, Oscar Besga Arcauz <ob...@isdefe.es> wrote:
> Ok, thanks
>
> I've done this. althougth the name is horrible
>
> public abstract class JavaScriptJQueryDependantResourceReference extends JavaScriptResourceReference {
>
>     public JavaScriptJQueryDependantResourceReference(Class<?> scope, String name, Locale locale, String style, String variation) {
>         super(scope, name, locale, style, variation);
>     }
>
>     public JavaScriptJQueryDependantResourceReference(Class<?> scope, String name) {
>         super(scope, name);
>     }
>
>     @Override
>     public Iterable<? extends HeaderItem> getDependencies() {
>
>         List<HeaderItem> dependencies = new ArrayList<HeaderItem>();
>         Iterable<? extends HeaderItem> iterable =  super.getDependencies();
>         if (iterable != null)
>             for(HeaderItem headerItem : iterable)
>                 dependencies.add(headerItem);
>         dependencies.add(JavaScriptReferenceHeaderItem.forReference(JQueryResourceReference.get()));
>         return dependencies;
>
>     }
> }
>
>     > > > Oscar Besga Arcauz  < < <
>
> -----Martin Grigorov <mg...@apache.org> escribió: -----
> Para: users@wicket.apache.org
> De: Martin Grigorov <mg...@apache.org>
> Fecha: 26/09/2012  13:49
> Asunto: Re: Wicket rendering jquery late
>
> Hi,
>
> Wicket 6 introduces dependencies between resources -
> http://wicketinaction.com/2012/07/wicket-6-resource-management/
> So you can modify your JavaScriptResourceReferences to be
> org.apache.wicket.resource.JQueryPluginResourceReference instead. This
> way Wicket will be able to calculate the graph.
>
> Wicket 6.0.0 comes with JQuery 1.7.2 but you can upgrade it to 1.8 if
> you wish with org.apache.wicket.settings.IJavaScriptLibrarySettings#setJQueryReference
> I've tried Wicket's JavaScript unit tests with 1.8.0 when it was
> released and all was OK.
>
> https://cwiki.apache.org/confluence/display/WICKET/Wicket+Ajax#WicketAjax-HowtocheckwhethermycustomversionofthebackingJavaScriptlibrary%28jQuery%29doesn%27tbreakWicketinternalssomehow%3F
>
> On Wed, Sep 26, 2012 at 2:40 PM, Oscar Besga Arcauz <ob...@isdefe.es> wrote:
>>  Hi wickers !
>>
>> I've a problem with wicket and jquery resource rendering.
>>
>> My webpage has many panels wich uses jquery, and they have javascript attached to it.
>> This panel-dependant javascript uses jquery, so I render jquery with a resourcerefernce in the webpage.
>> (The page doesn't use ajax because I want to mantain page stateless and bookmarkable.)
>>
>> The problem is that the javascript attached to panel is rendered first into the page, and the jquery reference is the last.
>> so, when the page fully renders, i've some 'ReferenceError: $ is not defined' errors in webrowser console.
>>
>> ¿ Has anyone experienced similar problems ?
>>
>>
>> Other little question: wicket6 uses jquery 1.7.2; has anyone tried with 1.8.x ?
>>
>> Thanks in advance
>>
>>
>>     > > > Oscar Besga Arcauz  < < <
>>
>>
>> PS.
>>
>> Example code (little long) --->
>>
>> public class MyPage extends WebPage {
>>
>>
>>     public MyPage (PageParameters parameters) {
>>         super(parameters);
>>         add(new MyPageJsBehaviour());
>>         add(new MyPanel("mypanel"));
>>     }
>>
>>
>>     private class MyPageJsBehaviour extends Behavior {
>>
>>             @Override
>>             public void renderHead(Component component, IHeaderResponse response) {
>>                 response.render(JavaScriptHeaderItem.forReference(JQueryResourceReference.get(),"jquery"));
>>                 super.renderHead(component,response);
>>            }
>>     }
>>
>> }
>>
>>
>> public class MyPanel extends Panel {
>>
>>
>>     public MyPanel(String id,String lang) {
>>         super(id);
>>         add(new MyPanelJsBehaviour());
>>     }
>>
>>     private class MyPanelJsBehaviour extends Behavior {
>>
>>             @Override
>>             public void renderHead(Component component, IHeaderResponse response) {
>>                 super.renderHead(component,response);
>>                 response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(MyPanel .class, "MyPanel.js"),"mypaneljs"));
>>                 /**
>>                 //MyPanel.js
>>                 $(function () { // <-- here arises the error, as $ is not defined because MyPanel.js is loaded before jquery !!!
>>                    $('mypanel').dosomething();
>>                 });
>>                 **/
>>             }
>>     }
>>
>> }
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>
>
>
> --
> Martin Grigorov
> jWeekend
> Training, Consulting, Development
> http://jWeekend.com
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@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
>



-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: Wicket rendering jquery late

Posted by Oscar Besga Arcauz <ob...@isdefe.es>.
Ok, thanks

I've done this. althougth the name is horrible

public abstract class JavaScriptJQueryDependantResourceReference extends JavaScriptResourceReference {

    public JavaScriptJQueryDependantResourceReference(Class<?> scope, String name, Locale locale, String style, String variation) {
        super(scope, name, locale, style, variation);
    }

    public JavaScriptJQueryDependantResourceReference(Class<?> scope, String name) {
        super(scope, name);
    }

    @Override
    public Iterable<? extends HeaderItem> getDependencies() {
        
        List<HeaderItem> dependencies = new ArrayList<HeaderItem>();
        Iterable<? extends HeaderItem> iterable =  super.getDependencies();
        if (iterable != null)
            for(HeaderItem headerItem : iterable)
                dependencies.add(headerItem);        
        dependencies.add(JavaScriptReferenceHeaderItem.forReference(JQueryResourceReference.get()));
        return dependencies;

    }
}

    > > > Oscar Besga Arcauz  < < < 

-----Martin Grigorov <mg...@apache.org> escribió: -----
Para: users@wicket.apache.org
De: Martin Grigorov <mg...@apache.org>
Fecha: 26/09/2012  13:49
Asunto: Re: Wicket rendering jquery late

Hi,

Wicket 6 introduces dependencies between resources -
http://wicketinaction.com/2012/07/wicket-6-resource-management/
So you can modify your JavaScriptResourceReferences to be
org.apache.wicket.resource.JQueryPluginResourceReference instead. This
way Wicket will be able to calculate the graph.

Wicket 6.0.0 comes with JQuery 1.7.2 but you can upgrade it to 1.8 if
you wish with org.apache.wicket.settings.IJavaScriptLibrarySettings#setJQueryReference
I've tried Wicket's JavaScript unit tests with 1.8.0 when it was
released and all was OK.

https://cwiki.apache.org/confluence/display/WICKET/Wicket+Ajax#WicketAjax-HowtocheckwhethermycustomversionofthebackingJavaScriptlibrary%28jQuery%29doesn%27tbreakWicketinternalssomehow%3F

On Wed, Sep 26, 2012 at 2:40 PM, Oscar Besga Arcauz <ob...@isdefe.es> wrote:
>  Hi wickers !
>
> I've a problem with wicket and jquery resource rendering.
>
> My webpage has many panels wich uses jquery, and they have javascript attached to it.
> This panel-dependant javascript uses jquery, so I render jquery with a resourcerefernce in the webpage.
> (The page doesn't use ajax because I want to mantain page stateless and bookmarkable.)
>
> The problem is that the javascript attached to panel is rendered first into the page, and the jquery reference is the last.
> so, when the page fully renders, i've some 'ReferenceError: $ is not defined' errors in webrowser console.
>
> ¿ Has anyone experienced similar problems ?
>
>
> Other little question: wicket6 uses jquery 1.7.2; has anyone tried with 1.8.x ?
>
> Thanks in advance
>
>
>     > > > Oscar Besga Arcauz  < < <
>
>
> PS.
>
> Example code (little long) --->
>
> public class MyPage extends WebPage {
>
>
>     public MyPage (PageParameters parameters) {
>         super(parameters);
>         add(new MyPageJsBehaviour());
>         add(new MyPanel("mypanel"));
>     }
>
>
>     private class MyPageJsBehaviour extends Behavior {
>
>             @Override
>             public void renderHead(Component component, IHeaderResponse response) {
>                 response.render(JavaScriptHeaderItem.forReference(JQueryResourceReference.get(),"jquery"));
>                 super.renderHead(component,response);
>            }
>     }
>
> }
>
>
> public class MyPanel extends Panel {
>
>
>     public MyPanel(String id,String lang) {
>         super(id);
>         add(new MyPanelJsBehaviour());
>     }
>
>     private class MyPanelJsBehaviour extends Behavior {
>
>             @Override
>             public void renderHead(Component component, IHeaderResponse response) {
>                 super.renderHead(component,response);
>                 response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(MyPanel .class, "MyPanel.js"),"mypaneljs"));
>                 /**
>                 //MyPanel.js
>                 $(function () { // <-- here arises the error, as $ is not defined because MyPanel.js is loaded before jquery !!!
>                    $('mypanel').dosomething();
>                 });
>                 **/
>             }
>     }
>
> }
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>



-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@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: Wicket rendering jquery late

Posted by Martin Grigorov <mg...@apache.org>.
Hi,

Wicket 6 introduces dependencies between resources -
http://wicketinaction.com/2012/07/wicket-6-resource-management/
So you can modify your JavaScriptResourceReferences to be
org.apache.wicket.resource.JQueryPluginResourceReference instead. This
way Wicket will be able to calculate the graph.

Wicket 6.0.0 comes with JQuery 1.7.2 but you can upgrade it to 1.8 if
you wish with org.apache.wicket.settings.IJavaScriptLibrarySettings#setJQueryReference
I've tried Wicket's JavaScript unit tests with 1.8.0 when it was
released and all was OK.

https://cwiki.apache.org/confluence/display/WICKET/Wicket+Ajax#WicketAjax-HowtocheckwhethermycustomversionofthebackingJavaScriptlibrary%28jQuery%29doesn%27tbreakWicketinternalssomehow%3F

On Wed, Sep 26, 2012 at 2:40 PM, Oscar Besga Arcauz <ob...@isdefe.es> wrote:
>  Hi wickers !
>
> I've a problem with wicket and jquery resource rendering.
>
> My webpage has many panels wich uses jquery, and they have javascript attached to it.
> This panel-dependant javascript uses jquery, so I render jquery with a resourcerefernce in the webpage.
> (The page doesn't use ajax because I want to mantain page stateless and bookmarkable.)
>
> The problem is that the javascript attached to panel is rendered first into the page, and the jquery reference is the last.
> so, when the page fully renders, i've some 'ReferenceError: $ is not defined' errors in webrowser console.
>
> ¿ Has anyone experienced similar problems ?
>
>
> Other little question: wicket6 uses jquery 1.7.2; has anyone tried with 1.8.x ?
>
> Thanks in advance
>
>
>     > > > Oscar Besga Arcauz  < < <
>
>
> PS.
>
> Example code (little long) --->
>
> public class MyPage extends WebPage {
>
>
>     public MyPage (PageParameters parameters) {
>         super(parameters);
>         add(new MyPageJsBehaviour());
>         add(new MyPanel("mypanel"));
>     }
>
>
>     private class MyPageJsBehaviour extends Behavior {
>
>             @Override
>             public void renderHead(Component component, IHeaderResponse response) {
>                 response.render(JavaScriptHeaderItem.forReference(JQueryResourceReference.get(),"jquery"));
>                 super.renderHead(component,response);
>            }
>     }
>
> }
>
>
> public class MyPanel extends Panel {
>
>
>     public MyPanel(String id,String lang) {
>         super(id);
>         add(new MyPanelJsBehaviour());
>     }
>
>     private class MyPanelJsBehaviour extends Behavior {
>
>             @Override
>             public void renderHead(Component component, IHeaderResponse response) {
>                 super.renderHead(component,response);
>                 response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(MyPanel .class, "MyPanel.js"),"mypaneljs"));
>                 /**
>                 //MyPanel.js
>                 $(function () { // <-- here arises the error, as $ is not defined because MyPanel.js is loaded before jquery !!!
>                    $('mypanel').dosomething();
>                 });
>                 **/
>             }
>     }
>
> }
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>



-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org