For the first time, I am experimenting with using pjax in combination with Laravel to enhance page loading speed. Since I am not well-acquainted with this technology yet, I have integrated this package into my project. Everything appears to be functioning properly, except for certain pages where JavaScript content is causing some complications.
Here is a snippet from my main.js file:
// Your javascript code goes here...
The content links are positioned above the "pjax" container and therefore do not reload as part of pjax. Their setup looks like this:
<ul class="tabs" data-tabs>
<li class="tabs-title" id="create"><a href="{{ url('/admin/articles/create') }}" class="link">Nytt inlegg</a></li>
<li class="tabs-title" id="articles"><a href="{{ url('/admin/articles') }}" class="link">Mine innlegg</a></li>
<li class="tabs-title" id="statistics"><a href="{{ url('/admin/statistics') }}" class="link">Statistikk</a></li>
<li class="tabs-title" id="users"><a href="{{ url('/admin/users') }}" class="link">Brukere</a></li>
</ul>
This issue also affects the smooth transition between tabs due to the classes is-active and bulletpoint not being applied to the links on page change. This occurs because the pages are not reloaded, resulting in the values for window.location.pathname not being updated. I am seeking guidance on the best approach to address this and ensure seamless behavior when switching tabs.
In addition to this setup, I am encountering specific challenges on my articles/create page related to integrating jFiler multiple upload feature, which does not function correctly with pjax. Furthermore, on the admin/statistic page, only two out of three types of charts displaying server data are rendering successfully.