Wicket JavaScript is not getting reflected

[ragul rangarajan]

Hi all,

I am facing a weird behavior in the wicket pages of the below hierarchy.

RootPage with few Abstract tabs added and In few Abstract tabs, based on the use case we have TabbedPanel of wicket UI Jquery. like this http://www.7thweb.net/wicket-jquery-ui/tabs/TabbedPanelPage?2. To navigate between tabs, I use AjaxTabbedPanel.

Issue1: Even the Default Jquery file is getting added to the page. But the UI components are not rendered with respect to Jquery

<script type="text/javascript" src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-2.2.4-ver-F9EE266EF993962AD59E804AD9DEBE66.js"></script>
<script type="text/javascript" src="./wicket/resource/com.googlecode.wicket.jquery.ui.resource.JQueryUIResourceReference/jquery-ui-ver-0A819924D70A18322660DEE759225D2B.js"></script>

To overcome the above issue I have added the Jquery file by overriding renderHead method in RootPage. which only works on manual page refresh.

RootPage.renderHead:

@Override
public void renderHead(IHeaderResponse response){
 super.render(response);
 response.render(JavaScriptHeaderItem.forReference(new PackageResourceReference(RootPage.class, "jquery.min.js")));
 response.render(JavaScriptHeaderItem.forReference(new PackageResourceReference(RootPage.class, "jquery-ui.min.js")));
}

Issue2: But since I made Ajax to navigate between tabs, refreshing page usingsetResponsePage() seems to be an unexpected way.

To solve the Issue1, I explicitly added jquery which lead to another problem of an explicit refresh.

Am I missing anything in the Issue1 which can solve the issue? 

or Is there any way to refresh only my panels? to fix Issue2

Thanks and Regrads,

Ragul

[Martin Grigorov]

The question has been asked at https://stackoverflow.com/q/62920360/497381

I think the problem is in the double contribution of jQuery but the reporter didn't tell me why it is imported manually the second time.

[Sebastien]

Hi,

For issue 1, I can see the resources are added.

You can change the reference [1], but  you should not have to add another resource.

So the question why the widget does not render properly is probably different.   

Does the dev-tool console says something? 

Can you reproduce this behavior in a quickstart?

For issue 2, you better need to refresh the component in ajax (and so the model) instead of #setResponsePage. See :

tabPanel.reload(target); // will force reload model

[1] https://github.com/sebfz1/wicket-jquery-ui/wiki/%5Bhowto%5D-change-resource-references#customize-jquery-ui-resources

Thanks and best regards

Sebastien

[ragul rangarajan]

Thanks, Martin

I am the reporter of that question. Sry to raise the same at multiple places.

I made a Double contribution due to Issue1 where the actual Jquery & Jquery UI which added by a wicket in the RootPage was not getting set.

<script type="text/javascript" src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-2.2.4-ver-F9EE266EF993962AD59E804AD9DEBE66.js"></script>
<script type="text/javascript" src="./wicket/resource/com.googlecode.wicket.jquery.ui.resource.JQueryUIResourceReference/jquery-ui-ver-0A819924D70A18322660DEE759225D2B.js"></script>

with the Issue1, I am getting the below Jquery Error in Devconsole

Wicket.Ajax:  Wicket.Ajax.Call.processEvaluation: Exception evaluating javascript: TypeError: jQuery(...).buttonset is not a function, text

--
You received this message because you are subscribed to the Google Groups "wicket-jquery-ui" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wicket-jquery-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/wicket-jquery-ui/db953f48-951e-4730-adad-b6a6f5d05892o%40googlegroups.com.

[Sebastien]

So for the issue 1, that's probably because of this failure that the widget does not render properly. 

1/ Are you invoking buttonset by yourself? or
2/ Are you using RadioChoice/CheckChoice component?

In case of 1, that might be a priority order issue because you have your custom call, but no widget from wicket-jquery-ui has been invoked hence no jquery-ui.js

In that case, you can:

- wrap your component in a wicket-jquery-ui way, see [1] for instance

- or call renderHead in that component and add the JQueryUILibrarySettings (javascript / css)

[1]  https://github.com/sebfz1/wicket-jquery-ui/blob/wicket8.x/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/form/RadioChoice.java  

[ragul rangarajan]

Hi,

Are you using RadioChoice/CheckChoice component?  

 - yes, I am using RadioChoice component (com.googlecode.wicket.jquery.ui.form.RadioChoice)

Can you reproduce this behavior in a quickstart? 

 - yes trying to reproduce 

I tried to set the resource as mention in [1] but still, I got the same console error

        JavaScriptLibrarySettings settings = new JavaScriptLibrarySettings();
        settings.setJQueryReference(JQueryResourceReference.getV3());
        getApplication().setJavaScriptLibrarySettings(settings);
        JQueryUILibrarySettings settings = JQueryUILibrarySettings.get();
        settings.setJavaScriptReference(new JQueryPluginResourceReference(OpticalBasePage.class, "jquery-ui.min.js"));

[1] https://github.com/sebfz1/wicket-jquery-ui/wiki/%5Bhowto%5D-change-resource-references#customize-jquery-ui-resources  

--
You received this message because you are subscribed to the Google Groups "wicket-jquery-ui" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wicket-jquery-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/wicket-jquery-ui/CAAJwaYXomES048%2BdqjFV9MNt%3DS-x_xfr8A%3DLgG8CEU_gSfDz1g%40mail.gmail.com.

[ragul rangarajan]

This ISSUE1 came due to the recent wicket upgrade from 6.30.x to 8.8.0. 

Is there anything that needs to be added for the JqueryUI to work?

[Sebastien]

No, nothing specific to be added. If you aligned the Wicket jQuery UI version to the Wicket's version, it is supposed to work smoothly...