[Resolved] Second Datepicker Filter Causing Page to Jump to Top

[Author]

Posts

[thomasT-8]

Tell us what you are trying to do?
I have set up an "Upcoming Events" section by setting up a View with the Toolset Plugin. I have it set up such that on page load, it will only display events that are greater than a custom field (Event End Date), and that a user is given the following 3 options to filter events:
1. Event Type
2. Start Date
3. End Date

The problem I am having is that on page load, if a user already has selected a start date and when they proceed to select an end date, the page will jump to the top and the End Date won't be selected. In the console, this error is produced when the page is send to the top: "Uncaught Missing instance data for this date picker" datepicker.min.js?ver=1.11.4:11.

I have disabled all of the site's plugins except for Toolset Types and Toolset Views and the issue still occurs. There does not seem to be any custom JS code in the Theme's functions.php or dist JS files that could be interfering with the Datepicker.

I've consulted this forum thread (https://toolset.com/forums/topic/problem-with-datepicker/), but the steps to the solution does not seem relevant to my problem.

Is there any documentation that you are following?
I have followed the following documentation to setup the onload custom query that I have described above:
https://toolset.com/documentation/user-guides/views/date-filters/

What is the link to your site?
hidden link

I will attach screenshots of how my filters are set up for the "Upcoming Events" view. The "Search and Pagination" and "Loop Editor" section were pasted in VS Code in order to properly display all of the code.

[Luo Yang]

Hello,

I assume we are talking about a custom date field created with Toolset Types plugin.

And you are going to filter the result by above custom date field with comparison "between".

I have tried it in my localhost with fresh WP installation + the latest version of Toolset plugins, it works fine, I don't see the problem

Please check these in your website:
1) Make sure you are using the latest version of Toolset plugins, you can download them here:
https://toolset.com/account/downloads/

2) In case it is a compatibility problem, please deactivate all other plugins, and switch to wordpress default theme 2021,

[thomasT-8]

Hi Luo,

Yes, both the Start and End Event Date are custom fields defined in the Toolset Types plugin. I am filtering the results above with the between comparison.

I have also done a fresh WP installation and mimicked the Start and End date select options with a between comparison, and the same error is still being produced in my console.

On the live website, both Toolset Types and View are up to date. I have disabled all other plugins and was still encountering that issue. Disabling Divi is not possible since the entire site is built off of it, which is why I did a fresh WP installation on my local machine using MAMP.

Is there a way for me to edit my original ticket such that I can remove the link to my staging site?

[Luo Yang]

Please provide database dump file(ZIP file) of your website, you can put the package files in your own google drive disk, share the link only, also point out the problem page URL, I need to test and debug it in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/

I have edited your post to remove the links

[thomasT-8]

Hi Luo,

A database dump file of my local WP installation or the staging site? I’m experiencing the Datepicker error on both the local and staging.

[thomasT-8]

In addition, what email and password should I use to create the temporary administrator account?

[Luo Yang]

You can simply provide your staging website credentials in below private message box, also point out the problem page URL, so I can export the database dump file from it. thanks

[Luo Yang]

Thanks for the details, I can installer the duplicator package in my localhost, but there isn't same problem, see my screenshot datapicker.JPG

Is there any special steps missing?

[thomasT-8]

The error doesn't appear every single time on the first selection of the second date. Sometimes, it will work fine, other times, it will produce the error. These are steps that I've followed to produce the error.

1. Load the page
2. Select the first date
3. Select the second date

The error will most likely be produced after selecting the second date.

I've included a Google Drive link to a screen recording that produces the error on my localhost.
hidden link

[Luo Yang]

Thanks for the video and details, it seems the problem occurs randomly, I need to test it in my localhost, will update here if find anything.

[Luo Yang]

I have tried it in my localhost, and find these:
1) You are using AJAX search feature
2) The problem occurs after select value in datepicker "Start Date", then select value in datepicker "End Date" quickly, before the AJAX update completed.

Can you confirm it in your website? I will escalated this issue.

If it is, I can escalated this issue, and currently, you can edit the post view, in section "Upcoming Events", choose another option "Full page refresh when visitors click on the search button", and test again.

[thomasT-8]

Yes, I have experienced that issue with the AJAX search feature when a user changes a filter (in this case, the Start or End Date). When I added a submit button instead of using AJAX to launch the query, however, the same error still occurs. Even with "Full page refresh when visitors click on the search button" is enabled, I still have the page jumping to the top of the page when someone selects a value in the "End Date".

[Luo Yang]

Thanks for the details, I have escalated this issue, will update here if there is any news.

[thomasT-8]

Hi Luo, have there been any updates from 2nd Tier Support?

[Luo Yang]

I have checked it in our to-do list, it is escalated to our developers, but there isn't any more news.

Currently, you can try these:
Edit the post view, in section "Custom Search Settings":
choose option "Let me choose individual settings manually" + option "Update the View results only when clicking on the search button" + option "Reload the page to update the View results" + option "Always show all values for inputs"
And test again.
See my screenshot disable-ajax-search.JPG

This will disable Views AJAX search feature completely.