2

I am trying to call a controller function from js and use the result for validation purpose. Unfortunately, the result getting as undefined because of the result line is printing before the completion of the ajax call.

here is my code:

*.js

send: function(e){
e.preventDefault();
var self = this;
var is_submit = self.$target.find('#is_submit').val();
var mobile = self.$target.find('#mobile').val();
var phone = self.$target.find('#phone').val();
var data = self.ajaxcall(mobile,e);
console.log('dddddddd',data);// here it prints undefined.
if (data == false){
  return false;
}
this._super(e);

},
})


ajaxcall:function(mobile,e){
var value = {
  'flag':'mobile',
  'number':mobile
}
ajax.jsonRpc('/checkexisting/','call',value).then(function(data){
  console.log('isnide ajax call',data);
  return data;
});

},

Here is th console output:

enter image description here

How can i make it as a synchronous mode?

KbiR
  • 4,047
  • 6
  • 37
  • 103
  • For this, easiest solution is add a callback function also You can try with Async.js or Syncify.js library – kamprasad Aug 26 '19 at 08:51

1 Answers1

1

There is no way to to make all code synchronous, you can use callbacks or promises/await to wait for the response.

Example with callback:

{
            send: function (e) {
                e.preventDefault();
                var self = this;
                var is_submit = self.$target.find('#is_submit').val();
                var mobile = self.$target.find('#mobile').val();
                var phone = self.$target.find('#phone').val();
                var data = self.ajaxcall(mobile, function(result){
                    console.log('the result is: ', result)
                    self._super(e);
                });

            },
            ajaxcall: function (mobile, callback) {
                var value = {
                    'flag': 'mobile',
                    'number': mobile
                }
                ajax.jsonRpc('/checkexisting/', 'call', value).then(function (data) {
                    console.log('isnide ajax call', data);
                    callback(data);
                });
            }

Example with promises:

{
            send: function (e) {
                e.preventDefault();
                var self = this;
                var is_submit = self.$target.find('#is_submit').val();
                var mobile = self.$target.find('#mobile').val();
                var phone = self.$target.find('#phone').val();
                var data = self.ajaxcall(mobile).then(function(result){
                    console.log('the result is: ', result)
                    self._super(e);
                });

            },
            ajaxcall: function (mobile) {
                var value = {
                    'flag': 'mobile',
                    'number': mobile
                }

                return new Promise(function(res, rej){
                    ajax.jsonRpc('/checkexisting/', 'call', value).then(function (data) {
                        console.log('isnide ajax call', data);
                        res(data);
                    })
                });
            }

Or with await(note the async and await keywords):

{
            send: async function (e) {
                e.preventDefault();
                var self = this;
                var is_submit = self.$target.find('#is_submit').val();
                var mobile = self.$target.find('#mobile').val();
                var phone = self.$target.find('#phone').val();
                var data = await self.ajaxcall(mobile);

                console.log(data)

                self._super(e);

            },
            ajaxcall: function (mobile) {
                var value = {
                    'flag': 'mobile',
                    'number': mobile
                }

                return new Promise(function(res, rej){
                    ajax.jsonRpc('/checkexisting/', 'call', value).then(function (data) {
                        console.log('isnide ajax call', data);
                        res(data);
                    })
                });
            }
MaartenDev
  • 5,631
  • 5
  • 21
  • 33
  • @MaatenDev, I tried with callback, but the control didn't go to ajaxcall function. it skipped directly to this._super(); – KbiR Aug 26 '19 at 08:55
  • @MaatenDev, in othr two options i am getting this error: `TypeError: ajax.jsonRpc(...).then(...).catch is not a function` – KbiR Aug 26 '19 at 09:03
  • I updated the callback and promise examples @KbiR – MaartenDev Aug 26 '19 at 09:25
  • @MaatenDev, Now i am getting below error: `TypeError: this is undefined` – KbiR Aug 26 '19 at 09:39
  • Fixed the error, please check again @KbiR – MaartenDev Aug 26 '19 at 09:44
  • @MaatenDev, now getting this error: TypeError: self._super is not a function – KbiR Aug 26 '19 at 09:50
  • Could you add the _super method to your question? I don't see it anywhere @KbiR? – MaartenDev Aug 26 '19 at 09:52
  • Actually, i am inheriting send funciton, so after execution of my custom code i need to execute the parent function. For this purpose we use this._super(); – KbiR Aug 26 '19 at 09:54
  • Super only works for constructors, so _super seems like a custom method? How are you inheriting the methods. Could you show the parent class/object? @KbiR – MaartenDev Aug 26 '19 at 09:59