You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by avchavan <av...@yahoo.co.in> on 2015/05/25 08:14:36 UTC

Loading Javascript for wicket component

Hi,
I am using a custom .js file as a datepicker.
the datepicket is visible when i click on the edit button.
what happens is the datepicker icon doesnt show up after clicking on edit
button.
but if i refresh the page the icon shows up.
What could possibly the issue and resolution for such behavior?

Thanks

--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871.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


Re: Loading Javascript for wicket component

Posted by MartinoSuperman <ma...@live.nl>.
When you use the 'target' of AjaxRequestTarget, you can use the method
appendJavaScript(..) in it.

You can call a function in JavaScript in it. In that way, you are loading a
JavaScript with and for a Wicket component. 

--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871p4670989.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


Re: Loading Javascript for wicket component

Posted by Martin Grigorov <mg...@apache.org>.
http://www.7thweb.net/wicket-jquery-ui/datepicker/DefaultDatePickerPage

Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov

On Mon, May 25, 2015 at 2:56 PM, avchavan <av...@yahoo.co.in>
wrote:

> DatePicker javascript
>
>
> this is what i have.
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871p4670885.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
>
>

Re: Loading Javascript for wicket component

Posted by avchavan <av...@yahoo.co.in>.
DatePicker javascript


this is what i have.

--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871p4670885.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


Re: Loading Javascript for wicket component

Posted by Martin Grigorov <mg...@apache.org>.
Nope. There is no file.

I don't need the jquery.datepicker.js file. I need your glue code that
makes the TextField's input a datepicker.

Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov

On Mon, May 25, 2015 at 2:50 PM, avchavan <av...@yahoo.co.in>
wrote:

> file uploaded.
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871p4670883.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
>
>

Re: Loading Javascript for wicket component

Posted by avchavan <av...@yahoo.co.in>.
file uploaded.

--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871p4670883.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


Re: Loading Javascript for wicket component

Posted by Martin Grigorov <mg...@apache.org>.
Please show me the JS code
On May 25, 2015 2:56 PM, "avchavan" <av...@yahoo.co.in> wrote:

> Martin, i get your point. But would this work if my .js file is not being
> loaded unless i refresh?
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871p4670881.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
>
>

Re: Loading Javascript for wicket component

Posted by avchavan <av...@yahoo.co.in>.
Martin, i get your point. But would this work if my .js file is not being
loaded unless i refresh?

--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871p4670881.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


Re: Loading Javascript for wicket component

Posted by Martin Grigorov <mg...@apache.org>.
I still think you need to tell the JS widget that the text field is visible.

Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov

On Mon, May 25, 2015 at 2:16 PM, avchavan <av...@yahoo.co.in>
wrote:

> The entire code written in javascript and it works.
> If i just keep the HTML pages then it loads the datepicker at startup but
> in
> my case the datpicker.js is not being picked up when the modal window
> opens...if i refresh the page then it gets loaded and everything works fine
> after that.
> So, is there a way to ensure that the javascript file gets loaded when the
> modal window opens?
>
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871p4670879.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
>
>

Re: Loading Javascript for wicket component

Posted by avchavan <av...@yahoo.co.in>.
The entire code written in javascript and it works.
If i just keep the HTML pages then it loads the datepicker at startup but in
my case the datpicker.js is not being picked up when the modal window
opens...if i refresh the page then it gets loaded and everything works fine
after that.
So, is there a way to ensure that the javascript file gets loaded when the
modal window opens?


--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871p4670879.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


Re: Loading Javascript for wicket component

Posted by Martin Grigorov <mg...@apache.org>.
There is nothing related to datepicker JS widget in this code.

On Mon, May 25, 2015 at 10:13 AM, avchavan <av...@yahoo.co.in>
wrote:

