Giter Club home page Giter Club logo

Comments (10)

sheibeck avatar sheibeck commented on July 29, 2024 2

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 above). So, you really are just passing around a JSON object.

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. :)

from formeo.

sheibeck avatar sheibeck commented on July 29, 2024 1

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.

from formeo.

guillermofr avatar guillermofr commented on July 29, 2024

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

from formeo.

guillermofr avatar guillermofr commented on July 29, 2024

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.

from formeo.

sheibeck avatar sheibeck commented on July 29, 2024

from formeo.

guillermofr avatar guillermofr commented on July 29, 2024

that is the issue xD

thanks to confirm the same error

from formeo.

santosh-k1 avatar santosh-k1 commented on July 29, 2024

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));

from formeo.

jonamariya avatar jonamariya commented on July 29, 2024

@guillermofr @sheibeck did you guys found a way for reloading the editor without refreshing the page?

from formeo.

ryleeferguson avatar ryleeferguson commented on July 29, 2024

@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);
}

from formeo.

NomanAhmed6352 avatar NomanAhmed6352 commented on July 29, 2024

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));

from formeo.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.