SOLVED Routing via SVG click. Embedded a href reloading entire application.

[Kenny Udovic]

Currently I am using the persona theme as a base template and building a custom theme for nodebb. One of the first things I've added is svg.tpl which is included in the header.tpl.

Within the svg I have this href:

 <a href="{config.relative_path}/category/20/my-category" itemprop="url" id="test">
   <path
      style="fill:#d3d3d3"
      d="M 405.19098,251.879 L 405.74898,257.292 L 401.35098,257.81 L 401.01298,254.629 L 400.88598,253.474 L 401.30098,253.43 L 401.43098,253.322 L 401.30098,252.294 L 405.19098,251.879" />
 </a>

When this svg is clicked, the entire page reloads, rather than when a category is clicked and it only reloads the categories section of the theme.

I'd love for the svg to persist through the navigation of categories and topics. How would I go about doing this?

[julian]

Does it work fine without the SVG? Just a text link?

[Kenny Udovic]

@julian, Thanks for the response.

Just tested the text link. It does work with just a text link.

With that being said, I was planning on using raphael, 3js, or snap.svg and building a custom dynamic UI that tied into some hooks you guys provide, and I am willing to look into getting this problem sorted out.

Any idea on what might be causing this / where to start looking into to make some modifications to get this working as preferred?

[julian]

That's quite weird... there's no reason I can think of that would explain why a link with SVG content wouldn't work but one with text would...

[Kenny Udovic]

@julian

Yeah, not sure the difference between a normal link and one contained within an svg div.

Just to make it 100% clear, the link in the svg does in fact load the category page and make it to the correct route, but it causes the entire application to reload. I'll probably be experimenting with this a little bit. I'll let you know when / how / whether I solve this issue.

[julian]

Just to be clear, this is an SVG with a link embedded inside? That would not work because the client-side code we use just detects <a> elements, not ones in an SVG...

If you can execute js inside an SVG, try ajaxify.go('/topic/123');?

[Kenny Udovic]

@julian

Yes. You are correct. The link has been embedded within the SVG.

Your javascript solution works wonderfully. <path onclick="ajaxify.go('/category/20/my-category');"> brings me to the correct place without reloading the entire application.

Thanks for your help.

[julian]

Great! Glad to hear it's working now