Retain old value of textbox

Question

1.00/5 (2 votes)

See more:

Hi,

I have edit,view,cancel functionality in a page.

view

I have a ng repeat. Inside ng-repeat i am creating span whose value comes from db.

Edit
on edit functionality, I show those span values in textbox(input type text).

Now user edits a textbox,
Once the editing is done, user will click on save,to save it in db.

Doubt:
If user clicks cancel, i need to retain the old value of all the edited textboxes that has come for db.

I tried with angular.copy to keep the original array. then if it is cancelled will replace the model back with the copied array. But this approach impacts performance if i have so many cells, if only one cell is edited no need to do angular copy for all.

i tried with ng-change.and i am able to get the old values, but I don't want to use ng-change as it will be called everytime as i need to get the old value once.

So I thought of ng-focus. So once the textbox is focussed, will copy the old value in an array. Then user edits the text box. But if we move to other textbox and come back again to previous textbox I don't want to call the focus again as i have already the old value for that textbox.

So is there any way to restrict focus function(javascript function) once.

Or is there any other approach which I can use?

Posted 26-Nov-15 5:03am

anurag19289

Updated 26-Nov-15 7:43am

phil.o

v2

Add a Solution

Comments

Krunal Rohit 26-Nov-15 23:51pm

Maybe you can use the browser cache. Google "localStorage in HTML".

-KR

2 solutions

Solution 2

What about putting the original values in a JSON object. If the user cancels the update, the values can be restored from the JSON object.

Posted 27-Nov-15 8:50am

Doug J. Huras

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-11-26T18:47:00

It cannot impact performance significantly, if you do it right. The reason should be pretty obviously. Let's say, the user goes into some "editing session" which is ended by either committing changes, or cancelling them all together. But the user cannot physically edit so many text values in one session to that extend where the reverting them to the original values can take any noticeable time.

But of course you still get into trouble if you do it in some silly way; for example, if you preserve the copy of all data which is accessible for modification; if the number of such control is huge (which however itself would be a sign of questionable application design), and if you preserve the values of all of them, I can imagine that it would take too much time, and also the system memory.

But it won't be ever a problem if you preserve the data selectively. How? In a pretty simple way: on each control, handle the change event: https://developer.mozilla.org/en-US/docs/Web/Events/change[^].

If the event is invoked in some input control, its value might be changed. (I say "might" because it's possible that you, say edit some text and then restore it manually to the same value as before editing; but let's consider such control as "modified", too, with some redundancy.) If not, there is no need to preserve the value. So, you have some collection object representing the "change set". When you capture the change event on some control, first add the reference to the control and its current value to the change set object, each value coming with its unique key, such as the control id. At the end of the session, you will need to restore the values on Cancel. Now, remember that JavaScript objects provide time complexity of O(1) for search of the object by key. The biggest object I testes the JavaScript performance with was the dictionary with 65513 entries; and the performance if the search by the key was blazing fast, the delay cannot even be noticed by a human. You will traverse through all the key properties of the change set object, get the object reference by the key and value by the value and restore it. It will take no time.

There are couple of problems here: 1) the event is not invoked immediately; you need, in particular, move the keyboard focus out of it, 2) the event is handled when new value is already entered, so, essentially, you loose original value. First one is not really a problem, because you only need this functionality before you use the changed value. Both problems can be solved by using shadow values for all controls. Say, you can add a new property shadowValue to each control and update it from "real" value property on each change. This way, you will have the "previous" value stored in shadowValue.

And this is the basic JavaScript functionality; you don't need any libraries.

Now, alternative approach is to use transactional feature of the database. Start transaction, use the data-bound control to change the database data, of change modify it based on UI states in any other way, and on Cancel roll back.

—SA