Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Uncaught TypeError: Cannot read properties of undefined (reading 'html.header') #377

Closed
JordanGarciaDev opened this issue Nov 26, 2024 · 7 comments · Fixed by #378
Closed

Uncaught TypeError: Cannot read properties of undefined (reading 'html.header') #377

JordanGarciaDev opened this issue Nov 26, 2024 · 7 comments · Fixed by #378
Labels
released

Comments

@JordanGarciaDev
Copy link

Error RenderForm
image

<!DOCTYPE html>
<html lang="es">
<!-- Formeo -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="./constructor/dist/formeo.min.js"></script>
<body>
<div class="m-content">
    <div class="row" style="font-size: 10px;">
        <div class="col-md-12">
            <div class="m-portlet m-portlet--tab">
                <div class="container-fluid">
                    <button id="render" class="btn btn-primary">Render</button>
                            <form id="formeo-container" class="rendered-form"></form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    const formData = `
{
    "id": "fad2086a-9d97-4c03-86a2-a166785ebd5a",
    "stages": {
        "3aa5b10e-2d14-4b27-b25f-dcb50a500d52": {
            "children": [
                "1d75eea7-930f-4064-8165-28be55be7854",
                "c1a1db4b-e0d3-4fa3-8dd9-03884fe1ca2d"
            ],
            "id": "3aa5b10e-2d14-4b27-b25f-dcb50a500d52"
        }
    },
    "rows": {
        "1d75eea7-930f-4064-8165-28be55be7854": {
            "config": {
                "fieldset": false,
                "legend": "",
                "inputGroup": false
            },
            "children": [
                "bed95027-f0ce-4e1d-ba85-96eab568c041"
            ],
            "className": [
                "formeo-row"
            ],
            "id": "1d75eea7-930f-4064-8165-28be55be7854"
        },
        "c1a1db4b-e0d3-4fa3-8dd9-03884fe1ca2d": {
            "config": {
                "fieldset": false,
                "legend": "",
                "inputGroup": false
            },
            "children": [
                "d557048e-e0c5-4d55-aad8-642b6d7a1276"
            ],
            "className": [
                "formeo-row"
            ],
            "id": "c1a1db4b-e0d3-4fa3-8dd9-03884fe1ca2d"
        }
    },
    "columns": {
        "bed95027-f0ce-4e1d-ba85-96eab568c041": {
            "config": {
                "width": "100%"
            },
            "children": [
                "ec625587-5501-4759-b26b-eb71707c1d16"
            ],
            "className": [
                "formeo-column"
            ],
            "id": "bed95027-f0ce-4e1d-ba85-96eab568c041"
        },
        "d557048e-e0c5-4d55-aad8-642b6d7a1276": {
            "config": {
                "width": "100%"
            },
            "children": [
                "45037eee-ce28-40ba-afa2-ce71d7620ca1"
            ],
            "className": [
                "formeo-column"
            ],
            "id": "d557048e-e0c5-4d55-aad8-642b6d7a1276"
        }
    },
    "fields": {
        "ec625587-5501-4759-b26b-eb71707c1d16": {
            "tag": "h1",
            "attrs": {
                "tag": [
                    {
                        "label": "H1",
                        "value": "h1",
                        "selected": true
                    },
                    {
                        "label": "H2",
                        "value": "h2",
                        "selected": false
                    },
                    {
                        "label": "H3",
                        "value": "h3",
                        "selected": false
                    },
                    {
                        "label": "H4",
                        "value": "h4",
                        "selected": false
                    }
                ],
                "className": ""
            },
            "config": {
                "label": "Header",
                "hideLabel": true,
                "editableContent": true,
                "controlId": "html.header"
            },
            "content": "Hola Mundo!",
            "action": {},
            "id": "ec625587-5501-4759-b26b-eb71707c1d16"
        },
        "45037eee-ce28-40ba-afa2-ce71d7620ca1": {
            "tag": "input",
            "attrs": {
                "required": false,
                "type": "text",
                "className": ""
            },
            "config": {
                "label": "Tu Nombre:",
                "controlId": "text-input"
            },
            "id": "45037eee-ce28-40ba-afa2-ce71d7620ca1"
        }
    }
}`;

    let container = document.querySelector('#formeo-container');
    let renderContainer = document.querySelector('#formeo-editor');
    let formeoOpts = {
        container: container,
        sessionStorage: true
    };

    let renderer = new FormeoRenderer(formeoOpts)
    renderer.render(JSON.parse(formData));
