SOLVED: Please help with Ajax-Form-Submit Event

Questions
1

The following code is submitting the form. But the ajaxform event is not firing.

<template>
    <f7-page no-toolbar no-navbar no-swipeback>
        <f7-navbar title="Registration" back-link="Back"></f7-navbar>
        <form id="testForm1" action="http://localhost/login" method="POST" class="form-ajax-submit">
            <f7-input type="text" placeholder="Enter your full name" clear-button></f7-input>
            <f7-input type="number" placeholder="Enter your mobile number" clear-button></f7-input>
            <f7-input type="submit" value="Submit" class="button"></f7-input>
        </form>
    </f7-page>
</template>

<script>
    export default {
        on:{
            formAjaxSuccess(formEl, data, xhr){
                console.log('success');
                console.log(data);
            }
        },
        mounted(){
            const self = this;
            const $ = self.$$;
            const app = self.$f7;
            $('#testForm1').on('formajax:error', function (e) {
                var xhr = e.detail.xhr; // actual XHR object

                var data = e.detail.data; // Ajax response from action file
                // do something with response data
            });
        }
    };
</script>
2

The problem has been solved. The solution was already given in the documentation but I had missed it. Here is the code which is working now.

<template>
    <f7-page no-toolbar no-navbar no-swipeback>
        <f7-navbar title="Registration" back-link="Back"></f7-navbar>
        <form id="testForm1" action="http://localhost/login" method="POST" class="form-ajax-submit">
            <f7-input type="text" placeholder="Enter your full name" clear-button></f7-input>
            <f7-input type="number" placeholder="Enter your mobile number" clear-button></f7-input>
            <f7-input type="submit" value="Submit" class="button"></f7-input>
        </form>
    </f7-page>
</template>

<script>
    export default {
       mounted(){
            const self = this;
            const app = self.$f7;
            app.on('formAjaxSuccess', function (formEl, data, xhr) {
                // do something with response data
                console.log('In formAjaxSuccess')
            });
            app.on('formAjaxComplete', function (formEl, data, xhr) {
                // do something with response data
                console.log('In formAjaxComplete')
            });
            app.on('formAjaxBeforeSend', function (formEl, data, xhr) {
                // do something with response data
                console.log('In formAjaxBeforeSend');
            });
            app.on('formAjaxError', function (formEl, data, xhr) {
                // do something with response data
                console.log('In formAjaxError');
            });
        },
    };
</script>

Sorry for bothering you guys.
Thank you Framework. Thank you Vladimir.

2 Likes
3

Sorry what is the version of your F7 during this fix?