FlowRouter without page reload

Question

I am following this example https://kadira.io/academy/meteor-routing-guide/content/rendering-blaze-templates When I click on my links the whole page is being reloaded. Is there any way to load only the template part that is needed and not the whole page?

Edit: Also I noted another problem. Everything that is outside {{> Template.dynamic}} is being rendered twice.

Here is my project sample. https://github.com/hayk94/UbMvp/tree/routing

EDIT: Putting the contents in the mainLayout template and starting the rendering from there fixed the double render problems. However the reload problems happen because of this code

Template.mainLayout.events({
  "click *": function(event, template){
     event.stopPropagation();
     console.log('body all click log');
    //  console.log(c0nnIp);
     var clickedOne = $(event.target).html().toString();
     console.log('This click ' + clickedOne);
     //getting the connID

    var clientIp = null // headers.getClientIP(); // no need for this anymore
    var clientConnId = Meteor.connection._lastSessionId;
    console.log(clientIp);
    console.log(clientConnId);



    Meteor.call("updateDB", {clientIp,clientConnId,clickedOne}, function(error, result){
      if(error){
        console.log("error", error);
      }
      if(result){

      }
    });

  }, // click *
});//events

Without this event attached to the template the routing works without any reloads, however as soon as I attach it the problem persists. Do you have any ideas why this code causes such problems?

Answer 1

EDIT 2 following question Rev 3:

event.stopPropagation() on "click *" event probably prevents the router from intercepting the click on link.

Then your browser performs the default behaviour, i.e. navigates to that link, reloading the whole page.

---

EDIT following question Rev 2:

Not sure you can directly use your body as BlazeLayout target layout.

Notice in the first code sample of BlazeLayout Usage that they use an actual template as layout (<template name="layout1">), targeted in JS as BlazeLayout.render('layout1', {});.

In the tutorial you mention, they similarly use <template name="mainLayout">.

That layout template is then appended to your page's body and filled accordingly. You can also change the placeholder for that layout with BlazeLayout.setRoot() by the way.

But strange things may happen if you try to directly target the body? In particular, that may explain why you have content rendered twice.

---

Original answer:

If your page is actually reloaded, then your router might not be configured properly, as your link is not being intercepted and your browser makes you actually navigate to that page. In that case, we would need to see your actual code if you need further help.

In case your page does not actually reload, but only your whole content is changed (whereas you wanted to change just a part of it), then you should make sure you properly point your dynamic templates.

You can refer to kadira:blaze-layout package doc to see how you set up different dynamic template targets in your layout, and how you can change each of them separately (or several of them simultaneously).

You should have something similar in case you use kadira:react-layout package.