formAjaxSuccess and $setState

Questions
1

Hey,

I have something like this within a component page

   ...
    on: {
      pageInit() {
        var self = this;
        var app = self.app;
        self.dataSet.user = dataUser[self.$route.params.id];
        self.$setState(self.dataSet);
        app.on('formAjaxSuccess', function (formEl, data, xhr) {
    		data = JSON.parse(xhr.response);
    		dataUser[data.user.id] = data.user;
    		self.dataSet.user = dataUser[data.user.id];
    		self.$setState(self.dataSet);
    	});
      },
    },  
    ...

where dataUser is a global object. On the first pageInit it works fine. The Dom gets rendered and when something in the form has changed the ajax call returns and the form is refreshing… fine. When I go back to the previous page and return, it fails because the app.on(‘formAjaxSuccess’… has lost the “self” reference.

I know - there is something wrong with my approach in general. But how to do it within a component page? It is a simple form and I try to save and update the content on “form-ajax-submit-onchange”…

btw… is it possible to call a method defined within a component page from outside - I mean like I can call app.methods.myCustom() from a component but the other way around? Like myCurViewRoute.methods.myCustom() ?

Sorry for the stupid questions… I am still new to F7, but I love it!

2 
pageInit(e, page) {
  page.$el.find('form.xxxx').on('formajax:success', 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
  });
}
3

Thx… this is what I actually tried first. But I do not get the XHR object returned (undefined). For some reason the returned e.data holds some data directly… but in a strange way. There are no sub-objects .xhr nor .data. Have a look at the screenshot:

04

… seems to be the form input/names but not the response.

4

are you sure you are using formajax:success? and did you check whether the request has successfully got a response? Please also paste some related code.

5

this is how I catch the event:

    $(self.$el).find('.testform').on('formajax:success', function (e) {
	    console.log(e);
	    console.log(e.detail);
	    console.log(e.detail.xhr);
	});

… and yes - If I check the debug inspector, the XHR gets loaded correctly. But - in my case the response is a JSON. Maybe some html is expected?

6

hey… but this seems to work:

    $(self.$el).find('.testform').on('formajax:success', function (e, data, xhr) {
	    console.log('formajax:success');
	    console.log(e);
	    console.log(xhr);

	    data = JSON.parse(xhr.response);
	    console.log(data);
	    ...
	});
7

…and - is there a way to call a method from the previous page without going back?

8

You can events for this:

Page A
app.on('doSomethingInPageA', (foo, bar) => {
  // ...
})


Page B
app.emit('doSomethingInPageA', 'foo', 'bar');
9

thx… I did this now with global event listeners… but this looks more simple :wink:

1 Like