[Resolved] JavaScript to limit datepickers & geo stopped working on some Views & Post Forms

[Author]

Posts

[Luo Yang]

I have marked this thread as "Waiting for feedback", please confirm it, then update here

[simonM-5]

Hi Luo

I can confirm that
- case (1) (DATE OF BIRTH) - unverified_family
- case (2) (DATE OF BIRTH) - unverified_nanny

are working now for unverified families and nannies.

Please proceed to the next cases.

Thanks and kind regards
Simon

[Luo Yang]

OK,

3) Post Form - Edit Unverified Family User
<site_url>/en/sign-up-complete-profile/
Field blank instead of showing the stored date on loading the edit form
Datepicker limits values correctly to 18 years ago

I have tried above page, it is displaying post form "Post Form - New Family User", see it here:
hidden link
It is a post form for creating new post, so it is expected result: it is showing the blank field value.

Can you confirm it? and we can proceed to the next cases.

[simonM-5]

Hi Luo

During our registration process, there is a conditional check to see if a Nanny or Family record has already been created. Once the user record has been created in the first step and you log in as that new user:

FAMILIES:
If you went through the registration process via the Sign Up link (for families) ...
a) ... and if you only created the user record (role: unverified_family), but didn't complete the Sign Up process and thereby create a record in post type Family, then the View should present you with "Post Form - New Family User (ID: 16794)"
b) ... and successfully created a record in post type Family, then the View should present you with the "Post Form - Edit Unverified Family User (ID: 16847)" form.

NANNIES:
If you went through the registration process via the Become a Native Nanny link (for nannies) ...
a) ... and if you only created the user record (role: unverified_nanny), but didn't complete the Become a Native Nanny process and thereby create a record in post type Nanny, then the View should present you with "Post Form - New Native Nanny User (ID: 16624)"
b) ... and successfully created a record in post type Nanny, then the View should present you with the "Post Form - Edit Unverified Native Nanny User (ID: 16630)" form.

So to test cases 3 and 4 you need to have completed the full registration process for both Families and Nannies, so that there is a user record in the User table and a Family or Nanny record in post type Families or Nannies . Then when you login in as those "unverified" Families or Nannies, the Edit forms for each type should present the stored date correctly from the database, and also ensure that no dates are presented in the datepicker, which are not at least 18 years prior to the current date.

Kind regards
Simon

[Luo Yang]

OK, I have tried below steps in your website:
1) Edit the post form "Post Form - Edit Unverified Family User"
Change the JS codes as below:

jQuery(document).on('cred_form_ready', function(){
    jQuery('.js-wpt-date').each(function() {
        val = jQuery('input[name="wpcf-family-user-date-of-birth[display-only]"]').val();
        jQuery(this).datepicker("option", "minDate", "-100Y").datepicker("option", "maxDate", "-18Y");
        jQuery('input[name="wpcf-family-user-date-of-birth[display-only]"]').val(val);
    });
});

2) Login as a "Unverified Family" user,
3) goto URL <site_url>/en/sign-up-complete-profile/
4) Back to above URL, refresh the page, click into the datepicker "DATE OF BIRTH", it works fine, can you confirm it? thanks

[simonM-5]

Hi Luo

Yes, I can confirm that the following works in Safari, Chrome, Firefox for "Post Form - Edit Unverified Family User":
1) Datepicker is showing the previously entered date correctly (ie not appearing blank any more)
2) Datepicker is still successfully limiting dates so that users can only enter birthdates which are at least 18 years ago.
3) User can still choose a new date and update the profile with new date successfully
4) Newly chosen dates are chosen correctly from the database next time the unverified family tries to update their profile.

So basically I think we can put a tick against case (3).

Case (4) should be similar, however as stated before we were using the same code in both forms and getting different results.

Please let me know once you see case (4) working and I can do a counter test.

To continue reproducing the test cases from case (5) onwards, you will need to change the role of your new fake Family and fake Nanny from "Unverified Family" to "Family" and "Unverified Nanny" to "Native Nanny" in the back end.

Kind regards
Simon

[Luo Yang]

I assume we are talking about post form "Post Form - Edit Unverified Native Nanny User":
hidden link

Yes, you are right, it is similar, I have replaced the JS codes as below:

jQuery(document).on('cred_form_ready', function(){
    jQuery('.js-wpt-date').each(function() {
        val = jQuery('input[name="wpcf-nanny-user-date-of-birth[display-only]"]').val();
        jQuery(this).datepicker("option", "minDate", "-100Y").datepicker("option", "maxDate", "-18Y");
        jQuery('input[name="wpcf-nanny-user-date-of-birth[display-only]"]').val(val);
    });
});

Please test again, check if it is fixed, thanks

[simonM-5]

HI Luo

Thanks, I confirm that case 4 is working now.

To continue reproducing the test cases from case (5) onwards, you will need to change the role of your new fake Family and fake Nanny from "Unverified Family" to "Family" and "Unverified Nanny" to "Native Nanny" in the back end.

Kind regards
Simon

[Luo Yang]

I have tried these in your website:
1) Edit the test user 123@123.com, setup user role as "Family" + "Native Nanny" in backend
2) Login as above test user, try both URLs:
hidden link
hidden link

It works fine, see my screenshot place-ad.JPG

Can you confirm it? thanks

[simonM-5]

Hi Luo

I cannot confirm cases 5 to 8 are working:

For cases 5 and 6, when creating the New Job Ad or Nanny Ad respectively, the datepicker is still offering dates from the past.

For cases 7 and 8, when editing a previously saved Job Ad or Nanny Ad, the incorrect behaviour is identical:
- the previously stored date (30/11/2021) is not being retrieved from the database (instead showing today's date 29/11/2021)
- the datepicker is correctly offering only dates from the past
- choosing a new date (30/11/2021), an incorrect date is displayed in the field (30/12/2000)
- after saving and editing the Ad again with (30/11/2021), today's date is displayed instead (29/11/2021)

Kind regards
Simon

[Luo Yang]

I have double checked the URLs I mentioned above:
https://toolset.com/forums/topic/javascript-to-limit-datepickers-geo-stopped-working-on-some-views-post-forms/page/3/#post-2232127
See my screenshot:
https://toolset.com/wp-content/uploads/2021/11/2232127-place_ad.jpg
Are we talking about same website? is there any other missing steps?

[simonM-5]

Hi Luo

Yes, you are on the right website.

I tested case 5 again. All I did was log in as nativefamily6 and immediately clicked Place a Job Ad button. The datepicker still shows dates from the past. However, without doing anything else, if I simply reload the page, then the datepicker does NOT show dates from the past. So there seems to be some kind of inconsistency in how the page is being loaded.

See screenshots.

Kind regards
Simon

[Luo Yang]

You need to wait for 1~2 seconds, until the JS event "cred_form_ready" is triggered, the JS event "cred_form_ready" will be triggered after the Toolset forms is loaded

[simonM-5]

Hi Luo

Even after waiting 5 seconds after the page has loaded the datepicker is not restricting the dates for cases 5 and 6.

Kind regards
Simon

[Luo Yang]

I have edited both post forms:
hidden link
hidden link
Change the JS codes from:
jQuery(window).bind("load", function() {

To:
jQuery(window).bind("cred_form_ready", function() {

As I mentioned in the first answer:
https://toolset.com/forums/topic/javascript-to-limit-datepickers-geo-stopped-working-on-some-views-post-forms/#post-2132295
You can use JS event "cred_form_ready" to trigger the custom JS codes.

Can you confirm it? thanks