Save button modifications

[casanovax7]

I have been struggling with this and it might be a really easy fix. I keep having my users complain that they lose work because they forget to save. It's a very long form, but I would have thought that losing work once or twice would be enough to force them to remind themselves to save. It isn't. And so after giving her the easiest-way-to-gather-data-EVER cookie, my boss wants a glass of milk.

I would like to implement one of the following solutions, but I am really having trouble figuring out how to do even one of them:

1. Increase the size of the save button, make it red and bold, and have it at a certain fixed position at the top of the screen (so that no matter where they are in the form it is easy enough to click the save button)
2. Place a red, bold copy of the save button in each of the field groupings we have (there are 11 field groupings)
3. Automatically save the form every 60-90 seconds without refreshing the page

I have really been trying hard to figure this out. IF ANYBODY can give me some kind of help, I would really appreciate it. Thanks!

[shannah]

The easiest solution is making the save button big and bold since you can do this with straight CSS. Doing automatic saves is possible with a little Javascript I suppose, but there are edge cases that make a "good" solution more involved. Have you considered adding an onbeforeunload handler to the window?
http://stackoverflow.com/questions/1270 ... foreunload

You could make it semi-intelligent by attaching "change" handlers to the fields on the form to set a "dirty" flag, and then only display an alert on unload if the dirty flag is set.

This is a modification that would be quite easy to implement as a module (to make it reusable), but I don't think anyone has done it yet.

[casanovax7]

I apologize for my ignorance, but I am all turned around with this CSS. I guess I just need to figure out what code controls the look of the save button specifically... Firebug isn't helping me at all... If I could just get pointed in the right direction I'm sure I could figure most of it out. Sorry for being a bother.

[casanovax7]

I guess I should clarify; I know what CSS I would apply to the save button, I'm just not sure how to apply a class or id to the save button itself that will allow me to style it...

[casanovax7]

I stopped thinking about it in terms of editing the Save button and finally just decided to try to create a duplicate of the save button. Added the following to the delegate class for the table:

Code: Select all

function block__before__widget(){
   echo"<input type=\"submit\" value=\"SAVE!\" name=\"--session:save\" id=\"savebutton\">";
}

And then added the following to my CSS:

Code: Select all

#savebutton {
    background-color: red;
    top: 400px;
    color: white;
    font-weight: bolder;
    left: 2%;
    margin-top: -2.5em;
    min-height: 55px;
    position: fixed;
    width: 8em;
    box-shadow: 0px 0px 10px #000;
}

That gives me a duplicate of the save button that floats on the left of the screen. Please correct me if there are any fundamental errors with doing things that way. Thanks, and keep up the great work on this TERRIFIC software!