iLoveElysia/pjax
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

Pjax not working when clicking on a link within DataTables #159

New Issue
Closed
opened 2018-05-27 12:40:33 -05:00 by xenace · 9 comments
xenace commented 2018-05-27 12:40:33 -05:00 (Migrated from github.com)
Copy link
Copy source

There seems to be an issue with Pjax not detecting links within DataTables. Any ideas how to get around this?

There seems to be an issue with Pjax not detecting links within DataTables. Any ideas how to get around this?
BehindTheMath commented 2018-05-27 12:44:05 -05:00 (Migrated from github.com)
Copy link
Copy source

Please link to a CodePen demonstrating the issue.

Please link to a CodePen demonstrating the issue.
xenace commented 2018-05-27 13:45:15 -05:00 (Migrated from github.com)
Copy link
Copy source

https://codepen.io/xenace/project/editor/ZgPgEK#0

https://codepen.io/xenace/project/editor/ZgPgEK#0
BehindTheMath commented 2018-05-27 14:12:51 -05:00 (Migrated from github.com)
Copy link
Copy source

What's not working? Everything looks fine to me, and the links work on all pages.

What's not working? Everything looks fine to me, and the links work on all pages.
xenace commented 2018-05-27 14:16:27 -05:00 (Migrated from github.com)
Copy link
Copy source

Sorry was just testing, narrowed it down to it being an issue on paginated links. If you switch to a different page and select a link it does not load through Pjax, just as a regular page load. I'm guessing that it's something to do with those links not being in the DOM when loaded.

Sorry was just testing, narrowed it down to it being an issue on paginated links. If you switch to a different page and select a link it does not load through Pjax, just as a regular page load. I'm guessing that it's something to do with those links not being in the DOM when loaded.
BehindTheMath commented 2018-05-27 17:55:15 -05:00 (Migrated from github.com)
Copy link
Copy source

I'm guessing that it's something to do with those links not being in the DOM when loaded.

It sounds like the elements are being dynamically generated. Try calling pjax.parseDOM(document) after switching pages.

>I'm guessing that it's something to do with those links not being in the DOM when loaded. It sounds like the elements are being dynamically generated. Try calling `pjax.parseDOM(document)` after switching pages.
xenace commented 2018-05-28 02:31:36 -05:00 (Migrated from github.com)
Copy link
Copy source

That seems to have partly solved the issue however when clicking on the pagination links Pjax is trying to load the root page because the buttons have a href value of # i got around this before by using javascript:void(0) in the href value but would then need to override the datatable functionality to do get around this. Is there any way to tell Pjax to ignore href with # value?

That seems to have partly solved the issue however when clicking on the pagination links Pjax is trying to load the root page because the buttons have a href value of # i got around this before by using javascript:void(0) in the href value but would then need to override the datatable functionality to do get around this. Is there any way to tell Pjax to ignore href with # value?
xenace commented 2018-05-28 02:45:49 -05:00 (Migrated from github.com)
Copy link
Copy source

Ignore last message, resolved it by setting elements to a:not(.page-link)

Ignore last message, resolved it by setting elements to a:not(.page-link)
robinnorth commented 2018-05-28 14:18:33 -05:00 (Migrated from github.com)
Copy link
Copy source

Just come here to add that there is actually a pjax.refresh() method that is designed for situations like this where you need to make Pjax aware of new DOM elements which we should document properly. It is just a wrapper around pjax.parseDOM(), so @BehindTheMath's advice is still correct.

https://github.com/MoOx/pjax/blob/216686696712d4a3cfe1ebe9b43c3fb5c8e2dd30/index.js#L69-L71

Just come here to add that there is actually a `pjax.refresh()` method that is designed for situations like this where you need to make Pjax aware of new DOM elements which we should document properly. It is just a wrapper around `pjax.parseDOM()`, so @BehindTheMath's advice is still correct. https://github.com/MoOx/pjax/blob/216686696712d4a3cfe1ebe9b43c3fb5c8e2dd30/index.js#L69-L71
BehindTheMath commented 2018-05-28 14:23:37 -05:00 (Migrated from github.com)
Copy link
Copy source

That's true. I forgot about that method.

That's true. I forgot about that method.
Sign in to join this conversation.
No Branch/Tag Specified
Labels
Clear labels
bug
dependencies
Pull requests that update a dependency file
 duplicate
enhancement
invalid
question
wontfix
No labels question
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
iLoveElysia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: iLoveElysia/pjax#159