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

Nested Tables do not work (even example on alpacajs.org) #703

Open beccon4 opened 5 years ago

beccon4 commented 5 years ago

Nested tables do not work at all. My code looks like this:

<html>
    <head>
            <!-- jquery -->
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

            <!-- bootstrap -->
            <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
            <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

            <!-- handlebars -->
            <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
            <!-- alpaca -->
            <link type="text/css" href="http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.css" rel="stylesheet" />
            <script type="text/javascript" src="http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js"></script>
            <meta charset="utf-8"/>
        </head>
        <body>
            <div id="form"></div>
        </body>
        <script>
        $("#form").alpaca(
            {
                "data": {
                    "edit" : [
                        { "entity": "eins" } ,
                        { "entity": "zwei" } ,
                    ],
                    "change": "HALLO"
                },
                "schema": {
                    "type": "object",
                    "properties" : {
                        "edit" : {
                            "type": "array",
                            "items": {
                                "type": "object",
                                "properties" : {
                                    "entity" : {
                                        "title": "Entity",
                                        "type": "string"
                                    },
                                    "verb_list": {
                                        "title": "verbs",
                                        "type" : "array",
                                        "items" : {
                                            "type":"object",
                                            "properties" : {
                                                "title": "Hallo",
                                                "type":"string"
                                            }
                                        }
                                    }
                                }
                            }
                        },
                        "change" : {
                            "type": "string"
                        }
                    }
               },
               "options": {
                    "fields": {
                        "edit": {
                            "type": "table",
                            "items": {
                                "fields": {
                                    "entity": {
                                        "type":"any"
                                    },
                                    "verb_list": {
                                        "items": {
                                            "fields" : {
                                                "verbs" : {
                                                    "type":"any"
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        },
                        "change": {
                            "type":"any"
                        }
                    },
                    "form": {
                        "buttons": {
                            "submit": {
                                "click": function() {
                                    var data = { "req": { "value": this.getValue() } };
                                    alert(JSON.stringify(data));
                                    $.ajax({
                                        type: "POST",
                                        url:  "http://localhost:5000/appian/mockresponse",
                                        data: JSON.stringify(data),
                                        contentType: "application/json",
                                        processData: false,
                                    })
                                    .done(function(data) {
                                              alert('gespeichert');
                                    })
                                    .fail(function(res) {
                                              alert('Fehler:' + res.status);
                                    });
                                }
                            }
                        }
                    }
               }
            }
        );

   </script>
</html>

Trying to add a new item to the inner table (+) causes the whole canvas to go blank and displays the following error message:

`{"message":"Unable to find field class for type: undefined","reason":"FIELD_INSTANTIATION_ERROR"}`
t.log
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:151215
t.logError
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:150939
t.DEFAULT_ERROR_CALLBACK
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:152932
constructor/this.errorCallback
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:187788
error
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:286861
constructor/this.errorCallback
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:187788
error
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:268735
constructor/this.errorCallback
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:187788
error
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:286861
constructor/this.errorCallback
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:187788
error
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:268735
constructor/this.errorCallback
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:187788
error
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:286861
createFieldInstance
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:146837
_init
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:145877
init/<
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:145054
o
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:147141
compile/<
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:149336
compile
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:148992
init
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:144559
t/<
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:135998
p
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:238888
r/<
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:239360
_handleLoadJsonResource
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:240244
loadView
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:238550
r
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:239310
connect
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:238073
loadAll
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:239418
t
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:135694
e.fn.alpaca
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:153974
createItem
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:286714
createItems/p</</<
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:286340
a
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:287712
resolvePropertySchemaOptions/<
http://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js:1:288370
t.nextTick/<

Trying to reproduce that malfunction with the examples from Alpaca's website shows a similar behavior http://www.alpacajs.org/docs/cookbook/nested-tables.html

What's wrong?

kokizzu commented 5 years ago

I wonder what did I did wrong for hours.. XD

(tried to create 2 nested table on the same page, last sub table always empty, editing one subtable then submit randomly removes all other rows, etc) adding a new row also sometimes throw an error, apparently it also happened on the example page