Support

Account

Home Forums Backend Issues (wp-admin) Google Maps JS Alert

Solved

Google Maps JS Alert

  • When I have google map field in edit post screen, if I want to navigate away from page I always get alert dialog:

    “The changes you made will be lost if you navigate away from this page
    Are you sure you want to leave this page?”

  • I’m also seeing this.

  • I am also having this problem. Not sure if it was v5 or v5.0.8

  • Just saw the 5.0.9 update. Installed, and the issue seems to be resolved. I’ll definitely be keeping an eye on though.

    If you happen to see this, thanks Elliot!

  • I see the sama issue in my installations. Also did the update to 5.0.9, but the problem still exists

  • @strommerm can you try the plugin (a fresh download from this site) on a fresh install of WordPress?

    If the problem still persists there, let us know.

  • hi daron, i gave that a try, but the issue also occures on a fresh install.
    Everything’s working fine without an address entered in the map.
    As soon as you add an address the page asks if you really want to leave without any changes done on editing the page.

  • Ah, the address! That’s what it is! I never noticed that before. That’s definitely something to look at more closely.

  • Great news! We have progress! I took a stab at delving into the ACF core JS files and I think I have found the problem.

    The issue lies within the input.js that spits out all the javascript for ACF to function. I suspect the same code is within google-map.js but I didn’t want to screw around with enqueueing it and de-registering the rest of them.

    I started by commenting out all the JS regarding Gmaps, and slowly uncommenting it out to see where the weird reload was coming from. This narrowed it down to this function call.

    Around line 4105, you will find the acf/setup_fields function. Here is where the problem lies.

    	/*
    	*  acf/setup_fields
    	*
    	*  run init function on all elements for this field
    	*
    	*  @type	event
    	*  @date	20/07/13
    	*
    	*  @param	{object}	e		event object
    	*  @param	{object}	el		DOM object which may contain new ACF elements
    	*  @return	N/A
    	*/
    	
    	acf.add_action('ready append', function( $el ){
    		
    		//vars
    		var $fields = acf.get_fields({ type : 'google_map'}, $el);
    		
    		
    		// validate
    		if( !$fields.exists() )
    		{
    			return;
    		}
    		
    		
    		// validate google
    		if( typeof google === 'undefined' )
    		{
    			$.getScript('https://www.google.com/jsapi', function(){
    			
    			    google.load('maps', '3', { other_params: 'sensor=false&libraries=places', callback: function(){
    			    
    			        $fields.each(function(){
    					
    						acf.fields.google_map.set({ $el : $(this).find('.acf-google-map') }).init();
    						
    					});
    			        
    			    }});
    			});
    			
    		}
    		else
    		{
    			$fields.each(function(){
    				
    				acf.fields.google_map.set({ $el : $(this).find('.acf-google-map') }).init();
    				
    			});
    			
    		}
    		
    		
    	});

    The variable and the first statement are harmless. The if statement just checks to see if any google map fields exist. The issue is further narrowed to the “Validate Google” part of the function. If you comment out that whole if/else statement, the field will not load, however, no warning will be triggered.

    I’m struggling to see how the else statement fits into the picture as well. At first I thought it was for rendering fields after the initial first map, but adding console comments show that the if part of the function is called for each map field regardless of other maps on the page.

    If you comment out the if part of the function, and just leave the else (removing the “else” and curly brackets so it triggers correctly), a google is undefined error is thrown and the map doesn’t load. However, there is no warning when navigating away.

    I feel like I’m rambling now, but the issue lies within the if statement. I have a feeling that this is because something in the pages <form> element is being altered by the rendering of the map, triggered from this location. This triggers the warning message when trying to navigate away from the page.

    I’ve examined the input.js file from v4 (current on repo) and there doesn’t seem to be a lot of differences. There was the call in v4 to a function called is_clone_field but adding that to v5 returned undefined.

    So this is where my knowledge ends. I also feel like I may be rambling 🙂

    I’m tagging a couple people so hopefully this can get resolved! It’s a very strange error but it definitely needs to be addressed. One of the great things about ACF is the awesome user interface as well as the well thought out UX. This bug is a game-breaker on that front though. Clients shouldn’t feel like all their work is lost every time they want to navigate away from one of these pages. It’s a false sense of unease that shouldn’t be there.

    Hope this helps!


    @fatbeehive
    @Elliot Condon

    @bobz
    @aditron @strommerm

  • Ok, i think i found the reason of this issue.

    On creating the map function render of javascript file js/input.js on line 3775 is called.
    After creating the map this.update( lat, lng ).center(); is called.
    And here on line 3928 the lat and long fields are set with the same values as they already have and a change trigger called. Thats the reason why the page thinks about changes.

    uncommenting the .trigger(‘change’); in line 3930 fixes the problem.

    the only problem is that changes are not caught, if there are real changes. IMHO the change trigger only should be called on real changes and not on initialization.

  • following piece of code, put after setting the lat lng fields (line 3927), fixes all problems for me.

    // fire the change trigger only on real changes
    var oldLat = this.$el.find(‘.input-lat’).val();
    var oldLng = this.$el.find(‘.input-lng’).val( lng );

    if (oldLat != lat || oldLng != lng) {
    this.$el.trigger(‘change’);
    }

    Would be fine to have this fixed in one of the next releases.

  • Awesome! While this is certainly an improvement, I just uncovered one more tiny-ish bug.

    With the snippet above being used instead of the old change code, if you have a pre-populated field and click on the address and change it to a new location from the drop-down, it does not trigger page reload warning, although it should. The “change” function is being called, so why is there no message?

    Personally, I’m the type of person to always hit the update button but sometimes people won’t and we should account for that.

    I’ve made a short video showing the problem. If you watch my dev tools, every time the window moves, a “Change” is triggered in the console (I added it). However, it only shows the message for changes that occur by clicking the map/marker.

    You will notice that the map also triggers 2 change console logs on load.

    https://www.youtube.com/watch?v=OKh43wBJkC8


    @strommerm

  • hmm, i also tried that, but it triggers the changes correct for me.

  • @strommerm can you link to a gist of your input.js file?

  • hi daron, i attached the file to this message.

  • So this definitely isn’t working as intended.

    Uncomment the debugger for the change method (line 2267).

    If you want to see the debug tool in action, click around on the map and watch the console.

    Now follow these steps:

    1. Choose a very generic location. A large city works well.
    2. Update the post and reload.
    3. Click on the address. Since you used a generic city with lots of locations, a drop down should appear with other choices. If the drop down doesn’t appear, try pressing on the down arrow key.
    4. If you’re watching your console, you will notice there isn’t a change triggered by the debug tool, even though you chose a different location.

    If you type a location it works as well as clicking the map. Why doesn’t it work for switching a location without typing?

    I know this is probably an extreme fringe case, but I feel like the answer is so simple but I can’t figure it out!

  • I made a gist in case anyone comes along later and needs to copy our code until Elliot can implement an official fix.

    https://gist.github.com/Daronspence/9179023c8e956e99974e

    Note to regular users out there, you will need to re-compile input.min.js from input.js to take advantage of this fix without enabling debugging. input.js is not loaded by default unless script debugging is enabled with the flag outlined in acf.php. To enable script debugging, you can add define('SCRIPT_DEBUG' , true); to the top of acf.php in the root of the plugin folder.

  • hi daron, attached the new version. I think the problem is fixed now.
    Triggering the change on the element is not enough. It need to be triggered on the field. Now it looks good.

  • Very nice! Can I ask what you changed/added?

    I sent an email to Elliot regarding our efforts and it would be good to document all the changes so he can review them before implementing a bug fix patch.

  • instead of:

    if (oldLat != lat || oldLng != lng) {
    	this.$el.trigger('change');
    }

    it should be:

    if ( oldLat != lat || oldLng != lng ) {
    	this.$el.find('.input-lng').trigger('change');
    }
  • Frikken sweet! I updated the gist I sent in the email, so hopefully he hasn’t read it yet 🙂

    Thanks for all the hard work @strommerm! You deserve a trophy or something! Or perhaps just a pint 😛

  • Hey guys

    Thanks for all your great work on this issue. I’ve just added some new logic to help avoid this problem. It doesn’t seem to effect everyone and I can’t replicate it on my end, but I’m quite confident that the next version will solve the issue.

    I’ve created a new function which updates an inputs val, and only triggers the change event if the new val is different to the old val.

    Good work on the above hot fixes,

    Cheers
    E

  • @elliot

    Any idea when the next version will be released? 😉

    Just curious how long I’ll have to tell clients to wait before they update.

    Thanks for the awesome plugin!

Viewing 25 posts - 1 through 25 (of 25 total)

The topic ‘Google Maps JS Alert’ is closed to new replies.