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

[Author]

Posts

[simonM-5]

Hi Support

We recently moved from Avada to Elementor Pro and since various JavaScripts to limit datepickers and the Location entry field for Toolset Maps to addresses within Germany only doesn't appear to work any longer in some Views and some Post Forms.

I don't know whether it's due to changes in the recent Toolset plugin updates, or perhaps because we're displaying the view now in the Toolset View Elementor Pro Widget?

Question: In general, is the JavaScript specified in Toolset Views expected to be executed correctly by specifying it in the Toolset View, or should it be placed in the Toolset View Widget in Elementor Pro? I would prefer to keep all the JavaScript in the original Toolset Views, if possible.

1) Views: Locations are no longer being limited to locations in Germany, as was working previously:
- Find a Job Search and Results View
- Find a Native Nanny Search and Results View

using:

jQuery(document).ready(function($){
	jQuery(".js-toolset-maps-distance-center").geocomplete({country: 'DE',type: []});
});

2) "Edit" Post Forms where the JavaScript to limit Locations to German addresses no longer working:
- Post Form - Edit Nanny Ad
- Post Form - Edit Job Ad
however the same JavaScript IS working correctly on the "New" versions of the ads:
- Post Form - New Nanny Ad
- Post Form - New Job Ad

using:

var delayed = function() {
	jQuery(".js-toolset-maps-address-autocomplete").each(function(index,item){
		var map = jQuery(item).closest('.js-toolset-google-map-container').find('.js-toolset-google-map-preview:eq(0)');
		jQuery(item).geocomplete({'country':'DE', 'type': [], 'map': map});
	});
};
jQuery(document).ready(function(){
	setTimeout( delayed, 2000 );  
});

3) On following Post Forms, the datepicker is no longer disallowing dates from up to 18 years ago (users must be 18 to join our site, so birthdate must be minimum 18 years ago):
- Post Form - New Family User
- Post Form - New Nanny User

using:

jQuery(window).bind("load", function() {
   jQuery( ".js-wpt-date" ).datepicker("option", "minDate", "-100Y").datepicker("option", "maxDate", "-18Y");;
});

Thanks and best regards
Simon

[Luo Yang]

Hello,

Q1) and Q2):
I can duplicated the same problem, and have escalated this issue, will update here if there is anything news.

Q3) Please try to modify your custom JS codes as below:

jQuery(document).on('cred_form_ready', function(){
   jQuery( ".js-wpt-date" ).datepicker("option", "minDate", "-100Y").datepicker("option", "maxDate", "-18Y");;
});

And test again. It works fine in my localhost, see my screenshot

[simonM-5]

Hi Luo

Thanks for that, the code works well now for limiting the datepicker on
- Post Form - New Family User
- Post Form - New Nanny User

Looking forward to your update on the geo-location limiting.

Kind regards
Simon

[Luo Yang]

You can try the custom JS codes mentioned in our Knowledge Base:
hidden link

For example:

( function( $ ) {
	$( document ).bind( 'js_event_wpv_addon_maps_init_map_completed', function(){

        var input = document.getElementById('toolset-maps-distance-center');
        var options = {
        types: ['(cities)'],
        componentRestrictions: {country: 'de'}
        };

        autocomplete = new google.maps.places.Autocomplete(input, options);

	});
})( jQuery );

Above codes works fine in my localhost, see my screenshot

[simonM-5]

Hi Luo

I tried adding it to the view "Find a Native Nanny Search and Results View", but it didn't work.

I also noticed in my previous code, the element was js-toolset-maps-distance-center. I tried changing toolset-maps-distance-center to js-toolset-maps-distance-center also but that didn't work either.

When I use Safari Inspector, there are parts shown as toolset-maps-distance-center and others as toolset-maps-distance-center. Could you please confirm which it should be? (Although neither are working for me at the moment)

Thanks and regards
Simon

[Luo Yang]

I assume we are talking about below problem page:
hidden link

