Re: clearing feedback messages on Ajax upload
On Fri, Nov 14, 2014 at 1:47 AM, Garret Wilson gar...@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 gar...@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
gar...@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.
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
Hi,
On Thu, Nov 13, 2014 at 11:36 PM, Garret Wilson gar...@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
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 gar...@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
On Fri, Nov 14, 2014 at 12:36 AM, Garret Wilson gar...@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 gar...@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
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 gar...@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 gar...@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
