Open guillermofr opened 6 years ago
i saw your post about setting a second parameter on constructor to load data. But this fails if you make a second call of formeo, the first time is OK
Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
Im doing something like this this.formeo = new window.Formeo(this.formeo_options, this.saved_data);
any tip of load a second time?, i need to reset to defaults the form
You should be able to render a formeo form by calling:
var formeo = new Formeo(<formeoOptions>, <formeoFormJson>);
formeo.render(<containerToRenderFormTo>)
I use
JSON.stringify(JSON.parse(formeoObj.formData))
To save and the form data and I store it in a DB (this is what would go in
I'm using formeo to run my website and it's simple and fast. You can view my code here if you want to take a look at how I implemented it (specifically you'll want to check out Scripts/tpn.charactersheet.js)
I just need to figure out how to add some custom options in the floating tool menu on the right. :)
can you call a second time the function tpn_charsheet.initFormeo, of your code @sheibeck, to check if formeo crashes to you too when you init formeo while a formeo instance is loaded?
i can load data perfectly first time, the problem is loading a second time to reset the form without reloading the page.
I hadn't tried reloading the form without reloading the page since that isn't part of the architecture I need at the moment. I'll give it a shot and let you know.
On Tue, Oct 3, 2017 at 7:14 AM Guillermo Fernández notifications@github.com wrote:
can you call a second time the function tpn_charsheet.initFormeo, of your code @sheibeck https://github.com/sheibeck, to check if formeo crashes to you too when you init formeo while a formeo instance is loaded?
i can load data perfectly first time, the problem is loading a second time to reset the form without reloading the page.
— You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/Draggable/formeo/issues/93#issuecomment-333811368, or mute the thread https://github.com/notifications/unsubscribe-auth/AHgoYKnyo5xX20XkqR9ebkO1LtFpEYcIks5sohcLgaJpZM4PkECu .
After the initial call to initFormeo(), if I call it again i get:
Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
at e.render (http://localhost:15895/Scripts/formeo.min.js:6:63513)
So, no, I'm not able to call it a second time. But, I also only have the minified version of formeo, so it's hard to tell if it's really an issue with formeo, or the way I have my architecture set up.
that is the issue xD
thanks to confirm the same error
we can load the data on-page load by using below concepts
var formJSONData = {
"id": "51100a54-1370-494a-8ad6-9d934c593623",
"settings": {},
"stages": {
"6ded269e-27f5-441b-835f-8bb8751ba0e8": {
"id": "6ded269e-27f5-441b-835f-8bb8751ba0e8",
"settings": {},
"rows": [
"aae2d953-e7ec-44bf-ad0b-a5fbce738372"
]
}
},
"rows": {
"aae2d953-e7ec-44bf-ad0b-a5fbce738372": {
"columns": [
"3d4c10e2-5255-4051-8c8b-53bd048e2787",
"3fe2f05c-754b-4cc7-8443-a67cc2e8fbc6"
],
"id": "aae2d953-e7ec-44bf-ad0b-a5fbce738372",
"config": {
"fieldset": false,
"legend": "",
"inputGroup": false
},
"attrs": {
"className": "f-row"
}
}
},
"columns": {
"3d4c10e2-5255-4051-8c8b-53bd048e2787": {
"fields": [
"txtUserName"
],
"id": "3d4c10e2-5255-4051-8c8b-53bd048e2787",
"config": {
"width": "50%"
},
"style": "width: 50%",
"tag": "div",
"content": [
{
"tag": "input",
"attrs": {
"type": "text",
"className": "form-control"
},
"config": {
"label": "Santosh"
},
"meta": {
"group": "common",
"icon": "text-input"
},
"fMap": "attrs.value",
"id": "txtUserName"
}
],
"attrs": {
"className": [
"f-render-column"
]
}
},
"3fe2f05c-754b-4cc7-8443-a67cc2e8fbc6": {
"fields": [
"b811d59b-5191-4de7-baab-52d931317a09"
],
"id": "3fe2f05c-754b-4cc7-8443-a67cc2e8fbc6",
"config": {
"width": "50%"
},
"style": "width: 50%",
"tag": "div",
"content": [
{
"tag": "select",
"config": {
"label": "Project"
},
"attrs": {
"className": "form-control"
},
"meta": {
"group": "common",
"icon": "select",
"id": "select"
},
"options": [
{
"label": "select",
"value": "select",
"selected": true
},
{
"label": "Option 2",
"value": "option-2",
"selected": false
}
],
"id": "b811d59b-5191-4de7-baab-52d931317a09"
}
],
"attrs": {
"className": [
"f-render-column"
]
}
}
},
"fields": {
"txtUserName": {
"tag": "input",
"attrs": {
"type": "text",
"className": "form-control"
},
"config": {
"label": "Santosh"
},
"meta": {
"group": "common",
"icon": "text-input"
},
"fMap": "attrs.value",
"id": "txtUserName"
},
"616c0063-e856-4dbe-8343-916bbf54f9e5": {
"tag": "input",
"attrs": {
"type": "text",
"className": "form-control",
"id": "Santoshk1"
},
"config": {
"label": "Santosh"
},
"meta": {
"group": "common",
"icon": "text-input"
},
"fMap": "attrs.value",
"id": "Santoshk1"
},
"b811d59b-5191-4de7-baab-52d931317a09": {
"tag": "select",
"config": {
"label": "Project"
},
"attrs": {
"className": "form-control"
},
"meta": {
"group": "common",
"icon": "select",
"id": "select"
},
"options": [
{
"label": "select",
"value": "select",
"selected": true
},
{
"label": "Option 2",
"value": "option-2",
"selected": false
}
],
"id": "b811d59b-5191-4de7-baab-52d931317a09"
}
}
}
var formeoNew = new Formeo(formeoOpts, JSON.stringify(formJSONData));
@guillermofr @sheibeck did you guys found a way for reloading the editor without refreshing the page?
@jonamariya @sheibeck @guillermofr I ran into this issue yesterday and was able to get it working.
It seems that somewhere in the code, the container
property gets unset in the options object.
When parsing your options to Formeo, make sure you do a deep copy of the object - I personally use jQuery's extend functionality:
var formeoOptions: {container: "#my-container"...},
builder;
function loadNewData(jsonDataAsString){
let opts = $.extend({},formeoOptions);
builder = new Formeo(opts,jsonDataAsString);
}
loadNewData(myJsonString);
To set the builder to blank, it's best to capture the initial builder.formData
var formeoOptions: {container: "#my-container"...},
finit = false,
blankjson,
builder = new Formeo($.extend({},formeoOptions));
$(document).on('formeoLoaded',function(e){
if(!finit){
// Use JSON.parse() and .stringify() to remove white space characters
// If not you'll get "\r\n" and "\t"'s in the formData, which will throw an error
blankjson = JSON.stringify(JSON.parse(builder.formData));
finit = true;
}
});
function loadNewData(jsonDataAsString){
let opts = $.extend({},formeoOptions);
builder = new Formeo(opts,jsonDataAsString);
}
function clearData(){
let opts = $.extend({},formeoOptions);
builder = new Formeo(opts,blankjson);
}
I want to set json data from database as we would use in FormBuilder simple actions.setdata but there is no such option here..
I am experiencing error "Uncaught ReferenceError: Formeo is not defined".
Can someone guide me where i am lacking.
var formeo = new FormeoEditor(formeoOptions); var renderedForm = new FormeoRenderer({ renderContainer: '#formeo-render', }); function FormRender() { renderedForm.render(formeo.formData); } var formeo = new Formeo(formeoOptions, JSON.stringify(myJSONData));
i dont find how to load a created form to edit it, is it possible to do with formeo?