Hi,

You can use TextTemplate to load the JavaScript with the placeholders.
See
https://github.com/wicketstuff/core/blob/master/jdk-1.6-parent/autocomplete-tagit-parent/autocomplete-tagit/src/main/java/org/wicketstuff/tagit/TagItAjaxBehavior.java#L96
for
example.


On Wed, May 15, 2013 at 5:19 AM, William Speirs <wspe...@apache.org> wrote:

> @Bas Gooren that code you linked was very helpful. I have what I want
> up and working, but it's using a bunch of ugly jQuery ajax callbacks
> hacked into StringBuilders :-(
>
> @Don Ferguson I don't *think* this is what I'm looking for as I have
> thousands of options and I don't want them rendered at page load.
> Instead I want to register a function that will call-back to my Java
> code when someone start typing and allows me to search. However, I did
> not run it, just looked at the code.
>
> Here is what I have, again it's ugly. Does anyone know how I can
> clean-up the jQuery.ajax stuff? I've gotta imagine there is a way to
> do it in Wicket.
>
> Thanks in advance...
>
> Bill-
>
> public class TypeaheadField<T> extends TextField<T> implements
> IResourceListener {
>
>     private static final long serialVersionUID = 1L;
>
>     public TypeaheadField(final String id, final IModel<T> model) {
>         super(id, model);
>
>         setOutputMarkupId(true);
>         add(new AttributeModifier("data-provide", "typeahead"));
>     }
>
>     @Override
>     public void renderHead(final IHeaderResponse response) {
>         super.renderHead(response);
>
>         StringBuilder sb = new StringBuilder();
>
>         sb.append("$('#");
>         sb.append(getMarkupId().replace(".", "\\\\."));
>         sb.append("').typeahead(");
>         sb.append(getConfig());
>         sb.append(");");
>
>         response.render(OnDomReadyHeaderItem.forScript(sb.toString()));
>     }
>
>     private String getConfig() {
>         final StringBuilder ajaxCall = new StringBuilder();
>
>         ajaxCall.append("{ \"source\": ");
>
>         ajaxCall.append("function(query, process) { $.ajax({ url: \"");
>         ajaxCall.append(urlFor(IResourceListener.INTERFACE, null));
>         ajaxCall.append("\", data: { \"query\": query }, success:
> function(data, status, jqXHR) { process(data); } }); }, ");
>
>         ajaxCall.append("items: 4 }");
>
>         return ajaxCall.toString();
>     }
>
>     @Override
>     public void onResourceRequested() {
>         final Request request = getRequestCycle().getRequest();
>         final IRequestParameters params = request.getRequestParameters();
>
>         final String query =
> params.getParameterValue("query").toOptionalString();
>
>         WebResponse webResponse = (WebResponse)
> getRequestCycle().getResponse();
>         webResponse.setContentType("application/json");
>
>         OutputStreamWriter out = new
> OutputStreamWriter(webResponse.getOutputStream(),
> getRequest().getCharset());
>         JSONWriter json = new JSONWriter(out);
>
>         try {
>             json.array();
>
>             json.value("Connecticut");
>             json.value("California");
>             json.value("Colorado");
>
>             json.endArray();
>         } catch (JSONException e) {
>             throw new WicketRuntimeException("Could not write Json
> response", e);
>         }
>
>         try {
>             out.flush();
>         } catch (IOException e) {
>             throw new WicketRuntimeException("Could not write Json to
> servlet response", e);
>         }
>     }
> }
>
>
>
> On Tue, May 14, 2013 at 10:04 PM, Don Ferguson <don.fergu...@gmail.com>
> wrote:
> > The following seems to work (using wicket 6.7 with the experimental
> bootstrap module).  Basically, this ajax behavior is called on page load.
> At that point, it writes out the javascript to initialize the object with
> typeahead parameters.
> >
> > HTML:
> >
> >         <input wicket:id="typeahead" type="text"
> data-provide="typeahead" data-items="4">
> >
> > JAVA:
> >
> >         add(new TextField<String>("typeahead").add(new TypeAhead()));
> >
> > TypeAhead Behavior:
> >
> > import org.apache.wicket.Component;
> > import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
> > import org.apache.wicket.ajax.AjaxRequestTarget;
> > import org.apache.wicket.markup.head.IHeaderResponse;
> > import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
> >
> > import java.util.Arrays;
> > import java.util.List;
> >
> > public  class TypeAhead extends AbstractDefaultAjaxBehavior {
> >     @Override
> >     protected void onBind() {
> >         super.onBind();
> >         getComponent().setOutputMarkupId(true);
> >     }
> >
> >     @Override
> >     protected void respond(AjaxRequestTarget target) {
> >         String sources = toJSONArray(getOptions());
> >         String script = String.format("$('#%s').typeahead( { source: %s
> } );", getComponent().getMarkupId(), sources);
> >         target.appendJavaScript(script);
> >     }
> >
> >     @Override
> >     public void renderHead(Component component, IHeaderResponse
> response) {
> >         super.renderHead(component, response);
> >         response.render(OnDomReadyHeaderItem.forScript(
> this.getCallbackScript() ));
> >     }
> >
> >      // OVERRIDE THIS TO SUPPLY LIST OF OPTIONS
> >     public  List<String> getOptions() {
> >         return Arrays.asList( new String[] {"Alabama", "Aftermath",
> "Absinth"} );
> >     }
> >
> >      // There's probably a built-in method that does this…
> >
> >     private String toJSONArray(List<String> strings) {
> >         StringBuffer result = new StringBuffer("[");
> >         for (String string : strings) {
> >             result.append("'");
> >             result.append(string);
> >             result.append("',");
> >         }
> >         if (strings.size() > 0) {
> >             result.deleteCharAt(result.lastIndexOf(","));
> >         }
> >         result.append("]");
> >         return result.toString();
> >     }
> >
> > }
> >
> >
> > Hope this works for you.
> >
> > -- Don Ferguson
> >
> >
> > On Tuesday, May 14, 2013 at 1:36 PM, William Speirs wrote:
> >
> >> I'm trying to create a typeahead component for Wicket that uses
> Bootstrap's
> >> Typeahead:
> >>
> >> To set this up though I need to provide the .typeahead method in
> JavaScript
> >> with a function that will return the results, given the query. What I'd
> >> like to do is attach that JavaScript function to a Java method much like
> >> what is done with an AjaxEventBehavior [2]. I cannot figure out how to
> go
> >> about setting all of this up... any ideas?
> >>
> >> Thanks...
> >>
> >> Bill-
> >>
> >> [1] http://twitter.github.io/bootstrap/javascript.html#typeahead
> >> [2]
> >>
> http://ci.apache.org/projects/wicket/apidocs/6.x/org/apache/wicket/ajax/AjaxEventBehavior.html
> >>
> >>
> >
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>


-- 
Martin Grigorov
Wicket Training & Consulting
http://jWeekend.com <http://jweekend.com/>

Reply via email to