You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Volker Katz <vo...@gmx.de> on 2012/11/11 15:04:26 UTC

Howto Callback from JavaScript?

Hi,

I'm quite new Wicket and JavaScript. I just started with a small project 
to get my hands on Wicket. I'm trying to use an JQuery Selector. I used 
this JQuery Example:
http://jqueryui.com/selectable/#serialize


I wrote an SelectableBeavior and added it to an WebMarkupContainer. But 
I don't understand how to implement the callback from JavaSript. Now, on 
clicking on my Selector, Firebug tells me "TypeError: Wicket.Ajax is 
undefined"

That's my current example:

public class MySelectorPanel extends Panel {

	public MySelectorPanel(String id, List<String> items) {
		super(id);

		ListView<String> listAjaxView = new ListView<String>(
				"listAjaxView", items) {

			@Override
			protected void populateItem(ListItem<String> i) {
				
				i.add(new Label("itemLabel", i.getModelObject()));
				i.setOutputMarkupId(true);
			}
		};

		WebMarkupContainer listContainer = new WebMarkupContainer(
				"selectable");
		listContainer.setOutputMarkupId(true);
		listContainer.setMarkupId("selectable");

		listContainer.add(listAjaxView);
		SelectableBehavior b = new SelectableBehavior();
		listContainer.add(b);
		
		
		add(listContainer);

	}
	
private class SelectableBehavior extends AbstractAjaxBehavior {

@Override
public void renderHead(Component component, IHeaderResponse response) {
	super.renderHead(component, response);

	String js = " $(document).ready(function() { $('#"
		+ component.getMarkupId()
		+ "').selectable({"
		+ "stop: function() {"
		+ "$( \".ui-selected\", this ).each(function() {"
         + "var index = $( '#"+component.getMarkupId()+" li' ).index( 
this );"
         + "Wicket.Ajax.get({\"u\":\""+ getCallbackUrl()+"\"});"
     	+ "});"
         + "}"
		+"}); "
		+"});";	

	
	response.render(OnDomReadyHeaderItem
			.forScript(js));
}


@Override
public void onRequest() {
}

}

}

Do you hava any hints or Links to docs for me?

Kind regards
   Volker


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


Re: Howto Callback from JavaScript?

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

You have to extend from AbstractDefaultAjaxBehavior instead. See the
javadoc of AbstractAjaxBehavior - it is for simpler cases where Wicket.Ajax
is not used.

About the docs: there is
https://cwiki.apache.org/confluence/display/WICKET/Wicket+Ajax but better
check the sources of https://github.com/wiquery/wiquery and
https://github.com/sebfz1/wicket-jquery-ui


On Sun, Nov 11, 2012 at 4:04 PM, Volker Katz <vo...@gmx.de> wrote:

> Hi,
>
> I'm quite new Wicket and JavaScript. I just started with a small project
> to get my hands on Wicket. I'm trying to use an JQuery Selector. I used
> this JQuery Example:
> http://jqueryui.com/**selectable/#serialize<http://jqueryui.com/selectable/#serialize>
>
>
> I wrote an SelectableBeavior and added it to an WebMarkupContainer. But I
> don't understand how to implement the callback from JavaSript. Now, on
> clicking on my Selector, Firebug tells me "TypeError: Wicket.Ajax is
> undefined"
>
> That's my current example:
>
> public class MySelectorPanel extends Panel {
>
>         public MySelectorPanel(String id, List<String> items) {
>                 super(id);
>
>                 ListView<String> listAjaxView = new ListView<String>(
>                                 "listAjaxView", items) {
>
>                         @Override
>                         protected void populateItem(ListItem<String> i) {
>
>                                 i.add(new Label("itemLabel",
> i.getModelObject()));
>                                 i.setOutputMarkupId(true);
>                         }
>                 };
>
>                 WebMarkupContainer listContainer = new WebMarkupContainer(
>                                 "selectable");
>                 listContainer.**setOutputMarkupId(true);
>                 listContainer.setMarkupId("**selectable");
>
>                 listContainer.add(**listAjaxView);
>                 SelectableBehavior b = new SelectableBehavior();
>                 listContainer.add(b);
>
>
>                 add(listContainer);
>
>         }
>
> private class SelectableBehavior extends AbstractAjaxBehavior {
>
> @Override
> public void renderHead(Component component, IHeaderResponse response) {
>         super.renderHead(component, response);
>
>         String js = " $(document).ready(function() { $('#"
>                 + component.getMarkupId()
>                 + "').selectable({"
>                 + "stop: function() {"
>                 + "$( \".ui-selected\", this ).each(function() {"
>         + "var index = $( '#"+component.getMarkupId()+" li' ).index( this
> );"
>         + "Wicket.Ajax.get({\"u\":\""+ getCallbackUrl()+"\"});"
>         + "});"
>         + "}"
>                 +"}); "
>                 +"});";
>
>
>         response.render(**OnDomReadyHeaderItem
>                         .forScript(js));
> }
>
>
> @Override
> public void onRequest() {
> }
>
> }
>
> }
>
> Do you hava any hints or Links to docs for me?
>
> Kind regards
>   Volker
>
>
> ------------------------------**------------------------------**---------
> 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/>