You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Maxim Solodovnik <so...@gmail.com> on 2016/08/05 12:16:11 UTC
Confirmation on drag
Hello Sebastian,
Is it possible to show confirmation dialog on drop (even pure JS or Wicket)
and "revert" file if user choose cancel?
--
WBR
Maxim aka solomax
Re: Confirmation on drag
Posted by Maxim Solodovnik <so...@gmail.com>.
Thanks a lot Sebastien, it works as expected :)))
On Fri, Aug 5, 2016 at 8:48 PM, Sebastien <se...@gmail.com> wrote:
> I agree it's ugly, it is just for the PoC.
>
> Nothing prevent using a jquery-ui dialog intead, but it should be in js
> directly, not trough wicket because it will be too late in the cycle
> (whenever #onDrop should call dialog#open)
> So, something like this:
>
> return new DroppableBehavior(selector, this) {
>
> @Override
> protected JQueryAjaxBehavior newOnDropAjaxBehavior(IJQueryAjaxAware
> source)
> {
> return new OnDropAjaxBehavior(source) {
>
> @Override
> public CharSequence getCallbackFunctionBody(CallbackParameter...
> parameters)
> {
> String dialogId =
> UUID.randomUUID().toString();
>
> String statement = "var $drop = $(this);";
> statement += "$('body').append('<div id="
> + dialogId + ">Are you sure?</div>');";
> statement +="$( '#" + dialogId + "'
> ).dialog({ title: 'Confirmation', dialogClass: 'no-close', buttons: [";
> statement += " { text: 'OK', click:
> function() { $drop.append(ui.draggable); $(this).dialog('close'); " +
> super.getCallbackFunctionBody(parameters) + " } },";
> statement += " { text: 'Cancel', click:
> function() { $( this ).dialog('close'); } } ";
> statement += "],";
> statement += "close: function(event, ui) {
> $(this).dialog('destroy').remove(); }";
> statement += "});";
>
> return statement;
>
> }
> };
> }
> };
>
>
>
> On Fri, Aug 5, 2016 at 3:16 PM, Maxim Solodovnik <so...@gmail.com>
> wrote:
>
>> Browser native confirm is blocking and ugly :(
>> Is there any option to use jquery-ui confirm?
>>
>> WBR, Maxim
>> (from mobile, sorry for the typos)
>>
>> On Aug 5, 2016 20:09, "Sebastien" <se...@gmail.com> wrote:
>>
>>> Hi Maxim,
>>>
>>> Seems its a common question in the jquery-ui world...
>>> The best I can propose you for now is something like the following code.
>>> It does *not* use revert, but use a clone helper.
>>> This example is also using a browser-native "confirm" dialog...
>>>
>>> Inspired from http://jsfiddle.net/WbHAr/1/
>>>
>>> Draggable:
>>>
>>> Draggable<Book> draggable = new
>>> Draggable<Book>("draggable", model) {
>>>
>>> @Override
>>> public void onConfigure(JQueryBehavior behavior)
>>> {
>>> super.onConfigure(behavior);
>>>
>>> behavior.setOption("helper", "'clone'");
>>> }
>>> };
>>>
>>>
>>> Droppable:
>>>
>>> final Droppable<Void> droppable = new Droppable<Void>("card") {
>>>
>>> @Override
>>> public JQueryBehavior newWidgetBehavior(String selector)
>>> {
>>> return new DroppableBehavior(selector, this) {
>>>
>>> @Override
>>> protected JQueryAjaxBehavior
>>> newOnDropAjaxBehavior(IJQueryAjaxAware source)
>>> {
>>> return new OnDropAjaxBehavior(source) {
>>> @Override
>>> public CharSequence
>>> getCallbackFunctionBody(CallbackParameter... parameters)
>>> {
>>> return String.format("if (confirm('Drop
>>> here?')) { $(this).append(ui.draggable); %s}",
>>> super.getCallbackFunctionBody(parameters));
>>>
>>> }
>>> };
>>> }
>>> };
>>> }
>>>
>>>
>>> Hope this helps :)
>>> Sebastien
>>>
>>> On Fri, Aug 5, 2016 at 2:16 PM, Maxim Solodovnik <so...@gmail.com>
>>> wrote:
>>>
>>>> Hello Sebastian,
>>>>
>>>> Is it possible to show confirmation dialog on drop (even pure JS or
>>>> Wicket)
>>>> and "revert" file if user choose cancel?
>>>>
>>>> --
>>>> WBR
>>>> Maxim aka solomax
>>>>
>>>
>>>
>
--
WBR
Maxim aka solomax
Re: Confirmation on drag
Posted by Sebastien <se...@gmail.com>.
I agree it's ugly, it is just for the PoC.
Nothing prevent using a jquery-ui dialog intead, but it should be in js
directly, not trough wicket because it will be too late in the cycle
(whenever #onDrop should call dialog#open)
So, something like this:
return new DroppableBehavior(selector, this) {
@Override
protected JQueryAjaxBehavior
newOnDropAjaxBehavior(IJQueryAjaxAware source)
{
return new OnDropAjaxBehavior(source) {
@Override
public CharSequence
getCallbackFunctionBody(CallbackParameter... parameters)
{
String dialogId =
UUID.randomUUID().toString();
String statement = "var $drop = $(this);";
statement += "$('body').append('<div id=" +
dialogId + ">Are you sure?</div>');";
statement +="$( '#" + dialogId + "'
).dialog({ title: 'Confirmation', dialogClass: 'no-close', buttons: [";
statement += " { text: 'OK', click:
function() { $drop.append(ui.draggable); $(this).dialog('close'); " +
super.getCallbackFunctionBody(parameters) + " } },";
statement += " { text: 'Cancel', click:
function() { $( this ).dialog('close'); } } ";
statement += "],";
statement += "close: function(event, ui) {
$(this).dialog('destroy').remove(); }";
statement += "});";
return statement;
}
};
}
};
On Fri, Aug 5, 2016 at 3:16 PM, Maxim Solodovnik <so...@gmail.com>
wrote:
> Browser native confirm is blocking and ugly :(
> Is there any option to use jquery-ui confirm?
>
> WBR, Maxim
> (from mobile, sorry for the typos)
>
> On Aug 5, 2016 20:09, "Sebastien" <se...@gmail.com> wrote:
>
>> Hi Maxim,
>>
>> Seems its a common question in the jquery-ui world...
>> The best I can propose you for now is something like the following code.
>> It does *not* use revert, but use a clone helper.
>> This example is also using a browser-native "confirm" dialog...
>>
>> Inspired from http://jsfiddle.net/WbHAr/1/
>>
>> Draggable:
>>
>> Draggable<Book> draggable = new
>> Draggable<Book>("draggable", model) {
>>
>> @Override
>> public void onConfigure(JQueryBehavior behavior)
>> {
>> super.onConfigure(behavior);
>>
>> behavior.setOption("helper", "'clone'");
>> }
>> };
>>
>>
>> Droppable:
>>
>> final Droppable<Void> droppable = new Droppable<Void>("card") {
>>
>> @Override
>> public JQueryBehavior newWidgetBehavior(String selector)
>> {
>> return new DroppableBehavior(selector, this) {
>>
>> @Override
>> protected JQueryAjaxBehavior
>> newOnDropAjaxBehavior(IJQueryAjaxAware source)
>> {
>> return new OnDropAjaxBehavior(source) {
>> @Override
>> public CharSequence
>> getCallbackFunctionBody(CallbackParameter... parameters)
>> {
>> return String.format("if (confirm('Drop
>> here?')) { $(this).append(ui.draggable); %s}",
>> super.getCallbackFunctionBody(parameters));
>>
>> }
>> };
>> }
>> };
>> }
>>
>>
>> Hope this helps :)
>> Sebastien
>>
>> On Fri, Aug 5, 2016 at 2:16 PM, Maxim Solodovnik <so...@gmail.com>
>> wrote:
>>
>>> Hello Sebastian,
>>>
>>> Is it possible to show confirmation dialog on drop (even pure JS or
>>> Wicket)
>>> and "revert" file if user choose cancel?
>>>
>>> --
>>> WBR
>>> Maxim aka solomax
>>>
>>
>>
Re: Confirmation on drag
Posted by Maxim Solodovnik <so...@gmail.com>.
Browser native confirm is blocking and ugly :(
Is there any option to use jquery-ui confirm?
WBR, Maxim
(from mobile, sorry for the typos)
On Aug 5, 2016 20:09, "Sebastien" <se...@gmail.com> wrote:
> Hi Maxim,
>
> Seems its a common question in the jquery-ui world...
> The best I can propose you for now is something like the following code.
> It does *not* use revert, but use a clone helper.
> This example is also using a browser-native "confirm" dialog...
>
> Inspired from http://jsfiddle.net/WbHAr/1/
>
> Draggable:
>
> Draggable<Book> draggable = new
> Draggable<Book>("draggable", model) {
>
> @Override
> public void onConfigure(JQueryBehavior behavior)
> {
> super.onConfigure(behavior);
>
> behavior.setOption("helper", "'clone'");
> }
> };
>
>
> Droppable:
>
> final Droppable<Void> droppable = new Droppable<Void>("card") {
>
> @Override
> public JQueryBehavior newWidgetBehavior(String selector)
> {
> return new DroppableBehavior(selector, this) {
>
> @Override
> protected JQueryAjaxBehavior newOnDropAjaxBehavior(IJQueryAjaxAware
> source)
> {
> return new OnDropAjaxBehavior(source) {
> @Override
> public CharSequence getCallbackFunctionBody(CallbackParameter...
> parameters)
> {
> return String.format("if (confirm('Drop
> here?')) { $(this).append(ui.draggable); %s}",
> super.getCallbackFunctionBody(parameters));
>
> }
> };
> }
> };
> }
>
>
> Hope this helps :)
> Sebastien
>
> On Fri, Aug 5, 2016 at 2:16 PM, Maxim Solodovnik <so...@gmail.com>
> wrote:
>
>> Hello Sebastian,
>>
>> Is it possible to show confirmation dialog on drop (even pure JS or
>> Wicket)
>> and "revert" file if user choose cancel?
>>
>> --
>> WBR
>> Maxim aka solomax
>>
>
>
Re: Confirmation on drag
Posted by Sebastien <se...@gmail.com>.
Hi Maxim,
Seems its a common question in the jquery-ui world...
The best I can propose you for now is something like the following code. It
does *not* use revert, but use a clone helper.
This example is also using a browser-native "confirm" dialog...
Inspired from http://jsfiddle.net/WbHAr/1/
Draggable:
Draggable<Book> draggable = new
Draggable<Book>("draggable", model) {
@Override
public void onConfigure(JQueryBehavior behavior)
{
super.onConfigure(behavior);
behavior.setOption("helper", "'clone'");
}
};
Droppable:
final Droppable<Void> droppable = new Droppable<Void>("card") {
@Override
public JQueryBehavior newWidgetBehavior(String selector)
{
return new DroppableBehavior(selector, this) {
@Override
protected JQueryAjaxBehavior
newOnDropAjaxBehavior(IJQueryAjaxAware source)
{
return new OnDropAjaxBehavior(source) {
@Override
public CharSequence
getCallbackFunctionBody(CallbackParameter... parameters)
{
return String.format("if (confirm('Drop
here?')) { $(this).append(ui.draggable); %s}",
super.getCallbackFunctionBody(parameters));
}
};
}
};
}
Hope this helps :)
Sebastien
On Fri, Aug 5, 2016 at 2:16 PM, Maxim Solodovnik <so...@gmail.com>
wrote:
> Hello Sebastian,
>
> Is it possible to show confirmation dialog on drop (even pure JS or Wicket)
> and "revert" file if user choose cancel?
>
> --
> WBR
> Maxim aka solomax
>