在alpaca.js上使用令牌字段重置表单

Question

I have spent a couple of hours trying to figure out how to properly reset a form with token field on alpaca.js.

Not sure if this is a bug, or I am doing something wrong. I placed two reset buttons, a generic one and a second one that calls a function to reset the form.

<script type="text/javascript">
var value = {};
$("#myform").alpaca({
 "schema": {
    "title": "token field",
    "type": "object",
    "properties": {
        "text_field": {"type": "text" },
        "token_field": { "type": "token"},
    }                       
},
"options": {  
    "fields": {
            "text_field": {
                    "label": 'this is a text field', 
                    "type": "text"
            },
            "token_field": {
                    "label": 'this is a token field', 
                    "type": "token",
                            "tokenfield": {
                    },
            },
    },
    "form": { 
            "buttons": {
            "load": {
                    label:"load saved values",
                    "click": function() {
                            $('form#' + this.attributes.id)[0].reset();
                            this.setValue(value);
                    },      
            },
            "reset": {},
            "fancy_reset": {
                    "label": "reset with function",
                    "click": function() {
                            console.log(this.attributes.id);
                            $('form#' + this.attributes.id)[0].reset();
                    },
            },
            "save": {
                    label:"save",
                    "click":function(){
                            value = this.getValue();
                            console.log(this.getValue());
                            console.log(value);
                    },
            },
            },
    },
},
});
</script>

Any insights on whats wrong here?

Answer 1

I've been working with Alpaca for year but I haven't use that type of and after some research I haven't found any solution in the Alpaca lib to reset that type of field, so I tried to use jquery and bootstrap tokenizer methods .

and I've came to this solution :

1. Create an eventlistener to the reset form event

    $('form').on('reset', function(e) { var control = $("#myform").alpaca("get"); var field = control.childrenByPropertyId['token_field']; field.refresh(); }); 

2. In your load function after this.setValue(value) add this code:

    if (typeof value.token_field != undefined) { // getting Alpaca parent control (this holds everything) var control = $("#myform").alpaca("get"); // get the token field var field = control.childrenByPropertyId['token_field']; // setting the saved token to the field using bs-tokenizer method setTokens $(field.control).tokenfield('setTokens', value.token_field); } 

Here's a fiddle for that. Tell me if you still have any issue.