PJAX issue with offcanvas element

There appears to be an issue with pjax and offcanvas elements. I have a standard offcanvas element with links inside the header template. When the page is loaded normally the offcanvas is able to be triggered by the toggle element but once I click on one of the links and go to another page I can’t trigger the offcanvas element unless I refresh the page. It appears to have something to do with pjax because moment I switched it off the offcanvas worked again. I don’t actually need pjax for this project so not sure why I switched it on but haven’t changed any of the settings on it yet so everything is still default. I’m on a local dev site so I don’t have a link but just thought I would point it out in case it’s a bug that you’re able to replicate and fix.

Hey! :slight_smile: Just tried it. Pjax works wunderfully with the Bricks native Offcanvas element here. Do you see any javascript errors in the console? Or are you using the Offcanvas from BricksExtras?

@Daniele hey sorry for the late response. I guess I don’t check the forum much. I just looked at it again and I am getting js errors. I’m using the default Bricks offcanvas element. The toggle element and offcanvas are both located in the header template in case that makes a different in your testing. I just updated to the new version you just pushed out today and no change. It’s on a local site so it’s not a caching issue because when I disable pjax it works again.

@Daniele have the same problem with bricks extras offcanvas even though i have activate “Clicking hashlink will close”.
Do not have any JS Errors.

@Mochkal The BricksExtras OffCanvas is not compatible. You need to create the compatibility manually using the related hooks. See here: Page Transitions – Bricksforge Docs

@Daniele Thank you very much.
I have now switched to the normal Off Canvas. It worked without any problems the first time. However, as soon as I am on a different subpage after the first switch, the Off Canvas menu no longer opens. There is no JS error.

Home - Andreas Koller-Ehrenberger Fotografie would be the page :wink:

not sure if it’s the same issue but when I used a nestable nav, I had to put the trigger outside of the nestable nav element for it to work across pages with pjax.

@Daniele I figured out something interesting. It appears the issue is with an offcanvas element being inside a header template. On a hunch I added another toggle and offcanvas inside the page and that works as it should. When I disable pjax they both toggles work so there’s something strange about how pjax handles templates. This is a fresh install with only Bricks and Bricksforge to make sure no other plugins or custom code was the issue. You can see here. https://bftest.seesite.dev/

Yep, notices the same behavior. That’s really interesting, because the header is not being changed by pjax and should keep event listeners. Will need to take a deeper look on this :slight_smile:

1 Like

Hello all and thanks in advance. Any news about this issue? I have the same problem with the offcanvas inside the header.

I’m experiencing an issue with the normal Nav (Nestable)

I’ve configured it to Show at breakpoint:Always, so it’s like a full screen mobile menu even on desktop.

This is causing an issue as at first it wouldn’t close the full page menu after loading a new page. I figured maybe I would just need to fire some code to ensure it’s reset to a closed position, but wasn’t sure the best way to do that.

Then I ran into another issue testing more links and sometimes when you click the hamburger menu to open after the first link click it will open and close the menu immediately, meaning to you can’t see it.

Any ideas?

I’m using a combination of normal discrete page links, plus onpage hash links.


I also want to add - the stock version with a normal menu worked so perfectly I was blown away!
I had previously spent most of a day researching ajax full page loading trying to get this to work and literally couldn’t believe that the Bricksforge integration works immediately out of the box with a single toggle switch. So major credit to your implementation Daniel :slight_smile:
I appreciate this is slightly different, although tweaking the default bricks settings.

So please don’t take my request for help as a knock on the out of the box implimentation, I’m already so impressed. Just would really appreciate some help in getting to work with the default nav nestable always set to full screen :slight_smile: