Uncommitted changes information - how to ?

Question

<p>
Hi,
</p>
<p>
I'm looking for solution like I have in application created by <strong>JHeadstart</strong>. When user is on the page with input components and wants to leave this page (without saving changes) , he should get JavaScript message like on this image. When he press OK all non saved changes (or new empty row) should be removed. Let following scenario:
</p>
<p>
1) User inserts any data into form on <font color="#ff0000">PageOne</font>
</p>
<p>
2) Then press link on the menu and go to <font color="#ff0000">PageTwo</font> with another input form.
</p>
<p>
3) He press commit and all changes (from both forms) are saved - <font color="#ff0000">shouldn't be</font>.
</p>
<p>
The questions are:
</p>
<p>
<font color="#ff0000">1) How to create JavaScript message about uncommitted changes (image above).</font>
</p>
<p>
<font color="#ff0000">2) How to obtain functionality, If user press OK all unccommitted changes or new data are removed</font>
</p>
<p>
Have anyone had similar problem and solved that ?
</p>
<p>
Kuba
</p>

Answer 1

Hi Kuba,
I wanted to have similar functionality as you described. I gave up after few days. Maybe you will be more successful.
a) you have to check state of all editable fields (javascript function)
b) you have to check model changes (for example bindings.commit.enabled == true)
I end up with disabling menu navigation on pages you could leave only when everything is commited or rollbacked. Why ask user what to do? Just give him only two options (without dialog): a) commit changes and navigate or b) rollback changes and navigate. Of course this is not applicable everywhere.
Back to your questions:
1) I believe there is a way to check all input field change in javascript (value vs. defaultValue)
2) For example you can create rollback and commit buttons with inlineStyle set to "display: none" (invisible buttons). These button are programmaticaly invokable from javascript by document.getElementById('buttonid').click()
Rado