SailsJS: Get Resonse of Ajax-Form of SailsJS in the submitted function

Question

I want to get an object from an action, which is called by an ajax form component.

Steps to reproduce.

1. create a ajax form where you passing values for a model (eg. title and description for a post)

2. After handling the submitting form let pass the data to a action

3. In the action you will safe the given data to the MongoDB and fetch that created data with .fetch()

4. You pass the fetched data to exits.success(fetchedData)

5. Try to get the data in the submittedForm function in the xxxx.page.js

I am not able to get the data. I logged the ajax-form.components.js. In line 398, we emit the result (the result should have our data, in my case it is the fact) but after that, the result is gone. Maybe I understand it wrong, obviously I do things wrong.

If you need more info, let me know.

Answer 1

You are correct in the steps you have described above, and I think all that you're missing is that you have to put give parameter to your submitted function. As a prop in the vue template, you pass in ($event). In the page script(page-name.page.js) you can have the parameter be named whatever you want where you define the submitted function.

Though it doesn't seem like you need it, I'm going to put a thorough example here in case anyone else is having trouble with ajax-form functions in Sails.js.

In your template(html):

<ajax-form
    action="<camelcase of the file for your action>" 
    :handle-parsing="parseForm"
    :submitted="submittedForm($event)"
    @rejected="rejectedForm($event)"
    :form-data="formData"
    :form-rules="formRules"
    :form-errors.sync="formErrors"
    :cloud-error.sync="cloudError"
>
<input type="text" id="input1" v-model="input1">

Here, form-data will refer to an object that the data gets stored. The keys will come from what you set the v-model' as for a given input.form-rulesis where you specify an object of objects. They key of each is the input name fromv-modeland the value can be a string or array of strings for the rules set.form-errorsspecifies an object where errors will go if the form triggers any errors upon submission. If this happens, data does not get sent to the server and neither the submitted or rejected function get run.cloud-error.sync` specifies an object where any back end errors will go if the action returns a non-200 response.

In your page script (page-name.page.js):

data: {
    formData: {},
    formErrors: {},
    formRules: {
        input1: 'required'
    },
    cloudError: ''
},
methods: {
    parseForm: function () {
        // You can do parsing and custom validations here, but return all data 
        // you want to send to the server as an object called 'argins'
        return argins;
    },
    submittedForm (data) {
        // Here you can use any data that is returned from the action, like
        console.log('returned data: ', data);
    },
    rejectedForm (err) {
        // This function runs if the server returns a non-200 response
        console.log(err);
    }
}