Update form values

Form values can be updated using the form views val method or by calling the parent form's populate or val methods.

Example:

var view = new ludo.View({
    form:{
        submit: {
            url : 'save.html',
            data:{ save: 1 },
            method:'post',
            listeners:{
                init: function(form){},
                success: function(json, form){},
                fail: function(text, error, form) {}
            }
        }
    },
    children:[
        { type:"form.Text", id:'firstname', name:"firstname", value:"Jane" },
        { type:"form.Text", id:'lastname', name:"lastname", value: "Peterson" }
    ]
})

To update the firstname here, you can update it directly using

ludo.$('firstname').val('John');

or via the form using

view.getForm().val('firstname', 'John');

or

view.getForm().populate({"firstname" : "John" });

Populate using Ajax.

Using Plain jQuery Ajax, you can create a query and thereafter call the populate method with the data you receive from the server.

You can do the same with the form by defining a form.read object.

var view = new ludo.View({
    form:{
        hiddenFields: ['id'],
        read: {
            url: 'get-user-data.html', // read url
            autoload: true,  // autoload data on create
            populate: true,
            keys: ['id'], // array of form values to add to the view request
            data: { 'loadUser' : 1 },
            method:'get',
            listeners: {
                'init' : function(form) {

                },
                'success': function (json, form) {

                },
                'fail': function (text, error, form) {
                    // do something on failure
                }
            }
        },
        submit: {
            url : 'save.html',
            data:{ save: 1 },
            method:'post',
            listeners:{
                init: function(form){},
                success: function(json, form){},
                fail: function(text, error, form) {}
            }
        }
    },
    children:[
        { type:"form.Text", id:'firstname', name:"firstname", value:"Jane" },
        { type:"form.Text", id:'lastname', name:"lastname", value: "Peterson" }
    ]
})

These are the available properties for the 'read' object above.

• url Read data from this url
• autoload Automatically load from server when the view is rendered. When false, you need to call the read method manually. Default: false
• populate Automatically update the form views with the values received from server. When false, you need to call the populate or val method manually. Default: false
• keys An array of form fields which would be sent along with the request. This could result in a request like 'get-user-data.html?id=100' if the form field id has value 100.
• data Additional data to send with the request. { 'loadUser' : 1 } could give you the url 'get-user-data.html?loadUser=1&id=100'
• method Method for the request(post or get)
• listeners Object with event listener functions related to the request. When data are read from server, two events are triggered. init is triggered before the request. success or fail are triggered on completion.