take a look at this fiddle
I have created code so that whenever the user goes to edit the servicename input(hair in the example) the word update gets pushed into the originals array.lines 1(array),6(method to push).
The problem is that if the user adds/removes 3(for example) chars the array will be filled with the identical value many times(3, for the example).
How can I avoid that?
regardless of the chars added or removed “update” must be pushed only once in the array.
Go test it yourself.
Why do you add the original to an array, when you can get the initial starting value from the input fields defaultValue property.
Sorry…but I do not understand what are you talking about.
Originals is the array and I add to it the string “update”.
[quote=“designtrooper, post:3, topic:296920, full:true”]Sorry…but I do not understand what are you talking about.
Originals is the array and I add to it the string “update”.
[/quote]
Are you wanting to keep a record of what the input field originally contained?
Here’s an example using defaultValue to get the original starting default value of fields, even after you’ve made many changes to them.
<button class="showOriginal">Show default values</button>
document.querySelector(".showOriginal").addEventListener("click", function (evt) {
var inputs = document.querySelectorAll("input");
var defaultValues = Array.from(inputs).map(function (input) {
return input.defaultValue;
});
console.log(defaultValues);
});
You can access the defaultValue property of form fields at any time, for when you want to reset one of them to its starting value.
You can play with the example code at https://jsfiddle.net/4ao7j5s7/18/
I AM NOT INTERESTED IN GETTING any default values.
I just want when the user goes to edit the input field(hair) a value (update) gets passed to an array…
Read post#1 again…
keyup triggers every time the user pushes a key. Change your trigger to just ‘change’.
If the goal is to just have update only get set once, no matter how many actual changes have occurred, set update as a flag instead.
var update = false;
on (do all the things) {
update = true; //Doesnt matter if this runs multiple times.
You dont appear to care about the -location- of update in the array, dont do anything with the array, and only want it once. So… what’s the point of putting it in the array? Just leave it as a boolean and act on it accordingly when you evaluate the array for a purpose.
I guess the most reliable way to do so would still be checking for their .defaultValues as suggested by @Paul_Wilkins, so you don’t have to manually maintain such an array (including taking care of duplicates etc.)… like
var getUpdatedInputs = function () {
var inputs = document.querySelectorAll('input')
return Array.from(inputs).filter(function (input) {
return input.value !== input.defaultValue
})
}
You might then also .map() the returned array to "updated" strings, if this is what you absolutely want… although I’m wondering in what way such a list of equal strings could serve any useful purpose.
In repyling…I am afraid I will be lengthy…but it is necessary though.
You said to set a flag…(more or less) that was the scheme I had before considerting the array. More precisely I had an object property and set it’s value accordingly:
originals.status='update';
But there is a problem with the above…look at this fiddle
When cliciking the user has the option of adding a service(click add) or updating/editing on of these who already exist.
Depending what is done a flag is set(in the corresponding handlers) line 180 and line 39.
As you see though the value is assigned to the same object property(probably wrong)…now… this info must be sent to the server-so that different functions get called.
There is a scenario though where the user may add AND update a service…hence I chose to store the values in an array.
After having read the above what is your suggestion?
First impulse: Every change is a change, whether its an update or an add. The -server side- is the one to catch that and fix it. Keep in mind that many backend storage systems have mechanisms for this (INSERT…ON DUPLICATE KEY UPDATE, for MySQL for example).
As for how I’d handle it, as been stated previously, you dont care about the state of the system until you need to commit your changes. At that time, compare your form’s current state to its original state, and submit changes as necessary.
Rather than catching a change when it happens, evaluate all changes at submission time.
For example: If I change a service name from “Hair” to “Haircut”, you register a change. If I then change it back to “Hair” before saving… you register another change. But I haven’t actually changed anything that your system needs to update, because it already had the information in place.
If you’re wanting to make a copy so that you can return the form values back to what they started at when someone cancels editing, an easier way is to just make a copy of the form.
var form = ...
var formBackup = Object.create(form);
...
if (cancelEdit) {
form.replaceWith(formBackup);
}
I totally agree with what you say…the only question is if it is better to use an array or variable assignment (as you say) for storing the state.
I told the arguments for using an array…
What do you think?
Well you dont… need to store the state.S’what people have been telling you since the start.
Let me quote something to you…
… the default values ARE one of the states. They’re the original state of the form.
<input class="services text" size="40" data-value="hair" value="hair" type="text" data-name="service0" >
^ Default value.
The current state of the form can be retrieved at the same time by reading the current value of each form row’s elements…
What you may want to do is forEach across the set of wrapper_servp classed DOM objects ($(".wrapper_servp") ), especially since you’re going to be looking into <span> tags for some of the data (Incidentally, I’d recommend some hidden input elements to make that data more accessible.)
Your goal then, becomes essentially to be able to construct 2 arrays of objects, the original state and the current one, and find the difference between the two.
Filter the Current array such that it contains only elements that do not match an item in the Original array.
Submit that filtered array to the backend. (Alternatively, just send the whole current array to the backend and sort it out there, but that’s more of a system-intensive process, because the backend does not inherently know the original state of the form.)
That doesn’t seem to be relevant though, for each time the Edit button is used, the current state at that time before editing needs to be saved instead for when someone chooses to cancel the current edit.
Is that right, @designtrooper ?
we have discussed enough theory so far…take a look at this fiddle example and tell me what you think.
Note the following:
ajax request
line 114…the logic is displayed here…syntactically is wrong of course
save handler
line 95
line 100
line 109
setting flags
line 41
line 179
line 208
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.