You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Chris <ch...@gmx.at> on 2015/02/01 13:43:47 UTC
Wicket JQuery Selectable Sortable combined
Hi all,
the Wicket - jQuery UI Api shows an example of a sortable List view:
http://www.7thweb.net/wicket-jquery-ui/sortable/DefaultSortablePage?6 <http://www.7thweb.net/wicket-jquery-ui/sortable/DefaultSortablePage?6>
I would not only like to sort a list, but to delete single elements within the list by clicking on a button, see for example:
<ul wicket:id="sortable" class="sortable">
<li wicket:id="items">
<span wicket:id="item" class="item">[label]</span>
<img wicket:id="deleteButton"/>
</li>
</ul>
How is it possible to receive those click events so that I know which list elements has been selected by the user? Is there a way to combine it with the Selectable approach, see http://www.7thweb.net/wicket-jquery-ui/selectable/DefaultSelectablePage?7 <http://www.7thweb.net/wicket-jquery-ui/selectable/DefaultSelectablePage?7> ?
Thanks a lot, Chris
Re: Wicket JQuery Selectable Sortable combined
Posted by Chris <ch...@gmx.at>.
Hi Sebastien,
how is it possible to call the #onRemove from the #onSelect method as the sortable is not created at that moment in order to remove the selected item?
@Override
public void onSelect(AjaxRequestTarget target, List<String> items) {
info("selected " + items);
target.add(feedback);
}
br, Chris
> Am 02.02.2015 um 17:44 schrieb Sebastien <se...@gmail.com>:
>
> Hi Chris,
>
> You're welcome!
>
> The list is already the Sortable's model object, if you are able to send
> the item hash, you are able to retrieve the item, then you just have to
> invoke
> Sortable#onRemove(target, item) [1] and this should be all fine...
>
> Hope this helps,
> Sebastien.
>
> [1]
> https://github.com/sebfz1/wicket-jquery-ui/blob/master/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/interaction/sortable/Sortable.java#L151
>
>
> On Mon, Feb 2, 2015 at 2:22 PM, Chris <ch...@gmx.at> wrote:
>
>> Hi Sebastien,
>>
>>
>> thanks a lot for your example, it works fine!
>> One question remains: how is it possible to add the ListModel as Ajax
>> target so that when I delete a selected element, the displayed elements are
>> updated?
>>
>> @Override
>> public void onSelect(AjaxRequestTarget target, List<String> items) {
>> info("selected " + items);
>> target.add(feedback);
>> }
>> Thanks a lot,
>> Chris
>>
Re: Wicket JQuery Selectable Sortable combined
Posted by Sebastien <se...@gmail.com>.
Hi Chris,
You're welcome!
The list is already the Sortable's model object, if you are able to send
the item hash, you are able to retrieve the item, then you just have to
invoke
Sortable#onRemove(target, item) [1] and this should be all fine...
Hope this helps,
Sebastien.
[1]
https://github.com/sebfz1/wicket-jquery-ui/blob/master/wicket-jquery-ui/src/main/java/com/googlecode/wicket/jquery/ui/interaction/sortable/Sortable.java#L151
On Mon, Feb 2, 2015 at 2:22 PM, Chris <ch...@gmx.at> wrote:
> Hi Sebastien,
>
>
> thanks a lot for your example, it works fine!
> One question remains: how is it possible to add the ListModel as Ajax
> target so that when I delete a selected element, the displayed elements are
> updated?
>
> @Override
> public void onSelect(AjaxRequestTarget target, List<String> items) {
> info("selected " + items);
> target.add(feedback);
> }
> Thanks a lot,
> Chris
>
Re: Wicket JQuery Selectable Sortable combined
Posted by Chris <ch...@gmx.at>.
Hi Sebastien,
thanks a lot for your example, it works fine!
One question remains: how is it possible to add the ListModel as Ajax target so that when I delete a selected element, the displayed elements are updated?
@Override
public void onSelect(AjaxRequestTarget target, List<String> items) {
info("selected " + items);
target.add(feedback);
}
Thanks a lot,
Chris
> Am 01.02.2015 um 17:58 schrieb Sebastien <se...@gmail.com>:
>
> Hi Chris,
>
> Please find hereafter the link to the sample:
> http://www.7thweb.net/wicket-jquery-ui/sortable/SelectableSortablePage
>
> Best regards,
> Sebastien.
Re: Wicket JQuery Selectable Sortable combined
Posted by Sebastien <se...@gmail.com>.
Hi Chris,
Please find hereafter the link to the sample:
http://www.7thweb.net/wicket-jquery-ui/sortable/SelectableSortablePage
Best regards,
Sebastien.
Re: Wicket JQuery Selectable Sortable combined
Posted by Sebastien <se...@gmail.com>.
Hi,
> How is it possible to receive those click events so that I know which
list elements has been selected by the user?
Each list (html) item has a 'data-hash' attribute that corresponds to each
list (java) hashcode. So you can send it with your button and get the
selected item (java) back. You can look at SortableBehavior for
inspiration.
That said, in my opinion, there could be an easier way: as you want to add
the selectable behavior to the sortable list, can't you figure out to have
an external 'delete' button that would delete previously-selected item?
> Is there a way to combine it with the Selectable approach
Yes, there is. I will add a sample page with this because it is
straightforward... only when we know it!
What you need is to define the 'handler' option to the sortable (it will be
the zone where sorting will be available).
The html looks like:
<ul wicket:id="sortable" class="sortable">
<li wicket:id="items">
<span wicket:id="icon" class="*handle*">[icon]</span>
<span wicket:id="item" class="item">[label]</span>
</li>
</ul>
The java looks like:
final List<String> list = newList("item #1", "item #2", "item #3", "item
#4", "item #5", "item #6");
final Sortable<String> sortable = new Sortable<String>("sortable", list,
new Options("handle", Options.asString(".*handle*"))) {
@Override
protected void onInitialize()
{
super.onInitialize();
this.add(new
SelectableBehavior<String>(JQueryWidget.getSelector(this), new
Options("cancel", Options.asString(".*handle*"))) {
@Override
protected String getItemSelector()
{
return "li";
}
@Override
protected List<String> getItemList()
{
return list;
}
@Override
public void onSelect(AjaxRequestTarget target, List<String>
items)
{
info("selected " + items);
target.add(feedback);
}
});
}
/* ... */
};
this.add(sortable);
I will update this thread when the sample page will be online...
Hope this help,
Sebastien.
On Sun, Feb 1, 2015 at 1:43 PM, Chris <ch...@gmx.at> wrote:
> Hi all,
>
> the Wicket - jQuery UI Api shows an example of a sortable List view:
> http://www.7thweb.net/wicket-jquery-ui/sortable/DefaultSortablePage?6 <
> http://www.7thweb.net/wicket-jquery-ui/sortable/DefaultSortablePage?6>
>
> I would not only like to sort a list, but to delete single elements within
> the list by clicking on a button, see for example:
>
> <ul wicket:id="sortable" class="sortable">
> <li wicket:id="items">
> <span wicket:id="item" class="item">[label]</span>
> <img wicket:id="deleteButton"/>
> </li>
> </ul>
>
> How is it possible to receive those click events so that I know which list
> elements has been selected by the user? Is there a way to combine it with
> the Selectable approach, see
> http://www.7thweb.net/wicket-jquery-ui/selectable/DefaultSelectablePage?7
> <http://www.7thweb.net/wicket-jquery-ui/selectable/DefaultSelectablePage?7>
> ?
>
> Thanks a lot, Chris