HTML/JS: How we bind a JSON variable to HTML elements
1 post
• Page 1 of 1
HTML/JS: How we bind a JSON variable to HTML elements
We would like to share what we do to update multiple HTML elements with JS and a JSON variable.
First, the HTML element must have a 'data-bind' attribute that is using a global JSON variable:
Second, you call the following function with a container that will execute the content of all the data-bind attributes:
And to save values to a global JSON variable:
Comments and suggestions for improvements are welcome.
First, the HTML element must have a 'data-bind' attribute that is using a global JSON variable:
- Code: Select all
<label data-bind="_SchAbv[_Status.DB.Control[_KI]]"></label>
Second, you call the following function with a container that will execute the content of all the data-bind attributes:
- Code: Select all
function LoadFromData(containerID) {
// Write the value of a global variable to the inputs. Works with 'SaveFormData'
// Valid expression is included in the data-bind attribute.
// containerID = ID of the DIV container with the #
let temp = "not initialize";
try {
// Write the global variable to all the number inputs.
let inputNumber = document.querySelectorAll(containerID + " input[type=number][data-bind]");
inputNumber.forEach(obj => obj.value = eval(temp = obj.dataset.bind));
// Write the global variable to all the number texts.
let inputText = document.querySelectorAll(containerID + " input[type=text][data-bind]");
inputText.forEach(obj => obj.value = eval(temp = obj.dataset.bind));
// Write the global variable to all the checkbox inputs.
let inputCheckbox = document.querySelectorAll(containerID + " input[type=checkbox][data-bind]");
inputCheckbox.forEach(obj => obj.checked = Boolean(eval(temp = obj.dataset.bind)));
// Write the global variable to all the email inputs.
let inputEmail = document.querySelectorAll(containerID + " input[type=email][data-bind]");
inputEmail.forEach(obj => obj.value = eval(temp = obj.dataset.bind));
// Write the global variable to all <label>s.
let inputLabel = document.querySelectorAll(containerID + " label[data-bind]");
inputLabel.forEach(obj => obj.innerHTML = eval(temp = obj.dataset.bind));
// Write the global variable to all the <select>s.
let inputSelect = document.querySelectorAll(containerID + " select[data-bind]");
inputSelect.forEach(obj => obj.value = eval(temp = obj.dataset.bind));
// Write the global variable to all the <td>s.
let inputTd = document.querySelectorAll(containerID + " td[data-bind]");
inputTd.forEach(obj => obj.innerHTML = eval(temp = obj.dataset.bind));
// Write the global variable to all the <text> inputs
let Text = document.querySelectorAll(containerID + " text[data-bind]");
Text.forEach(obj => obj.innerHTML = eval(temp = obj.dataset.bind));
// Write the global variable to all the <textarea> inputs
let Textarea = document.querySelectorAll(containerID + " textarea[data-bind]");
//Textarea.forEach(obj => obj.innerHTML = eval(temp = obj.dataset.bind));
//Textarea.forEach(obj => obj.value = decodeURI(eval(temp = obj.dataset.bind)));
Textarea.forEach(obj => obj.innerHTML = decodeURI(eval(temp = obj.dataset.bind)));
// Write the global variable to all the <polyline>
let polyline = document.querySelectorAll(containerID + " polyline[data-bind]");
polyline.forEach(obj => obj.setAttribute("points", eval(temp = obj.dataset.bind)));
} catch {
MessageBox(1000, "LoadFromData Error evaluating: " + temp);
}
}
And to save values to a global JSON variable:
- Code: Select all
function SaveToData(containerID) {
// Write the value of inputs[number, checkbox, email] and <select> to a global variable.
// Valid expression is included in the data-bin attribute.
// containerID = ID of the DIV container with the #
let temp = "not initialize";
try {
// Write all Number inputs to the global variable.
let inputNumber = document.querySelectorAll(containerID + " input[type=number][data-bind]");
inputNumber.forEach(obj => eval(temp = obj.dataset.bind + " = " + obj.value));
let inputText = document.querySelectorAll(containerID + " input[type=text][data-bind]:not([disabled])");
inputText.forEach(obj => eval(temp = obj.dataset.bind + " = " + obj.value));
// Write all the Checkbox inputs to the global variable.
let inputCheckbox = document.querySelectorAll(containerID + " input[type=checkbox][data-bind]");
inputCheckbox.forEach(obj => eval(temp = obj.dataset.bind + " =" + Number(obj.checked)));
// Write all the Email inputs to the global variable.
let inputEmail = document.querySelectorAll(containerID + " input[type=email][data-bind]");
inputEmail.forEach(obj => eval(temp = obj.dataset.bind + " = '" + obj.value + "'"));
// Write all the Selects to the global variable.
let inputSelect = document.querySelectorAll(containerID + " select[data-bind]");
inputSelect.forEach(obj => eval(temp = obj.dataset.bind + " = '" + obj.value + "'"));
// Write all the TextArea to the global variable.
let Textarea = document.querySelectorAll(containerID + " textarea[data-bind]");
Textarea.forEach(obj => eval(temp = obj.dataset.bind + "='" + _escape(obj.innerHTML) + "'"));
} catch {
MessageBox(1000, "SaveToData Error evaluating: " + temp);
}
}
Comments and suggestions for improvements are welcome.
-
PGilbert - Posts: 436
- Joined: Sun Dec 13, 2009 8:46 pm
- Location: Montréal, Québec, Canada
1 post
• Page 1 of 1
Who is online
Users browsing this forum: No registered users and 1 guest
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group