</script>
</body>
</html>
@georgedevphp
Copy link

I have the same error in my formeo project.

In addition to showing the JSON in the formeo editor to continue editing, sometimes it appears and other times it doesn't, you have to reload the page.

Upload an example of editing and rendering with javascript and html without React or VUE

kevinchappell added a commit that referenced this issue Nov 26, 2024
@kevinchappell
fix: uncaught error when elements not defined
63ce1c4 
resolves #377
@kevinchappell kevinchappell mentioned this issue Nov 26, 2024
Merged
kevinchappell added a commit that referenced this issue Nov 26, 2024
@kevinchappell
fix: uncaught error when elements not defined
4cd5a24 
resolves #377
github-actions bot pushed a commit that referenced this issue Nov 26, 2024
@semantic-release-bot
chore(release): 3.0.4 [skip ci]
a046733 
## [3.0.4](v3.0.3...v3.0.4) (2024-11-26)

### Bug Fixes

* formData not correctly parsed ([cec4935](cec4935))
* uncaught error when elements not defined ([4cd5a24](4cd5a24)), closes [#377](#377)
@kevinchappell
Copy link
Collaborator

🎉 This issue has been resolved in version 3.0.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

@kevinchappell
Copy link
Collaborator

kevinchappell commented Nov 26, 2024 •
edited
Loading

@JordanGarciaDev this issue should now be fixed. Here is a codepen demonstrating the fix:
https://codepen.io/kevinchappell/pen/yyBLJOE?editors=1010

also please note, the option for the container is renderContainer, not container

@georgedevphp
Copy link

How would it look to be able to send the form rendered in the example https://codepen.io/kevinchappell/pen/yyBLJOE?editors=1010?

and additionally the JSON is not shown in the editor for the edit view.

https://codepen.io/kevinchappell/pen/qEWBqqy

@JordanGarciaDev this issue should now be fixed. Here is a codepen demonstrating the fix: https://codepen.io/kevinchappell/pen/yyBLJOE?editors=1010

also please note, the option for the container is renderContainer, not container

@kevinchappell kevinchappell mentioned this issue Nov 26, 2024
Closed
@kevinchappell
Copy link
Collaborator

@JaiderPHP

How would it look to be able to send the form rendered in the example https://codepen.io/kevinchappell/pen/yyBLJOE?editors=1010?

Can you clarify what you mean by "send the form rendered"?

and additionally the JSON is not shown in the editor for the edit view.

https://codepen.io/kevinchappell/pen/qEWBqqy

Is this still true? I am seeing the rendered editor, is this the expected result? codepen will cache external dependencies, if its still not working you can add a query param to force a refetch ie. ?v=3.1.0
image

@georgedevphp
Copy link

@JaiderPHP

How would it look to be able to send the form rendered in the example https://codepen.io/kevinchappell/pen/yyBLJOE?editors=1010?

Can you clarify what you mean by "send the form rendered"?

and additionally the JSON is not shown in the editor for the edit view.
https://codepen.io/kevinchappell/pen/qEWBqqy

Is this still true? I am seeing the rendered editor, is this the expected result? codepen will cache external dependencies, if its still not working you can add a query param to force a refetch ie. ?v=3.1.0 image

Yes, I see that it works perfectly with the latest version: 3.1.0

All the errors that have been found in the previous versions have been fixed, thanks also to @JordanGarciaDev for his contributions.

But we need a clear example now of how to send the rendered form according to the example: https://codepen.io/kevinchappell/pen/yyBLJOE?editors=1010

For example "that form was created to request the name of the end user.
How would it be for the end user to click on a button and the form is sent and the json with the rendered responses is stored?

@kevinchappell
Copy link
Collaborator

ah i see what you mean. that gets kind of into backend territory. implementations can vary wildly so it's difficult to make an example that works for everyone. formeo renderer generates semantic forms so once rendered, traditional form.FormData workflow should work.

i work on a demo that shows how to get the data using FormData

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: #377 render error Draggable/formeo
3 participants
@kevinchappell @JordanGarciaDev @georgedevphp