Comments (4)
on the playground onChange, I added " in front of function, and then went to the end of the line and did delete, and then repeated end of line and repeat til all the function was on one line, then added "
and now the form passes validation
from jsonform.
in my app where I need to pass form resident onxxx functions to the web page, i collapse all to a single line, and use escape for any embedded "
like this
"onChange": "(evt,node)=>{let value=$(evt.target).val();let p=$(evt.target).attr('name').split('[');let n=p[0];let i=parseInt(p[1]);$(\"[value*='\"+n+\"']\").closest('.tab-pane').find('.tab-content').find(\"[data-idx='\"+i+\"'] >div >input \").val(value).trigger('change')}"
the whole form is converted to text (from object) using JSON.stringify, BUT you have to add handlers for the conversions, because stringify/parse don't handle functions by default
this is my form parser in the browser web page
function parseData(data) {
return JSON.parse(
data,
function (key, value) {
if (typeof value === "string") {
// only handle specified fields in jsonform
switch (key) {
case "onChange":
case "onClick":
case "onKeyUp":
// get the function from the string
// parens mean don't EXECUTE the function, just get its value
value = eval("(" + value + ")");
break;
}
}
return value;
}
);
}
my app uses socketio to send the all text content of the form to the web page from the server, and then the web page parses it (using function above) to an object that is then used to generate the form into the DOM like normal.
all this cause the function (onKey, OnChange...) aren't valid in JSON (as you've mentioned) and aren't executable in text form..(which is valid in JSON)...
and my 'form' is generated from some other code, so it can change frequently
// config socket events
activesocket.on("json", function (incoming_json) {
let data = parseData(incoming_json.slice(1, -1));
.
.
.
.
// replace any form from last connection
$("#result").html('<form id="result-form" class="form-vertical"></form>');
// insert the new form
$("#result-form").jsonForm(data);
here are the two JSON utility functions on the server side to process for embedded functions in the form
//
// used by JSON.stringify
//
function tohandler(key, value) {
if (typeof value === "function") {
return value + ""; // implicitly `toString` it
}
return value;
}
//
// used by JSON.parse
//
function fromhandler(key, value) {
if (
value &&
typeof value == "string" &&
(value.startsWith("(") || value.startsWith("function(")) &&
value.endsWith("}")
) {
return eval("(" + value + ")");
}
return value;
}
from jsonform.
Thank you for your answer. I can't try today but i will test this method tomorrow.
from jsonform.
With some adaptations for my case, this works great !
Thank you again.
from jsonform.
Related Issues (20)
- Add custom field to fieldset HOT 2
- activeClass isn't applied correctly for schemas with defaults HOT 2
- How to build a stepper form HOT 4
- process change, just fyi.. all PRs against develop branch
- Expanded Fieldset + Default TabIndex set - Collapse issue (bug) HOT 4
- tabs-left not supported in bootstrap v3
- Hide submit button HOT 2
- How to escape slash in scope HOT 3
- Rendering fails if property name contains dots HOT 1
- Missing array brackets [] on array items when using a custom field type HOT 1
- Error: JSONForm does not yet support schemas that use the $ref keyword. See: #54" HOT 2
- Boolean options are always true HOT 5
- How to use this library with bundler HOT 1
- How to show error after a control value is changed, HOT 1
- date / datetime formatting HOT 3
- Advancedfieldset form folding click handle gets duplicated when jsonform gets called again causing the folded form to flick HOT 6
- Textarea Rows HOT 2
- Fieldset along with the Select all checkbox. HOT 7
- Array binding issue HOT 7
- Swapping the images HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jsonform.