> Modal Window Java code:
>
> package com.mycompany;
>
> import java.text.SimpleDateFormat;
>
> import org.apache.wicket.ajax.AjaxEventBehavior;
> import org.apache.wicket.ajax.AjaxRequestTarget;
> import org.apache.wicket.ajax.markup.html.AjaxFallbackLink;
> import org.apache.wicket.markup.html.WebMarkupContainer;
> import org.apache.wicket.markup.html.form.RadioChoice;
> import org.apache.wicket.markup.html.form.TextField;
> import org.apache.wicket.markup.html.panel.Panel;
> import org.apache.wicket.model.Model;
>
> public class DateChangeModalWindow extends Panel{
>         private static final long serialVersionUID = 1L;
>         private final AjaxFallbackLink cancel;
>         private final AjaxFallbackLink confirm;
>         private TextField fromDate;
>         private TextField toDate;
>         private RadioChoice<String> endDateOption;
>         private RadioChoice<String> untilFurtherNotice;
>         private WebMarkupContainer untilFurtherNoticeTD;
>         private final SimpleDateFormat dateFormatter = new
> SimpleDateFormat("dd-MM-yyyy");
>
>         public DateChangeModalWindow(final String id) {
>                 super(id);
>                 this.setOutputMarkupPlaceholderTag(true);
>                 this.setVisible(false);
>
>                 this.fromDate = new TextField("fromDate", Model.of(""));
>                 this.toDate = new TextField("toDate", Model.of(""));
>                 this.fromDate.setOutputMarkupPlaceholderTag(true);
>                 this.toDate.setOutputMarkupPlaceholderTag(true);
>                 this.endDateOption = new
> RadioChoice<String>("endDateOption");
>                 this.untilFurtherNotice = new
> RadioChoice<String>("untilFurtherNotice");
>                 this.endDateOption.setOutputMarkupPlaceholderTag(true);
>
> this.untilFurtherNotice.setOutputMarkupPlaceholderTag(true);
>                 this.untilFurtherNoticeTD = new
> WebMarkupContainer("untilFurtherNoticeTD");
>
> this.untilFurtherNoticeTD.setOutputMarkupPlaceholderTag(true);
>
>                 this.cancel = new AjaxFallbackLink("cancel") {
>                         @Override
>                         public void onClick(AjaxRequestTarget target) {
>                                 this.getParent().setVisible(false);
>                                 if(target != null){
>                                         target.add(this.getParent());
>                                 }
>                         }
>                 };
>
>                 this.confirm = new AjaxFallbackLink("confirm") {
>                         @Override
>                         public void onClick(AjaxRequestTarget target) {
>                                 //do something once confirmed
>                         }
>                 };
>
>                 this.add(this.cancel);
>                 this.add(this.confirm);
>                 this.add(this.fromDate);
>                 this.add(this.toDate);
>                 this.add(this.endDateOption);
>                 this.untilFurtherNoticeTD.add(this.untilFurtherNotice);
>                 this.add(this.untilFurtherNoticeTD);
>         }
>
>         public void setModelObject(final ModelObject modelObject){
>
>
>
> this.fromDate.setDefaultModelObject(dateFormatter.format(modelObject.getBegindatum()));
>                 if(modelObject.getEinddatum() != null){
>
>
> this.toDate.setDefaultModelObject(dateFormatter.format(modelObject.getEinddatum()));
>                 }
>                 if(modelObject.getBegindatum().before(DateUtil.getNow())){
>                         fromDate.setEnabled(false);
>                 }else{
>                         fromDate.setEnabled(true);
>                 }
>
>                 this.untilFurtherNotice.add(new
> AjaxEventBehavior("onClick"){
>                         @Override
>                         protected void onEvent(AjaxRequestTarget target) {
>                                 toDate.setDefaultModelObject("");
>                                 toDate.setEnabled(false);
>                                 target.add(toDate);
>                         }
>                 });
>
>                 if(modelObject.getEinddatum() != null){
>                         this.endDateOption.setVisible(false);
>                         this.untilFurtherNoticeTD.setVisible(false);
>                 }else{
>                         this.endDateOption.setVisible(true);
>                         this.untilFurtherNoticeTD.setVisible(true);
>                 }
>
>                 this.endDateOption.add(new AjaxEventBehavior("onClick"){
>                         @Override
>


>                         protected void onEvent(AjaxRequestTarget target) {
>                                 toDate.setEnabled(true);
>                                 target.add(toDate);
>

Here you repaint the textfield but I'd expect to have something like:
$('#textFieldId').datepicker();


>                         }
>                 });
>         }
>
> }
>
>
> Modal Window HTML Code:
>
>
>
>
> Call for Modal Window:
>
> final DateChangeModalWindow dateChangeModalWindow = new
> DateChangeModalWindow("dateChangeModalWindow", this);
>                 add(dateChangeModalWindow);
>                 add(new AjaxFallbackLink("modalWindow") {
>
>                         @Override
>                         public void onClick(AjaxRequestTarget target) {
>
> dateChangeModalWindow.setModelObject(modelObject);
>                                 dateChangeModalWindow.setVisible(true);
>                                 if(target != null){
>                                         target.add(dateChangeModalWindow);
>                                 }
>                         }
>
>                 });
>
> I have included the required .js files in my parent HTML.
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871p4670875.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
>
>

Re: Loading Javascript for wicket component

Posted by avchavan <av...@yahoo.co.in>.
Modal Window Java code:

package com.mycompany;

import java.text.SimpleDateFormat;

import org.apache.wicket.ajax.AjaxEventBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxFallbackLink;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.form.RadioChoice;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.markup.html.panel.Panel;
import org.apache.wicket.model.Model;

