search

gitana / alpaca

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.
http://www.alpacajs.org
Other
1.29k stars 371 forks source link

Unable to use two-Column layout with Arrays #610

Open seanvree opened 6 years ago

seanvree commented 6 years ago

I"m attempting to apply the two column layout to the child elements in an array, but for some reason it's not working? Very simple form from the examples just displays a blank page...no errors in browser console.

Thanks!

        <div id="field7"></div>

            <script type="text/javascript">
                $(document).ready(function() {
                    $("#field7").alpaca({
                        "schema": {
                            "type": "array",
                            "items": {
                                "type": "object",
                                "properties": {
                                    "type": {
                                        "enum": ["internal", "external"]
                                    },
                                    "url": {
                                        "type": "string",
                                        "format": "uri"
                                    }
                                }
                            }
                        },
                        "options": {
                            "toolbarSticky": true,
                            "items": {
                                "fields": {
                                    "type": {
                                        "label": "Type",
                                        "optionLabels": ["Internal", "External"]
                                    },
                                    "url": {
                                        "label": "URL"
                                    }
                                }
                            },
                            "form": {
                                "attributes": {
                                    "action": "save",
                                    "method": "post",
                                    "enctype": "multipart/form-data"
                                },
                                "buttons": {
                                    "submit": {}
                                }
                            }
                        },
                        "view": {
                            "parent": "bootstrap-edit-horizontal",
                            "layout": {
                                "template": './two-column-layout-template.html',
                                "bindings": {
                                    "type": "#leftcolumn",
                                    "url": "#rightcolumn"
                                }
                            }
                        }
                    });
                });
            </script>