The search bar located at https://vlc.nccommunitycolleges.edu/students/find-a-course/ will not populate results after typing into the search field. Seems you have to refresh the page multiple times before it will work. However, refreshing the page does not always work.
What could be causing this issue?
Things to Know:
Issue isn't browser specific
Issue first occurred on 4/13/2022
Clearing browser history/cache does not work
Host provider is SiteGround
Tried a previous PHP version
Dynamic cache is off (It was off by default)
Programmatically disabled cache via .htaccess file
An indicator the search bar isn't working: The placeholder text "Search" will not show in the search bar.
An indicator the search bar is working: The placeholder text "Search" will show in the search bar.
WordPress Version: 5.9.3
wpDataTables Version: 1.7.2
Using Divi child theme
I've attached a few images to provide additional help.
Course Search - Console Error Message.png
Shows the console error message in the developer tools log
Course Search - Not Working.png; Course Search - Working.png
I tested again and the issue still occurs. I've cleared my browser cache too.
However, the issue does not occur when testing with the Chrome browser. When I test with Firefox, Safari, and Microsoft Edge, the issue still occurs.
The issue still occurs when I ask others to test on their systems. They have to perform a hard refresh on their browser to make the course list show up. Sometimes it requires them to perform multiple hard refreshes.
I checked with Firefox, Edge 101 (on Windows 11), Edge 100 (on Windows 10), and Safari 15.3, but they all work (see attached screenshots). I used 4 different computers to test, so there's no cache on my end that'd make it work and there was no need to perform any refreshes, let alone hard refreshes.
I can't see the CSS when the page is inspected either anymore, so I don't know what issues you're facing on your end. We also tried with and without VPN, but we couldn't replicate the issue - the table loads just fine. If you're still facing the issue, I don't believe I'll be able to help since there's no way to replicate it on our end.
Can you ask your hosting provider if there are any blocks or limitations? Can they perform a deeper cache purge? That shouldn't do anything since my colleagues who accessed your page for the first time wouldn't have been able to see the table, but it's worth a shot.
The CSS code that was asked to be disabled was not be causing the problem. I re-enabled it.
That CSS is actually needed because it hides the table of courses on the initial page load. Otherwise, the courses will automatically populate without any user input in the search bar, and we do not want that to happen.
The course list stays hidden until a user initiates a search. Then, the course list auto-populates thereafter.
Something else is causing the issue…
Thank You,
Stephen Best Web Specialist Surry Community College
At the moment, the table displays on the page without entering anything in the search field, which is the default behavior of it.
What you're doing with the Global Search is not a built-in functionality of wpDataTables, so I can't help you with applying that logic (of hiding the table before searching through the global search).
Hiding the table before the filtering is applied is a feature that's included in our add-on Powerful Filters, but it doesn't apply to the Global Search that you're using.
If you continue using the custom solution you've implemented, you also have to include a custom logic that will change "display: none" to "display: block" after something's been entered in the search, but providing support for custom solutions is not covered.
I can see that it's working as it should now up until the data from the Search field is removed (see attached screencast).
Basically, this custom logic that you applied works fine initially (the table is hidden, until a search criteria is entered), but when the search field is cleared, it displays the whole table. This, as mentioned before, is custom work and it's not the default behavior of the plugin, so you will need to alter the code to revert to hiding the table when the search field is empty.
As for the issue about reloading the page until it works - I was not able to replicate it - it hides the table when the page is visited, and then it applies the search values normally. There was no need to revisit the page multiple times to get it to work. Have you tried from different computers, have you tried clearing the cache?
Hello,
The search bar located at https://vlc.nccommunitycolleges.edu/students/find-a-course/ will not populate results after typing into the search field. Seems you have to refresh the page multiple times before it will work. However, refreshing the page does not always work.
What could be causing this issue?
Things to Know:
I've attached a few images to provide additional help.
Hello Stephen.
Thank you for reaching out to us.
After inspecting your page, the issue is coming from this custom CSS:
It is added in your child theme: https://vlc.nccommunitycolleges.edu/wp-content/themes/vlc-child/style.css?ver=4.17.3
After this is disabled, the search shows the data fine:
Check your custom CSS and remove this rule.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hello Aleksander,
Thanks for helping.
I've disabled the custom CSS . However, the issue still occurs. Ideas?
Hi again Stephen.
I can still see it on the page:
Did you purge cache after you cleared this CSS?
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Yes, I purged the cache. I turned it back on because the issue was still occurring when I disabled it.
I've disabled the line of code again.
Best,
Stephen Best
Web Specialist
Surry Community College
Hi again Stephen.
I just visited your site, and the search is working fine. Please check out the video below.
Can you test again please?
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hello Aleksandar,
I tested again and the issue still occurs. I've cleared my browser cache too.
However, the issue does not occur when testing with the Chrome browser. When I test with Firefox, Safari, and Microsoft Edge, the issue still occurs.
The issue still occurs when I ask others to test on their systems. They have to perform a hard refresh on their browser to make the course list show up. Sometimes it requires them to perform multiple hard refreshes.
Hello again Stephen.
I checked with Firefox, Edge 101 (on Windows 11), Edge 100 (on Windows 10), and Safari 15.3, but they all work (see attached screenshots). I used 4 different computers to test, so there's no cache on my end that'd make it work and there was no need to perform any refreshes, let alone hard refreshes.
I can't see the CSS when the page is inspected either anymore, so I don't know what issues you're facing on your end. We also tried with and without VPN, but we couldn't replicate the issue - the table loads just fine. If you're still facing the issue, I don't believe I'll be able to help since there's no way to replicate it on our end.
Can you ask your hosting provider if there are any blocks or limitations? Can they perform a deeper cache purge? That shouldn't do anything since my colleagues who accessed your page for the first time wouldn't have been able to see the table, but it's worth a shot.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hello Aleksander,
I investigated some more.
The CSS code that was asked to be disabled was not be causing the problem. I re-enabled it.
That CSS is actually needed because it hides the table of courses on the initial page load. Otherwise, the courses will automatically populate without any user input in the search bar, and we do not want that to happen.
The course list stays hidden until a user initiates a search. Then, the course list auto-populates thereafter.
Something else is causing the issue…
Thank You,
Stephen Best
Web Specialist
Surry Community College
Hi again Stephen
At the moment, the table displays on the page without entering anything in the search field, which is the default behavior of it.
What you're doing with the Global Search is not a built-in functionality of wpDataTables, so I can't help you with applying that logic (of hiding the table before searching through the global search).
Hiding the table before the filtering is applied is a feature that's included in our add-on Powerful Filters, but it doesn't apply to the Global Search that you're using.
If you continue using the custom solution you've implemented, you also have to include a custom logic that will change "display: none" to "display: block" after something's been entered in the search, but providing support for custom solutions is not covered.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi Aleksandar,
My apologies. There was a line of Javascript that was still commented out. I had not re-enabled it yet.
Please check again.
Hi again Stephen
I can see that it's working as it should now up until the data from the Search field is removed (see attached screencast).
Basically, this custom logic that you applied works fine initially (the table is hidden, until a search criteria is entered), but when the search field is cleared, it displays the whole table. This, as mentioned before, is custom work and it's not the default behavior of the plugin, so you will need to alter the code to revert to hiding the table when the search field is empty.
As for the issue about reloading the page until it works - I was not able to replicate it - it hides the table when the page is visited, and then it applies the search values normally. There was no need to revisit the page multiple times to get it to work. Have you tried from different computers, have you tried clearing the cache?
Attached files: Screencast 2022-05-16 10:46:22.mp4
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables