Forums

Hi all,

I am trying to find a solution to a long standing problem on one of our web applications. Essentially, the problem is that the user has the ability to press a button, and then press a second button before the first has finished processing. This means that data is being left unsaved, or, saved against the wrong items. I have tried many things to stop this happening, but it seems that the process for button 1 completes and the process for button 2 begins, before the HTML page has been refreshed, therefore when the text boxes etc are referred to, it is picking up the data that was valid when button 1 was pressed.....

I hope that makes some sense....

Anyway... The obvious solution would be to disable the buttons when they are pressed, so that further clicks cannot be made, then re-enable them after the first process has completed. The problem is, the process completing requires knowing that the user's browser has finished displaying the new HTML page - which i cannot be sure of. So when i try disabling the buttons, they either re-enable to quickly - and still allow the user to press them again - or, they never get re-enabled. And the user is stuck...

So now i have started looking into the possibility of using a Java Applet to control the way the user navigates around the screen in question - i.e. the buttons are not Jade controls... I figure that because Javascript is local to the user's PC that re-enabling the buttons at the right time would be easier.... Am i correct in thinking this???

Has anybody got any examples of how to incorporate applets into Jade Web Enabled Forms? I am using Jade 6.2.17 and am hoping that this functionality will be possible? Even if applets don't solve this problem, knowing how to incorporate them into our application will be very useful to know for other things!


Any help will be greatly appreciated!

Cheers,

Rich

Hi Rich,
It sounds like javascript is the way to go. I have never used the Jade Web Enabled Forms technology before to get a Jade app onto a webpage (I prefer AJAXy style websites), so can't be precise how to make this work from within Jade. It sounds like what you need is a javascript handler on the button click that does something like this:

onClick="disableOtherControls(); return true;"

The "return true" ensures that the default button behaviour still happens (i.e. that it still submits). If that doesn't work, do a "form.submit()" instead.

the "disableOtherControls()" function can work a couple of ways: either find all input controls and disable them (this is all in javascript), or alterntively display a semi transparent mask on top of the entire page which prevents access to underyling controls. A danger with this approach is that some versions of IE still allow access to certain control types - in particular SELECT controls.

Here are some websites that may help:

http://social.msdn.microsoft.com/Forums ... 8db4db8a9e
http://ctrlf5.net/?p=32

This code can be put in a javascript file which is linked from the header of the page. I assume there is someway of doing that in a Jade Web Enabled form, but I'm unsure how.

You could make this whole thing generic so it happens automatically for all submit buttons. Doing this would be a matter of having a page onLoad handler which find all buttons and modifies the onClick handler on them. Javascript is a very powerful language in this regard.

Hope this helps.

Regards,
Allistar.

Hi Allistar,

Thanks for your reply!

I am glad that it seems i am on the right track with going down the Javascript route! I was half-wondering whether it wasn't a good option so it's good to hear it could work well. Thanks for your help and advice on setting up the onClick methods and for showing how a Javascript method can be called from within Jade - it's very helpful, along with the links you provided.

I do actually use the onLoad method already so i have no problems with using this again. Basically, rather than using the standard grey buttons available in the painter, i use a picture which i then use the WebEventMapping method within onLoad to map the click button of the invisible button onto the picture. This means the pictures act as the buttons. Much prettier!

If anybody knows how to extend this and can tell me where to actually write the Javascript code then that'd be very useful.

Cheers!

Rich

Hmmm I seem to recall something similar a little while ago...are you talking about the same info for this post...https://forums.jadeworld.com/viewtopic.php?f=11&t=1649

Hi andy-b,

Yes! I thought i had previously posted it on here! I couldn't remember for certain whether it was on here on via an email to somebody so figured i'd just repost it.

I tried your suggestion from the previous thread which successfully disabled the buttons once they were pressed. However, as you pointed out on that thread, it turned out to be tricky to re-enable them again. That is why on this post i highlighted the fact that i had tried some things that were either re-enabling to quickly or not doing it at all.

Your suggestions in that thread were very useful though - after trying that i was moved onto other projects so i haven't had a chance until now to re-address the issue. I hadn't realised i had left your post unanswered - sorry for that.

I apologise also for starting up a duplicate thread...

Any further help will be very appreciated

Rich

Haha, thanks Rich...I wasn't actually hassling you, I just thought it sounded familiar that's all

I was a web developer in my previous life before starting Jade programming so I know a little bit about the web side of things but not too sure of the Jade Web Forms model so don't really know what can be manipulated for you to get the result you are after.

I would agree that using JavaScript on the client side is the way to go. Ok is good that we have established that you can disable the buttons. The fact that the buttons do not re-enable would leave me to believe that Jade must be using some AJAX type functionality to load your data (i.e. the whole webpage is not refreshed when pressing the next button and retrieving a new set of data).

Which brings you to your current problem of finding a client side event to fire once a request has been received (which you can then use to re-enable your buttons). Do you know if the data you are displaying on your webpage is supplied by a web service??

Thanks
Andrew

Hi Andrew - sorry for the delayed reply, i was on annual leave last week.

The data that is on the web page is not provided by a web service, no. The data is just passed as variables from the database and put into the controls in exactly the same way as the usual thin client would work.

What you say regarding the AJAX style functionality makes a lot of sense. At the start of these problems i actually struggled to find when the new textboxes became "active". i.e. There were occasions where i'd refer to the value of a textbox, after updating it and finding that the value was still the previous one (i.e. a delay on when the textbox was actually updated).

So, if i were to do the following:
The value of n2 would sometimes still return a blank string, as the text box hadn't actually finished being displayed to the user, therefore the value of n hadn't yet been included. This will differ depending on where n2 is read. (Note: The above is just an example that came into my head - i appreciate that it's a rubbish example and you wouldn't ever write it ).

Anybody used client side events in Jade Web Enabled Forms like andy-b has suggested?

Cheers,

Rich

Hello,

I have tried the above suggestions to try and solve this problem but i am finding similar problems as i did beforehand. Either, the button is disabled upon entering the screen, or it never gets disabled once on the screen.

This happened for all examples in the links posted above so i'm fairly confident it's the way i am calling these methods that is incorrect, rather than the methods themselves. specifically, how to call these methods and ensure they are triggered at the right time. I think the confusion is that i'm already using webEventMappings so that i can use pictures as buttons, and we are also using a little Javascript to validate textboxes... maybe it's just all getting a bit confused...

If anybody has used javascript in any way similar to this before then i'd be very grateful if you could share your experiences... I'm afraid i may need someone to hold my hand and lead me through this one...

Cheers for everything so far!

Rich

Hello,

I have an update for this thread that i wanted to share - though i still haven't got a fully working solution yet!

I have used the following script to disable every element on the screen once the button has been pressed:
I call this using a webEventMapping method for the picture object being pressed (the button). Like so:
The only remaining problem i now have is that the pictures are not being disabled. Everything else is being set to disabled, apart from the pictures. This means the user is still able to click them again after the original click. If i just use the standard Jade Buttons then this method works perfectly as the buttons are disabled, but using pictures to map events is proving awkward.

Does anybody have any suggestions as to how i can disable the picture objects too?

Any help will be appreciated.

Cheers,

Rich

Rich, not sure I am totally interpreting this general thread correctly, but if you simply want to stop re-posts and the images you are talking about are image buttons like..

<input type="image" src="someinage.gif" name="image" width="60" height="60">

Then a way of doing it is to include this javascript in your page...
... and then add an attribute

onclick="return trySubmit();"

to each input control.

Not sure if I have interpreted your whole scenario correctly, but that is a way of stopping re-posts. The "submittedAlready" variable remains true until the page has been refreshed.