Routing via SVG click. Embedded a href reloading entire application.
-
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, 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?
-
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.
-
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.
