You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Garret Wilson <ga...@globalmentor.com> on 2014/11/13 22:36:21 UTC
clearing feedback messages on Ajax upload
Hi, all. I've done a bit of searching to find the answer, and nothing
quite seemed to fit, or was obsolete, or was deprecated, or was vague.
So I'll ask on the list.
I have a page that uses a multipart form submit. It allows the user to
select a file, and has an AjaxSubmitLink with the label "Go" that 1)
uploads a large file and then 2) does something that takes a long time.
When finished, it calls info("finished!") to show a success message in
the feedback area.
So let's suppose that the user selects a file and selects "Go". After
the file is uploaded, the processing takes place and the feedback area
says "finished!" Perfect.
Question: If the user selects /another/ file and selects "Go" /again/,
how can I immediately remove the "finished!" message, either A) as soon
as the user selects "Go" or B) as soon as the file finishes uploading
but before processeing starts? (I greatly prefer option B.)
Thanks,
Garret
Re: clearing feedback messages on Ajax upload
Posted by Martin Grigorov <mg...@apache.org>.
On Fri, Nov 14, 2014 at 1:47 AM, Garret Wilson <ga...@globalmentor.com>
wrote:
> Martin, after fixing the ID selector ("#id7") it works great! (The page
> jumps up because the feedback area disappears, but I can live with that for
> now.) It even
How is your CSS ? ;-)
Instead of $('#id7').empty() you can use $('#id7').css('visibility',
'hidden') or $('#id7').css('opacity', 0) to hide the HTML element but keep
its visual space, so it won't jump.
> works in conjunction with Sven Meier's confirmation message button <
> https://cwiki.apache.org/confluence/x/X4U>.
>
> Very nice. Thank you very much, Martin!
>
> I really recommend that Wicket add some prebuilt behaviors. There should
> be some sort of Ajax "clear component" behavior, and some "Ajax
> confirmation" behavior, etc. This is so that we can get hard-coded, manual
> JavaScript out of our code, and start developing in terms of
> semantically-named prebuilt classes rather than coding JavaScript
> boilerplate. Now I know that the Ajax core team hate this idea, because
> they say, 1) "Wicket is so easy that you can just add in whatever you want;
> we don't need to encapsulate this in a class", and 2) "there are so many
> different ways people want to do it, we don't even want to include one or
> two of them in the Wicket library". I don't want to start that argument
> here; I'll write an essay about it another day.
>
Looking forward to your essay! ;-)
I've shown you three ways to "hide" an HTML element so far. None of them
are good enough for userX because (s)he wants to do that with CSS effects
(fadeOut, easeOut, with rotation, with skew, ...)
I hope you understand we cannot add all this in the library.
It is simple enough so every application developer can write the JS
one-liner to accomplish the task.
Hint:
A clever way would be to set a CSS class to the element you want to hide.
This way the designer (the CSS expert) can do all of the above without
bothering you (the Java developer) every time the requirement changes.
$('#id7').addClass('someClass')
>
> For now I'll just hard-code the JavaScript as Martin suggested and get my
> app working. Thanks again, Martin! Very helpful.
>
> Garret
>
>
> On 11/13/2014 8:39 PM, Martin Grigorov wrote:
>
>> On Fri, Nov 14, 2014 at 12:36 AM, Garret Wilson <ga...@globalmentor.com>
>> wrote:
>>
>> I actually mistyped; I greatly prefer option A, not B, below. So Martin,
>>> your suggestion sounds good.
>>>
>>> My JavaScript is great, but my JQuery is not so hot. I added your code
>>> and... my AjaxSubmitLink now no longer performs an upload at all. Here's
>>> the script that's being added to the page:
>>>
>>> <script type="text/javascript" >
>>> /*<![CDATA[*/
>>> Wicket.Event.add(window, "domready", function(event) {
>>> new Wicket.WUPB('id4', 'id5', 'id6',
>>> '../resource/org.apache.wicket.Application/org.apache.
>>> wicket.extensions.ajax.markup.html.form.upload.
>>> UploadProgressBar?upload=5',
>>> 'id3', 'Upload starting...');;
>>>
>>>
>> Wicket.Ajax.ajax({"u":"./com.example.ExamplePage?5-4.
>>> IBehaviorListener.0-form-go","m":"POST","c":"id8","f":"id4",
>>> "mp":true,"sc":"go","bsh":[function(attrs,
>>> jqXHR, settings){$('#'id7).empty();}],"e":"click"});;
>>>
>>> it should produce $('#id7').empty(). Note the string parameter to $()
>> I see that my example is broken.
>> Check for JS errors in the Dev tools console when you deal with JS ;-)
>>
>>
>> ;});
>>> /*]]>*/
>>> </script>
>>>
>>>
>>> Here's what my button (id8) HTML looks like:
>>>
>>> <button class="pure-button" type="button" id="id8">
>>> <i class="fa fa-cloud-upload"></i>
>>> Go!
>>> </button>
>>> </div>
>>>
>>> id7 is indeed the ID of the feedback <div> (which starts out empty
>>> anyway).
>>>
>>> Garret
>>>
>>> P.S. A few IDs and strings were changed here and there to generalize the
>>> code.
>>>
>>>
>>> On 11/13/2014 7:50 PM, Martin Grigorov wrote:
>>>
>>> Hi,
>>>>
>>>> On Thu, Nov 13, 2014 at 11:36 PM, Garret Wilson <
>>>> garret@globalmentor.com>
>>>> wrote:
>>>>
>>>> Hi, all. I've done a bit of searching to find the answer, and nothing
>>>>
>>>>> quite seemed to fit, or was obsolete, or was deprecated, or was vague.
>>>>> So
>>>>> I'll ask on the list.
>>>>>
>>>>> I have a page that uses a multipart form submit. It allows the user to
>>>>> select a file, and has an AjaxSubmitLink with the label "Go" that 1)
>>>>> uploads a large file and then 2) does something that takes a long time.
>>>>> When finished, it calls info("finished!") to show a success message in
>>>>> the
>>>>> feedback area.
>>>>>
>>>>> So let's suppose that the user selects a file and selects "Go". After
>>>>> the
>>>>> file is uploaded, the processing takes place and the feedback area says
>>>>> "finished!" Perfect.
>>>>>
>>>>> Question: If the user selects /another/ file and selects "Go" /again/,
>>>>> how
>>>>> can I immediately remove the "finished!" message, either A) as soon as
>>>>> the
>>>>> user selects "Go" or B) as soon as the file finishes uploading but
>>>>> before
>>>>> processeing starts? (I greatly prefer option B.)
>>>>>
>>>>> How is your JavaScript ?
>>>>>
>>>> For A)
>>>> AjaxSubmitLink(...) {
>>>> @Override protected void updateAjaxAttributes(attrs) {
>>>> attrs.getAjaxCallListeners().add(new
>>>> AjaxCallListener().onBeforeSend("$('#'"+feedback.
>>>> getMarkupId()+").empty();"))
>>>> }
>>>> }
>>>>
>>>> For B)
>>>> I can imagine this only with WebSockets.
>>>> With HTTP 1.1 the Ajax response should be complete to be flushed to the
>>>> client by Wicket.
>>>> With WebSockets you can push data at any point of the request
>>>> processing.
>>>> If you choose to use Wicket Native WebSockets then see
>>>> WebSocketRequestHandler#push(String). You can push JSON that tells the
>>>> client side WebSocket listener at the browser to do the same as the JS
>>>> in
>>>> A)
>>>>
>>>>
>>>> Thanks,
>>>>
>>>>> Garret
>>>>>
>>>>>
>>>>>
>
Re: clearing feedback messages on Ajax upload
Posted by Garret Wilson <ga...@globalmentor.com>.
Martin, after fixing the ID selector ("#id7") it works great! (The page
jumps up because the feedback area disappears, but I can live with that
for now.) It even works in conjunction with Sven Meier's confirmation
message button <https://cwiki.apache.org/confluence/x/X4U>.
Very nice. Thank you very much, Martin!
I really recommend that Wicket add some prebuilt behaviors. There should
be some sort of Ajax "clear component" behavior, and some "Ajax
confirmation" behavior, etc. This is so that we can get hard-coded,
manual JavaScript out of our code, and start developing in terms of
semantically-named prebuilt classes rather than coding JavaScript
boilerplate. Now I know that the Ajax core team hate this idea, because
they say, 1) "Wicket is so easy that you can just add in whatever you
want; we don't need to encapsulate this in a class", and 2) "there are
so many different ways people want to do it, we don't even want to
include one or two of them in the Wicket library". I don't want to start
that argument here; I'll write an essay about it another day.
For now I'll just hard-code the JavaScript as Martin suggested and get
my app working. Thanks again, Martin! Very helpful.
Garret
On 11/13/2014 8:39 PM, Martin Grigorov wrote:
> On Fri, Nov 14, 2014 at 12:36 AM, Garret Wilson <ga...@globalmentor.com>
> wrote:
>
>> I actually mistyped; I greatly prefer option A, not B, below. So Martin,
>> your suggestion sounds good.
>>
>> My JavaScript is great, but my JQuery is not so hot. I added your code
>> and... my AjaxSubmitLink now no longer performs an upload at all. Here's
>> the script that's being added to the page:
>>
>> <script type="text/javascript" >
>> /*<![CDATA[*/
>> Wicket.Event.add(window, "domready", function(event) {
>> new Wicket.WUPB('id4', 'id5', 'id6',
>> '../resource/org.apache.wicket.Application/org.apache.
>> wicket.extensions.ajax.markup.html.form.upload.
>> UploadProgressBar?upload=5',
>> 'id3', 'Upload starting...');;
>>
>
>> Wicket.Ajax.ajax({"u":"./com.example.ExamplePage?5-4.
>> IBehaviorListener.0-form-go","m":"POST","c":"id8","f":"id4",
>> "mp":true,"sc":"go","bsh":[function(attrs,
>> jqXHR, settings){$('#'id7).empty();}],"e":"click"});;
>>
> it should produce $('#id7').empty(). Note the string parameter to $()
> I see that my example is broken.
> Check for JS errors in the Dev tools console when you deal with JS ;-)
>
>
>> ;});
>> /*]]>*/
>> </script>
>>
>>
>> Here's what my button (id8) HTML looks like:
>>
>> <button class="pure-button" type="button" id="id8">
>> <i class="fa fa-cloud-upload"></i>
>> Go!
>> </button>
>> </div>
>>
>> id7 is indeed the ID of the feedback <div> (which starts out empty anyway).
>>
>> Garret
>>
>> P.S. A few IDs and strings were changed here and there to generalize the
>> code.
>>
>>
>> On 11/13/2014 7:50 PM, Martin Grigorov wrote:
>>
>>> Hi,
>>>
>>> On Thu, Nov 13, 2014 at 11:36 PM, Garret Wilson <ga...@globalmentor.com>
>>> wrote:
>>>
>>> Hi, all. I've done a bit of searching to find the answer, and nothing
>>>> quite seemed to fit, or was obsolete, or was deprecated, or was vague. So
>>>> I'll ask on the list.
>>>>
>>>> I have a page that uses a multipart form submit. It allows the user to
>>>> select a file, and has an AjaxSubmitLink with the label "Go" that 1)
>>>> uploads a large file and then 2) does something that takes a long time.
>>>> When finished, it calls info("finished!") to show a success message in
>>>> the
>>>> feedback area.
>>>>
>>>> So let's suppose that the user selects a file and selects "Go". After the
>>>> file is uploaded, the processing takes place and the feedback area says
>>>> "finished!" Perfect.
>>>>
>>>> Question: If the user selects /another/ file and selects "Go" /again/,
>>>> how
>>>> can I immediately remove the "finished!" message, either A) as soon as
>>>> the
>>>> user selects "Go" or B) as soon as the file finishes uploading but before
>>>> processeing starts? (I greatly prefer option B.)
>>>>
>>>> How is your JavaScript ?
>>> For A)
>>> AjaxSubmitLink(...) {
>>> @Override protected void updateAjaxAttributes(attrs) {
>>> attrs.getAjaxCallListeners().add(new
>>> AjaxCallListener().onBeforeSend("$('#'"+feedback.
>>> getMarkupId()+").empty();"))
>>> }
>>> }
>>>
>>> For B)
>>> I can imagine this only with WebSockets.
>>> With HTTP 1.1 the Ajax response should be complete to be flushed to the
>>> client by Wicket.
>>> With WebSockets you can push data at any point of the request processing.
>>> If you choose to use Wicket Native WebSockets then see
>>> WebSocketRequestHandler#push(String). You can push JSON that tells the
>>> client side WebSocket listener at the browser to do the same as the JS in
>>> A)
>>>
>>>
>>> Thanks,
>>>> Garret
>>>>
>>>>
Re: clearing feedback messages on Ajax upload
Posted by Martin Grigorov <mg...@apache.org>.
On Fri, Nov 14, 2014 at 12:36 AM, Garret Wilson <ga...@globalmentor.com>
wrote:
> I actually mistyped; I greatly prefer option A, not B, below. So Martin,
> your suggestion sounds good.
>
> My JavaScript is great, but my JQuery is not so hot. I added your code
> and... my AjaxSubmitLink now no longer performs an upload at all. Here's
> the script that's being added to the page:
>
> <script type="text/javascript" >
> /*<![CDATA[*/
> Wicket.Event.add(window, "domready", function(event) {
> new Wicket.WUPB('id4', 'id5', 'id6',
> '../resource/org.apache.wicket.Application/org.apache.
> wicket.extensions.ajax.markup.html.form.upload.
> UploadProgressBar?upload=5',
> 'id3', 'Upload starting...');;
>
> Wicket.Ajax.ajax({"u":"./com.example.ExamplePage?5-4.
> IBehaviorListener.0-form-go","m":"POST","c":"id8","f":"id4",
> "mp":true,"sc":"go","bsh":[function(attrs,
> jqXHR, settings){$('#'id7).empty();}],"e":"click"});;
>
it should produce $('#id7').empty(). Note the string parameter to $()
I see that my example is broken.
Check for JS errors in the Dev tools console when you deal with JS ;-)
> ;});
> /*]]>*/
> </script>
>
>
> Here's what my button (id8) HTML looks like:
>
> <button class="pure-button" type="button" id="id8">
> <i class="fa fa-cloud-upload"></i>
> Go!
> </button>
> </div>
>
> id7 is indeed the ID of the feedback <div> (which starts out empty anyway).
>
> Garret
>
> P.S. A few IDs and strings were changed here and there to generalize the
> code.
>
>
> On 11/13/2014 7:50 PM, Martin Grigorov wrote:
>
>> Hi,
>>
>> On Thu, Nov 13, 2014 at 11:36 PM, Garret Wilson <ga...@globalmentor.com>
>> wrote:
>>
>> Hi, all. I've done a bit of searching to find the answer, and nothing
>>> quite seemed to fit, or was obsolete, or was deprecated, or was vague. So
>>> I'll ask on the list.
>>>
>>> I have a page that uses a multipart form submit. It allows the user to
>>> select a file, and has an AjaxSubmitLink with the label "Go" that 1)
>>> uploads a large file and then 2) does something that takes a long time.
>>> When finished, it calls info("finished!") to show a success message in
>>> the
>>> feedback area.
>>>
>>> So let's suppose that the user selects a file and selects "Go". After the
>>> file is uploaded, the processing takes place and the feedback area says
>>> "finished!" Perfect.
>>>
>>> Question: If the user selects /another/ file and selects "Go" /again/,
>>> how
>>> can I immediately remove the "finished!" message, either A) as soon as
>>> the
>>> user selects "Go" or B) as soon as the file finishes uploading but before
>>> processeing starts? (I greatly prefer option B.)
>>>
>>> How is your JavaScript ?
>>
>> For A)
>> AjaxSubmitLink(...) {
>> @Override protected void updateAjaxAttributes(attrs) {
>> attrs.getAjaxCallListeners().add(new
>> AjaxCallListener().onBeforeSend("$('#'"+feedback.
>> getMarkupId()+").empty();"))
>> }
>> }
>>
>> For B)
>> I can imagine this only with WebSockets.
>> With HTTP 1.1 the Ajax response should be complete to be flushed to the
>> client by Wicket.
>> With WebSockets you can push data at any point of the request processing.
>> If you choose to use Wicket Native WebSockets then see
>> WebSocketRequestHandler#push(String). You can push JSON that tells the
>> client side WebSocket listener at the browser to do the same as the JS in
>> A)
>>
>>
>> Thanks,
>>>
>>> Garret
>>>
>>>
>
Re: clearing feedback messages on Ajax upload
Posted by Garret Wilson <ga...@globalmentor.com>.
I actually mistyped; I greatly prefer option A, not B, below. So Martin,
your suggestion sounds good.
My JavaScript is great, but my JQuery is not so hot. I added your code
and... my AjaxSubmitLink now no longer performs an upload at all. Here's
the script that's being added to the page:
<script type="text/javascript" >
/*<![CDATA[*/
Wicket.Event.add(window, "domready", function(event) {
new Wicket.WUPB('id4', 'id5', 'id6',
'../resource/org.apache.wicket.Application/org.apache.wicket.extensions.ajax.markup.html.form.upload.UploadProgressBar?upload=5',
'id3', 'Upload starting...');;
Wicket.Ajax.ajax({"u":"./com.example.ExamplePage?5-4.IBehaviorListener.0-form-go","m":"POST","c":"id8","f":"id4","mp":true,"sc":"go","bsh":[function(attrs,
jqXHR, settings){$('#'id7).empty();}],"e":"click"});;
;});
/*]]>*/
</script>
Here's what my button (id8) HTML looks like:
<button class="pure-button" type="button" id="id8">
<i class="fa fa-cloud-upload"></i>
Go!
</button>
</div>
id7 is indeed the ID of the feedback <div> (which starts out empty anyway).
Garret
P.S. A few IDs and strings were changed here and there to generalize the
code.
On 11/13/2014 7:50 PM, Martin Grigorov wrote:
> Hi,
>
> On Thu, Nov 13, 2014 at 11:36 PM, Garret Wilson <ga...@globalmentor.com>
> wrote:
>
>> Hi, all. I've done a bit of searching to find the answer, and nothing
>> quite seemed to fit, or was obsolete, or was deprecated, or was vague. So
>> I'll ask on the list.
>>
>> I have a page that uses a multipart form submit. It allows the user to
>> select a file, and has an AjaxSubmitLink with the label "Go" that 1)
>> uploads a large file and then 2) does something that takes a long time.
>> When finished, it calls info("finished!") to show a success message in the
>> feedback area.
>>
>> So let's suppose that the user selects a file and selects "Go". After the
>> file is uploaded, the processing takes place and the feedback area says
>> "finished!" Perfect.
>>
>> Question: If the user selects /another/ file and selects "Go" /again/, how
>> can I immediately remove the "finished!" message, either A) as soon as the
>> user selects "Go" or B) as soon as the file finishes uploading but before
>> processeing starts? (I greatly prefer option B.)
>>
> How is your JavaScript ?
>
> For A)
> AjaxSubmitLink(...) {
> @Override protected void updateAjaxAttributes(attrs) {
> attrs.getAjaxCallListeners().add(new
> AjaxCallListener().onBeforeSend("$('#'"+feedback.getMarkupId()+").empty();"))
> }
> }
>
> For B)
> I can imagine this only with WebSockets.
> With HTTP 1.1 the Ajax response should be complete to be flushed to the
> client by Wicket.
> With WebSockets you can push data at any point of the request processing.
> If you choose to use Wicket Native WebSockets then see
> WebSocketRequestHandler#push(String). You can push JSON that tells the
> client side WebSocket listener at the browser to do the same as the JS in A)
>
>
>> Thanks,
>>
>> Garret
>>
Re: clearing feedback messages on Ajax upload
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
On Thu, Nov 13, 2014 at 11:36 PM, Garret Wilson <ga...@globalmentor.com>
wrote:
> Hi, all. I've done a bit of searching to find the answer, and nothing
> quite seemed to fit, or was obsolete, or was deprecated, or was vague. So
> I'll ask on the list.
>
> I have a page that uses a multipart form submit. It allows the user to
> select a file, and has an AjaxSubmitLink with the label "Go" that 1)
> uploads a large file and then 2) does something that takes a long time.
> When finished, it calls info("finished!") to show a success message in the
> feedback area.
>
> So let's suppose that the user selects a file and selects "Go". After the
> file is uploaded, the processing takes place and the feedback area says
> "finished!" Perfect.
>
> Question: If the user selects /another/ file and selects "Go" /again/, how
> can I immediately remove the "finished!" message, either A) as soon as the
> user selects "Go" or B) as soon as the file finishes uploading but before
> processeing starts? (I greatly prefer option B.)
>
How is your JavaScript ?
For A)
AjaxSubmitLink(...) {
@Override protected void updateAjaxAttributes(attrs) {
attrs.getAjaxCallListeners().add(new
AjaxCallListener().onBeforeSend("$('#'"+feedback.getMarkupId()+").empty();"))
}
}
For B)
I can imagine this only with WebSockets.
With HTTP 1.1 the Ajax response should be complete to be flushed to the
client by Wicket.
With WebSockets you can push data at any point of the request processing.
If you choose to use Wicket Native WebSockets then see
WebSocketRequestHandler#push(String). You can push JSON that tells the
client side WebSocket listener at the browser to do the same as the JS in A)
> Thanks,
>
> Garret
>