public class DateChangeModalWindow extends Panel{
	private static final long serialVersionUID = 1L;
	private final AjaxFallbackLink cancel;
	private final AjaxFallbackLink confirm;
	private TextField fromDate;
	private TextField toDate;
	private RadioChoice<String> endDateOption;
	private RadioChoice<String> untilFurtherNotice;
	private WebMarkupContainer untilFurtherNoticeTD;
	private final SimpleDateFormat dateFormatter = new
SimpleDateFormat("dd-MM-yyyy");

	public DateChangeModalWindow(final String id) {
		super(id);
		this.setOutputMarkupPlaceholderTag(true);
		this.setVisible(false);

		this.fromDate = new TextField("fromDate", Model.of(""));
		this.toDate = new TextField("toDate", Model.of(""));
		this.fromDate.setOutputMarkupPlaceholderTag(true);
		this.toDate.setOutputMarkupPlaceholderTag(true);
		this.endDateOption = new RadioChoice<String>("endDateOption");
		this.untilFurtherNotice = new RadioChoice<String>("untilFurtherNotice");
		this.endDateOption.setOutputMarkupPlaceholderTag(true);
		this.untilFurtherNotice.setOutputMarkupPlaceholderTag(true);
		this.untilFurtherNoticeTD = new
WebMarkupContainer("untilFurtherNoticeTD");
		this.untilFurtherNoticeTD.setOutputMarkupPlaceholderTag(true);

		this.cancel = new AjaxFallbackLink("cancel") {
			@Override
			public void onClick(AjaxRequestTarget target) {
				this.getParent().setVisible(false);
				if(target != null){
					target.add(this.getParent());
				}
			}
		};

		this.confirm = new AjaxFallbackLink("confirm") {
			@Override
			public void onClick(AjaxRequestTarget target) {
				//do something once confirmed
			}
		};

		this.add(this.cancel);
		this.add(this.confirm);
		this.add(this.fromDate);
		this.add(this.toDate);
		this.add(this.endDateOption);
		this.untilFurtherNoticeTD.add(this.untilFurtherNotice);
		this.add(this.untilFurtherNoticeTD);
	}

	public void setModelObject(final ModelObject modelObject){
		
	
this.fromDate.setDefaultModelObject(dateFormatter.format(modelObject.getBegindatum()));
		if(modelObject.getEinddatum() != null){
		
this.toDate.setDefaultModelObject(dateFormatter.format(modelObject.getEinddatum()));
		}
		if(modelObject.getBegindatum().before(DateUtil.getNow())){
			fromDate.setEnabled(false);
		}else{
			fromDate.setEnabled(true);
		}

		this.untilFurtherNotice.add(new AjaxEventBehavior("onClick"){
			@Override
			protected void onEvent(AjaxRequestTarget target) {
				toDate.setDefaultModelObject("");
				toDate.setEnabled(false);
				target.add(toDate);
			}
		});

		if(modelObject.getEinddatum() != null){
			this.endDateOption.setVisible(false);
			this.untilFurtherNoticeTD.setVisible(false);
		}else{
			this.endDateOption.setVisible(true);
			this.untilFurtherNoticeTD.setVisible(true);
		}

		this.endDateOption.add(new AjaxEventBehavior("onClick"){
			@Override
			protected void onEvent(AjaxRequestTarget target) {
				toDate.setEnabled(true);
				target.add(toDate);
			}
		});
	}

}


Modal Window HTML Code:




Call for Modal Window:

final DateChangeModalWindow dateChangeModalWindow = new
DateChangeModalWindow("dateChangeModalWindow", this);
		add(dateChangeModalWindow);
		add(new AjaxFallbackLink("modalWindow") {

			@Override
			public void onClick(AjaxRequestTarget target) {
				dateChangeModalWindow.setModelObject(modelObject);
				dateChangeModalWindow.setVisible(true);
				if(target != null){
					target.add(dateChangeModalWindow);
				}
			}
			
		});

I have included the required .js files in my parent HTML.

--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871p4670875.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


Re: Loading Javascript for wicket component

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


On Mon, May 25, 2015 at 9:14 AM, avchavan <av...@yahoo.co.in>
wrote:

> Hi,
> I am using a custom .js file as a datepicker.
> the datepicket is visible when i click on the edit button.
> what happens is the datepicker icon doesnt show up after clicking on edit
> button.
> but if i refresh the page the icon shows up.
> What could possibly the issue and resolution for such behavior?
>

You don't repaint everything that needs to be repainted.
Show us some code to be able to help you more.


>
> Thanks
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/Loading-Javascript-for-wicket-component-tp4670871.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
>
>