Documentation on making ajaxify.go work for custom routes?

[jongarrison]

I am creating some custom pages in a plugin that will be low traffic and I am curious about how to do this through one of two ways:

1. Is there documentation on how to correctly create custom routes that NodeBB's ajaxify.go process will load correctly?
2. Is it possible to get ajaxify.go to ignore certain routes and just treat them like normally loaded pages?

[jongarrison]

I found this old gist from @julian about disabling ajaxify behavior. I'm just adding it to my custom pages. https://gist.github.com/julianlam/a4e9c4c9458e0ccdd459

I've added the following to my custom pages to get basically the result I needed. I don't users casually leaving this page and so I've disabled most of the nav in addition to disabling ajaxify.go with @julian's script:

<script type="text/javascript">
  $(window).on('action:ajaxify.end', function(data) {
    $('#main-nav').hide();
    ajaxify.go = function (url) {
      window.location.href = RELATIVE_PATH + '/' + url;
    };
    console.log("Disabled main nav and ajaxified links");
  });

</script>

[jongarrison]

Also, for anyone else researching how to create properly ajaxify'ed custom routes, I came across the old discussion linked below started by @riteshsanap where it appears he figured out how to do this correctly, but his gist has been covered by the sands of time, and I'm not sure I understand his last comment out of context. Anyway, somebody out there has made this work properly https://community.nodebb.org/topic/3857/custom-routes-are-not-ajaxified

[PitaJ]

@jongarrison you really ought to look at some plugins for examples on how to add custom routes. It involves a template file and an express listener.

If you are just adding custom static pages, you may want to use the static pages plugin for that.

[jongarrison]

@pitaj I can do simple pages using express routes no problem. The trick is when there is a link to the custom pages that gets intercepted by ajaxify's go stuff. At that point, ajaxify starts to look for a template and an api route that it can render client side, right?

The suggestion to dig through the existing plugins is great and I've been doing lots of that. I'm sure I'll find something. Thanks!

[julian]

@jongarrison Yes, pretty much all plugins do this. You'll notice for the admin page, we load up two routes:

nodebb-plugin-quickstart/library.js at master · NodeBB/nodebb-plugin-quickstart

A starter kit for quickly creating NodeBB plugins. - nodebb-plugin-quickstart/library.js at master · NodeBB/nodebb-plugin-quickstart

GitHub (github.com)

Check out the controllers, and mimic in your plugin appropriately

[jongarrison]

@julian Thanks for that example! I had somehow missed this with the custom pages I had done earlier because of how they were being used. Anyway, good to see a concrete example. I really like the way that the page loads work in NodeBB and that server side rendering is similar to client side rendering. it's really slick.

[jongarrison]

@julian Thanks for the link to nodebb-plugin-quickstart, the really important bit for me was the comment in nodebb-plugin-quickstart/lib/controllers.js:

/*
	Make sure the route matches your path to template exactly.
	If your route was:
		myforum.com/some/complex/route/
	your template should be:
		templates/some/complex/route.tpl
	and you would render it like so:
		res.render('some/complex/route');
*/

I hadn't seen that mentioned anywhere else. So, if I understand custom routes finally, there are really three important routes really:

1. The normal Express route which renders the full page with the header. This handles browser requests straight to the custom route.
2. API route for Ajaxify. The custom plugin code sends some json, which nodebb adds some additional json to.
3. Template route for Ajaxify, which is implied from the url for the api path.

[julian]

Yes, that is correct.

@baris, should we actually expose setupPageRoute so plugins can call it? It makes it easier to set up routes without having to go through these hoops...

[baris]

It is already exposed.

var routeHelpers = require('./routes/helpers');
routerHelpers.setuPageRoute(router, '/myRoute', middleware, [someMiddleware], myController);

[julian]

What

I should update quickstart to use that then...

[jongarrison]

Sweet!