In a similar use case I assembled the JavaScript in an
IHeaderContributor#renderHead implementation and written it in response
using IHeaderResponse#renderOnDomReadyJavascript
e.g.:
class SetupDatepicker extends Behavior{
@Override
public void renderHead(IHeaderResponse response) {
response.renderJavascriptReference(new
ResourceReference(JQueryReferences.class, "jquery/jquery-1.5.1.min.js"));
response.renderJavascriptReference(new
ResourceReference(JQueryReferences.class, "ui/jquery-ui-1.8.11.custom.min.js"));
response.renderCSSReference(new ResourceReference(JQueryReferences.class,
path));
String js = String.format("$(\"" + getSelector() +
"\").datepicker({dateFormat: '%s'});", parsedPattern);
response.renderOnDomReadyJavascript(js);
}
}
On Thu, Apr 14, 2011 at 12:24 PM, Andrea Del Bene <[email protected]>wrote:
> Hi fachhoch,
>
> I had a similar problem with a custom date component (called
> JQueryDateField) which uses JQuery UI Datapicker. The problem was relative
> to the icon trigger next to the input field which should open Datapicker.
> When we initialize Datapicker we needs to know icon's URL, for example:
>
> |$(function() {
> $( "#datepicker" ).datepicker({
> showOn: "button",
> buttonImage: "images/calendar.gif",
> buttonImageOnly: true
> });
> });|
>
>
> I solved problem using Wicket package resources. I've put calendar icon
> (calendar.jpg) and javascript (JQDatePicker.js) into the same package of
> JQueryDateField. In JQDatePicker.js I substituted buttonImage value with a
> variable called ${calendarIcon}", i.e.
>
>
> |$(function() {
> $( "#datepicker" ).datepicker({
> showOn: "button",
> buttonImage: "*${calendarIcon}*",
> buttonImageOnly: true
> });
> });|
>
>
>
> Now in constructor I loaded javascript as PackageTextTemplate and put
> icon's URL into JavaScript like this:
>
> PackageTextTemplate textTemplate = new
> PackageTextTemplate(getClass(), "JQDatePicker.js");
>
> Map<String,Object> variables = new HashMap<String, Object>();
> PackageResourceReference resourceReference = new
> PackageResourceReference(getClass(), "calendar.jpg");
> variables.put("calendarIcon", urlFor(resourceReference, new
> PageParameters()));
>
>
> String jQueryCalendar = textTemplate.asString(variables);
>
>
> Finally I added jQueryCalendar as render head in method renderHead
>
>
> public void renderHead(IHeaderResponse response) {
> response.renderOnDomReadyJavaScript(jQueryCalendar);
> }
>
>
> That is all. With this code you don't need to hardcode url in your code.
>
> I have a simple jquery function and it needs an image , right now I
>> placed
>> the image in webapp root and hadcoded the image in jquery function
>>
>> including context root , please advice me how to use images in jquery
>> functions ?
>>
>> --
>> View this message in context:
>> http://apache-wicket.1842946.n4.nabble.com/image-in-java-script-tp3449390p3449390.html
>> Sent from the Users forum mailing list archive at Nabble.com.
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [email protected]
>> For additional commands, e-mail: [email protected]
>>
>>
>>
>>
>
--
Pedro Henrique Oliveira dos Santos
