Aync route, methods with ajax request, how to access router within ajax callback

OK, I’ve got an aync page, like so:

path: '/programs/',
async(routeTo, routeFrom, resolve, reject) {
	var router = this;
	var app = router.app;
	var templateData;
	
	app.request.json('/app/getPrograms', function (data) {
		if (data.status == 'ok') {
			templateData = { "list": data.result };
		} else {
			templateData = { "list": [ { name: "Database error" } ] }; 
		}
			
		resolve(
			{ componentUrl: './pages/programs.html'},
			{ context: templateData }
		);
	});
}

And it works well, using the returned data with the template to create my page. But on the page, I want to be able to add a new item. And to do that, I need to do another ajax request and when the ajax request completes, the easiest thing to do is to reload the page so that it fetches new data and rebuilds the page using the template/data. So here’s a method that wants to reload the page upon completion of the ajax request (I used promise notation here, just to see if it made a difference, it didn’t):

	addClose: function() {
		let name = this.$$('#add-input').val();
		this.$app.sheet.close('#add-sheet', true);
		if (name != '') {
			this.$app.request.promise.json('/app/addProgram/'+encodeURIComponent(name))
				.then( function(res) {
					app.view.router.navigate("/programs/");
				});
		} 
	}

My problem is that app.view.router doesn’t have a navigate function. Basically, my question is how can I navigate to a page from within the ajax callback.

The correct method is app.views.current.router.navigate();

1 Like

Awesome. Thank you. And because I’m trying to reload the same page, my line of code needs to have the parameter reloadCurrent: true like so:

app.views.current.router.navigate("/programs/", { reloadCurrent: true });

1 Like