I have tried it in my Chrome browser, it works fine, see my screenshot country3.JPG

All the results are from German, can you confirm it?

It might be a cache problem of your website.

[simonM-5]

Hi Luo

Yes that is the page where it 's shown. In your screenshot, typing "As" isn't enough as there are many cities in Germany beginning with "As" so the first 5 suggestions are in Germany. Try "Paris".

I cleared the WP Rocket cache, cleared the entire Safari browser cache and logged in again. I'm still seeing non-German addresses (see screenshot).

Kind regards
Simon

[simonM-5]

Hi Luo

I think I have solved it: I commented out the line

        types: ['(cities)'],

and now it appears to work well. I think it was only filtering city names, rather than applying a national filter (ie country):

Can you confirm this?

Thanks and regards
Simon

[Luo Yang]

Yes, you are right, the parameter types: ['(cities)'] will output the city names only.

[simonM-5]

HI Luo

OK, great - so we have resolved all the datepicker issues, and the geo-limiting on the two Views.
Find a Native Nanny Search and Results View
Find a Job Search and Results View

However the geolimiting is still not working on the two Edit forms:
- Post Form - Edit Nanny Ad
- Post Form - Edit Job Ad

I find it curious that the same code works in the "New" version of the form (Post Form - New Nanny/Job Ad), but not in the "Edit" versions of the forms (Post Form - Edit Nanny/Job Ad). Why do the two forms behave differently?

I'm also presuming that the same code for the Views won't work in the forms. Correct?

If you need to test a form out, feel free to create a Job/Nanny Ad,
URL/en/place-a-nanny-ad/
URL/en/place-a-job-ad/

then click the Edit button on the resulting Ad.

Kind regards
Simon

[Luo Yang]

Thanks for the details, I am checking it in your website, will update here if find anything

[Luo Yang]

I have done below modifications in your website:
1) Edit the post form "Post Form - Edit Job Ad", change the JS codes as below, line 17~24:

jQuery( document ).on( 'cred_form_ready', function(){
      	var input = document.getElementById('cred_form_931_1_1_family-approximate-location');
        var options = {
        	//types: ['(cities)'],
        	componentRestrictions: {country: 'DE'}
        };
    	autocomplete = new google.maps.places.Autocomplete(input, options);
});

2) Create a page, test above form in frontend:
hidden link

It works fine, please check if it is fixed, thanks

[simonM-5]

Hi Luo

I tried to edit one of our existing Job Ads but I'm still seeing non-German addresses, eg I can still see "Paris, France" (see screenshot).

On examination of the page you created, it was showing a Block error when I examined it in the back end. I was able to press the button "Attempt Recovery" and save the page again, after which the preview was shown, however at the bottom of the preview, I can see the message: "Not handled google_address". Perhaps this could be relevant in your investigations.

The form is only visible (due to Toolset Access rules) to certain family roles and those roles may only edit their own created Posts. Nevertheless the changes you made to the JavaScript in the form should still apply to the existing Job Ads created by existing users, which apparently is not working yet.

Furthermore, when we edit the Job Ad, the date previously selected in the field "Start Date" is appearing as blank, although a date has already been chosen (it is a required field and cannot be empty when the form is created). This started to ring a bell for me and indeed, the issue was addressed previously in this ticket (https://toolset.com/forums/topic/date-pickers-appear-empty-in-toolset-forms-edit-mode/page/2/), but apparently the ticket got closed (probaby because I missed the reminder emails and this got overlooked, my bad!). Perhaps there is some information there which might be helpful for you in getting a resolution to both issues.

Kind regards
Simon

[simonM-5]

Hi Luo

PS: I cleared WP Rocket cache and Safari cache before testing in a private browsing window.

If you need a couple of test logins, please ask for a private reply.

Kind regards
Simon

[simonM-5]

Hi Luo

Are there any updates here? I haven't heard anything from you on this topic for 4 weeks.

Thanks and regards
Simon