How do I load an ajax-submitted form as page with v2


#1

I used framework7 v1 for another project once before, where I did something like:

myApp.onPageInit(’*’, function(page){

	var container = $(page.container);
	
	container.find('form.ajax-submit').on('submitted', function (e) {
		mainView.router.loadContent(e.detail.data);
	});


}

So all forms with class “ajax-submit” are submitted via ajax, and then the returned page is loaded with the router as page. How do I do that with framework7 v2?

This looks like a common use case for me?

Also: is it possible to do without the “routes” object like in v1? I don’t want to use v1, because the layout is better handled with v2 (simpler, and not two versions for material/ios anymore)


#2

My workaround now is

app.on('formAjaxSuccess', function (formEl, data, xhr) {
  app.router.navigate($(formEl).attr('action'), {context: xhr});
});

and add a default route like:

  {
    path: '(.*)',
    async: function(routeTo, routeFrom, resolve, reject){
        resolve({
            content: routeTo.context.response
        });
       
    }
  }, 

Is there a better way to do this?


#3

As it doesn’t supported by default, so your workaround looks ok to me :+1:


#4

I would strongly suggest “support by default”, also with some optional view-targets for forms (same as for links).

I would also suggest some possibility to completely omit the “routes” option and offer some default handling like in v1, so it would be much easier to implement an application more like a website with mobile-ui-features.

May I open a github feature request?


#5

I also have no success for a workaround in simplifying the routing mechanism to work like a conventional website. I simply like to have path=route, and pushState=true with pushSeparator=’’ but then always the new url (relative path) is appended to the current path. I currently feel with v2-router not like “keep it simple and offer powerful options”, but more like “make it complicated, and offer no way to keep it simple” :frowning:


#6

Would be good see some details